Select · humanonlyweb/ui

Examples

Basic

Timezone

Multiple

Labels

API

Prop	Type	Default
`options` Options to choose from.	`SelectOption<T>[]`	`[]`
`error` `true` marks the control invalid; a string also shows it as the message, replacing the hint.	`string \| boolean`	—
`placeholder` Shown when nothing is selected.	`string`	`"Select an option"`
`multiple` Allow several selections; `v-model` becomes an array and the list stays open while picking.	`boolean`	`false`
`optional` Appends the `optional` translation to the label.	`boolean`	`false`
`disabled` Disables the control.	`boolean`	`false`
`label` Visible label, linked to the control.	`string`	—
`hint` Help text under the control, announced as its description.	`string`	—
`name` Form field name: submits the value with a native form, via hidden inputs.	`string`	—
`id` Id for the control; generated with `useId()` when omitted.	`string`	—
`modelValue` The selected value, or values with `multiple`.	`T \| T[]`	—

Event	Payload
`update:modelValue` `v-model:modelValue` update.	`[value: T \| T[] \| undefined]`

Slot	Props
`value` Trigger content, replacing the selected label or placeholder.	`{ selected: SelectOption<T>[]; placeholder: string; }`
`option` Option content.	`{ option: SelectOption<T>; selected: boolean; active: boolean; }`
`chevron` Replaces the trigger's chevron.	—
`check` Replaces the selected option's check mark.	—

Types

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

export type SelectValue = string | number;

Styling

Parts: fieldfield-labelfield-optionalselect-controlselect-triggerselect-valueselect-chevronselect-listboxselect-optionselect-option-checkselect-option-labelfield-message
States: data-field-errordata-field-namedata-select-opendata-select-errordata-select-placeholderdata-select-activedata-field-tone

Keyboard

Keys	Action
`↓` / `↑`	Open, then move between options
`Enter` / `Space`	Open, or select the active option
`Home` / `End`	First / last option
Any letter	Jump to an option by label; repeat a letter to cycle
`Tab`	Keep the active option and close
`Escape`	Close

Accessibility

Focus stays on the trigger; the active option is set with aria-activedescendant.