segmented

Pick one of a few options shown side by side. Real radios, so it posts normally.

Example

Laravel

<x-admin::toolbar>
    <x-admin::toggle name="failing" icon="filter" checked>Failing only</x-admin::toggle>
    <x-admin::segmented name="view" label="View" value="table" :options="['table' => 'Table', 'board' => 'Board']" />
</x-admin::toolbar>

Props

PropRequiredDefaultOptions
nameyes
options[]
valuenull
labelnull

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Segmented } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-toolbar" role="toolbar"><label class="adm-toggle"><input type="checkbox"  name="failing"  value="1" checked ><span><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>Failing only</span></label>
    <div class="adm-segmented" role="radiogroup"  aria-label="View" >
                    <label><input type="radio" name="view" value="table" checked><span>Table</span></label>
                    <label><input type="radio" name="view" value="board" ><span>Board</span></label>
    </div></div>