humanonlyweb/ui

Segmented

A single choice shown as a row of buttons.

Markdown

Examples

Basic

Copy code

Icon only

The option labels become the buttons' names.

Copy code

API

PropTypeDefault
options

Segments to render, in order.

SelectOption<T>[][]
label

Accessible name for the group.

string—
size

Size hook, exposed as data-segmented-size.

"medium" | "small""medium"
iconOnly

Segments render only the option slot (e.g. an icon); labels become their accessible names.

booleanfalse
disabled

Disables every segment.

booleanfalse
name

Form field name: submits the value with a native form, via hidden inputs.

string—
modelValue

The selected value.

T—
EventPayload
update:modelValue

v-model:modelValue update.

[value: T | undefined]
SlotProps
option

Segment content, e.g. an icon.

{ option: SelectOption<T>; checked: boolean; }

Types

export interface SelectOption<T extends SelectValue = SelectValue> {
  label: string;
  value: T;
  disabled?: boolean;
}

export type SelectValue = string | number;
Copy code

Styling

--ui-indicator-x, --ui-indicator-width, --ui-indicator-top and --ui-indicator-height place the indicator on the selected item.

Parts
segmentedsegmented-indicatorsegment
States
data-field-namedata-segmented-sizedata-segmented-icon-onlydata-segmented-slidingdata-segmented-animatedata-segment-checked

Keyboard

KeysAction
TabFocus the selected segment
Arrow keysSelect the next / previous segment
Home / EndSelect the first / last segment

Accessibility

  • The indicator is measured in the browser, so also style [data-segment-checked] for the first paint.
  • In right-to-left layouts, ← / → follow the visual direction.