Pick one of a few named options from a row of segments, with an indicator that slides to the active choice. It is a group of aria-pressed toggle buttons, not a switch, because the choice is between named options rather than on/off. Its variant prop mirrors UiButton — solid, outline and ghost — so the two read as one family, and it covers both tab-style and icon-toolbar layouts (the role formerly held by the separate buttons group). Bind the selection with v-model; label it with aria-label or aria-labelledby.
Ejemplos
Billing period
Two named options; the indicator slides to the active one.
<UiSegmented
v-model="state.billing"
aria-label="Billing period"
:options="[
{ value: 'monthly', label: 'Monthly' },
{ value: 'yearly', label: 'Yearly' },
]"
/>Variants
solid, outline and ghost mirror the equivalent UiButton variants.
<div class="flex flex-col items-start gap-3">
<UiSegmented v-model="state.v1" aria-label="Solid" :options="[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]" />
<UiSegmented v-model="state.v2" variant="outline" aria-label="Outline" :options="[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]" />
<UiSegmented v-model="state.v3" variant="ghost" aria-label="Ghost" :options="[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]" />
</div>Icon toolbar
Icon-only segments with a title on each; square corners suit a toolbar. Options can carry an icon and no label.
<UiSegmented
v-model="state.tool"
variant="outline"
shape="square"
aria-label="Format"
:options="[
{ value: 'bold', icon: 'mdi:format-bold', title: 'Bold' },
{ value: 'italic', icon: 'mdi:format-italic', title: 'Italic' },
{ value: 'underline', icon: 'mdi:format-underline', title: 'Underline' },
]"
/>Sizes, shapes and a disabled option
Two sizes (sm, md), three shapes (pill, round, square), and per-option disabled.
<div class="flex flex-col items-start gap-3">
<UiSegmented v-model="state.a" size="sm" shape="round" aria-label="Small" :options="[{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]" />
<UiSegmented v-model="state.b" aria-label="Disabled option" :options="[{ value: 'on', label: 'On' }, { value: 'off', label: 'Off' }, { value: 'auto', label: 'Auto', disabled: true }]" />
</div>Full width
block stretches the control to fill its container.
<div class="max-w-sm">
<UiSegmented v-model="state.tab" block variant="ghost" aria-label="Filter" :options="[{ value: 'all', label: 'All' }, { value: 'active', label: 'Active' }, { value: 'done', label: 'Done' }]" />
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | string | number | undefined | The selected option value (v-model). |
| optionsobligatorio | array | — | Options as `{ value, label?, icon?, disabled?, title? }`. Provide label for text segments, icon for icon-only segments, or both; title sets the native tooltip. |
| variant | string | 'solid' | Active-segment appearance, matching UiButton: solid fills the indicator (white label), outline and ghost tint it (accent label). solidoutlineghost |
| size | string | 'md' | Control size. smmd |
| shape | string | 'pill' | Corner shape of the track, indicator and segments (matches UiButton). pillroundsquare |
| block | boolean | false | Full-width mode; the control fills its container and segments share the width equally. |
| ariaLabel | string | undefined | Accessible name for the group (omit if labelled by aria-labelledby). |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | string | number | Emitted with the chosen option's value. |