Select

Single-value dropdown built on reka-ui. There is no multiple prop: selecting several values is Combobox with multiple and ComboboxChips. For pickers that need search across many options, use Combobox instead.

Default

Trigger, value placeholder, then SelectItem rows inside Content.

With groups

Group options with SelectGroup and SelectLabel, divided by a SelectSeparator. Labels are visual separators, not selectable.

Item aligned

Set position to item-aligned so the content opens over the trigger with the selected item lined up, instead of the default popper placement below it.

Scrollable

Long lists scroll inside the content with up/down scroll buttons at the edges.

Invalid

Set aria-invalid on the trigger to show the error ring.

Disabled

The disabled attribute on the Select root disables the trigger.

API Reference

Select

Prop	Type	Default	Description
`modelValue`	`string`	—	Selected value. Supports v-model.
`defaultValue`	`string`	—	Starting value when v-model is not used.
`disabled`	`boolean`	`false`	Disable the entire select.

Event	Description
`update:modelValue`	Fires when the value changes. Enables v-model.
`update:open`	Fires when the dropdown opens or closes.

SelectTrigger / SelectContent

Prop	Type	Default	Description
`class`	`string`	—	Use class to set trigger width (e.g. w-[220px]).
`size`	`"sm" \| "default"`	`"default"`	(SelectTrigger) Trigger height.
`aria-invalid`	`boolean`	—	(SelectTrigger) Show the destructive error ring.
`position`	`"popper" \| "item-aligned"`	`"popper"`	(SelectContent) popper places the panel below the trigger; item-aligned overlaps the trigger with the selected item.

SelectItem

Prop	Type	Default	Description
`value`	`string`	—	Value committed when selected.
`disabled`	`boolean`	`false`	Block selection of this item.

Event	Description
`select`	Fires when the item is chosen.

SelectGroup / SelectLabel / SelectValue / SelectSeparator

Prop	Type	Default	Description
`placeholder`	`string`	—	(SelectValue) Text shown when nothing is selected. Group/Label organise items; Separator divides them.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Space`	Opens the listbox when the trigger is focused.
`Enter`	Opens the listbox, or selects the highlighted option.
`↑`	Moves the highlight to the previous option.
`↓`	Moves the highlight to the next option.
`Home`	Moves the highlight to the first option.
`End`	Moves the highlight to the last option.
`Esc`	Closes the listbox and returns focus to the trigger.

Follows the listbox pattern; the trigger exposes aria-expanded and the active option via aria-activedescendant.
Type-ahead jumps to options whose label starts with the typed characters.
Selected option is marked with aria-selected.

Scroll To Top Separator