Laravel Segmented Control Component

Free · MIT

A small set of mutually exclusive choices, built out of real radios.

A Segmented Control built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::segmented-control>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::segmented-control
    label="View"
    :options="['List', 'Grid', 'Board']"
    wire:model.live="view"
/>

See the full API, props and live examples in the Segmented Control documentation.

Overview

<x-aura::segmented-control> picks one option from two to five — a view switcher, a date range, a filter.

It is a radiogroup containing real radio inputs, not a row of buttons. That is what gives the arrow keys their meaning and lets a screen reader say "2 of 3"; a set of buttons announces three unrelated controls and leaves the listener to work out that only one can be chosen.

Props

Prop	Type	Default	Description
`options`	`array`	`[]`	Strings, or arrays with `value`, `label`, `icon`, `disabled`.
`value`	`string\|null`	`null`	The selected value. Defaults to the first option.
`name`	`string\|null`	`null`	The radio group name. Generated when omitted.
`label`	`string\|null`	`null`	Names the group for assistive technology. Not shown.
`size`	`string`	`'md'`	`sm`, `md`, `lg`.
`fullWidth`	`bool`	`false`	Spreads the segments across the available width.