Select

Single-option selection with a portaled popup, keyboard support and accessible states.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add select

Dependencies

What add select installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

2 examples · 1 component

Simple selection

Default value, keyboard support and visible focus.

Grouped options

Labeled groups and a separator inside the popup.

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`Select` Root; accepts value, defaultValue, onValueChange, name and disabled.	`—`	—
`SelectTrigger` Button that opens the popup and shows the value.	`button`	—
`SelectValue` Shows the selected value or the placeholder.	`span`	—
`SelectContent` Portaled popup; side, align and sideOffset adjust its position.	`div`	—
`SelectItem` An option; requires value.	`div`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Trigger with placeholder or value and a 1 px border.
Open	Portaled popup; the trigger is expanded (aria-expanded).
Highlighted option	The keyboard or pointer highlights the focused option.
Selected	The chosen option is marked inside the popup.
Focus visible	2 px ring outline on the trigger.
Disabled	disabled prevents opening.

Accessibility

Associate a label with the control (inside Field with FieldLabel, or a native label). Give SelectValue a descriptive placeholder when there is no value.

Opens and navigates with the keyboard (arrow keys, type to search, Enter to choose, Escape to close). The popup uses theme tokens and keeps the selection when opened inside a Dialog.