Components

Select

Pick one value from a short list, fully keyboard-driven. For long or searchable lists, use Dropdown.

Import

import { Select } from '@rinzai/zen';

Examples

Custom options

renderOption shows anything per option; disabled options are skipped by the keyboard.

API reference

<Select>

Pick one value from a short list: a field-styled button that opens a list below it. Keyboard: arrows, Home/End, type to jump, Enter to choose, Escape to close. For long or searchable lists, use Dropdown.

Prop	Type	Default
`onChange`Required	`(value: V) => void`	`—`
`options`Required	`readonly SelectOption<V>[]`	`—`
`value`Required	`string \| null`	`—`
`aria-label`	`string`	`—`
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`listClassName` Classes for the popup list.	`string`	`—`
`name` Form field name: adds a hidden input with the value.	`string`	`—`
`placeholder` Shown while nothing is chosen.	`string`	`Select…`
`renderOption` Custom content for each option (the label is still used for typing to jump).	`((option: SelectOption<V>) => ReactNode)`	`—`