⌄

Select

Forms

A custom dropdown for choosing from a list of options. Supports keyboard navigation and accessible labeling.

Preview

Code

VUE

<Select>
  Team
</Select>

Props

Label

Visible label above the select

Placeholder

Shown when no value is selected

Hint

Helper text below the select

Error

Error message when validation fails

Disabled

Prevents interaction

Required

Marks the field as required

Props API

Prop	Type	Default	Required	Description
`label`	`string`	`"Team"`	—	Visible label above the select
`placeholder`	`string`	`"Choose a team…"`	—	Shown when no value is selected
`hint`	`string`	`""`	—	Helper text below the select
`error`	`string`	`""`	—	Error message when validation fails
`disabled`	`boolean`	`false`	—	Prevents interaction
`required`	`boolean`	`false`	—	Marks the field as required

Usage

Use a Select when there are 5 or more options. For 2–4 options, consider Radio buttons instead — they allow the user to see all choices at once. Always provide a clear placeholder or default selection.

Accessibility

Uses role="combobox" on the trigger and role="listbox" on the dropdown.
Keyboard navigation: ArrowUp/Down moves between options, Enter/Space opens/closes, Escape closes.
aria-expanded reflects the open state of the dropdown.
Selected option uses aria-selected="true".