Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add segmented-control

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

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

Values, labels and icons

Period 
<x-aura::segmented-control
    label="Period"
    :options="[
        ['value' => 'day', 'label' => 'Day', 'icon' => 'sun'],
        ['value' => 'week', 'label' => 'Week', 'icon' => 'calendar'],
        ['value' => 'month', 'label' => 'Month', 'icon' => 'calendar-days'],
    ]"
    value="week"
/>

Sizes and full width

Small
Large
Full 
<div class="space-y-3">
    <x-aura::segmented-control label="Small" size="sm" :options="['One', 'Two']" />
    <x-aura::segmented-control label="Large" size="lg" :options="['One', 'Two']" />
    <x-aura::segmented-control label="Full" full-width :options="['One', 'Two', 'Three']" />
</div>

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.

Accessibility

  • role="radiogroup" with a real <input type="radio"> per segment. The browser supplies arrow-key navigation, the single tab stop and the position announcement.
  • The inputs are transparent rather than hidden: display: none would take them out of the accessibility tree and out of reach of the keyboard.
  • Pass a label. Without one the group has no name, and a reader announces the options with nothing to say what they are choosing between.