Components

Select

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

Import

import { Select, SelectItem, SelectGroup, SelectSeparator } from '@rinzai/zen';

Examples

Custom options

An item can show anything; its label is what the field shows and typing matches. Disabled items are skipped by the keyboard.

Groups

SelectItem children, organised with SelectGroup and SelectSeparator; the keyboard skips the disabled one.

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. Fill it with SelectItem, organised with SelectGroup and SelectSeparator. For long or searchable lists, use Combobox.

Prop	Type	Default
`children`Required SelectItem, SelectGroup and SelectSeparator.	`ReactNode`	`—`
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`defaultValue` The first value, when the select keeps its own.	`string \| null`	`null`
`disabled`	`boolean`	`false`
`id`	`string`	`—`
`listClassName` Classes for the popup list.	`string`	`—`
`name` Form field name: adds a hidden input with the value.	`string`	`—`
`onValueChange`	`((value: V) => void)`	`—`
`placeholder` Shown while nothing is chosen.	`string`	`—`
`size` Height, matching Button's: sm (32px), default (40px) or lg (44px).	`"default" \| "lg" \| "sm"`	`default`
`value` The chosen value, when you keep it; null for none.	`string \| null`	`—`

<SelectItem>

One choice in a Select. Its label (or its text, when that's all it holds) shows in the field once chosen and is matched when typing to jump.

Prop	Type	Default
`value`Required	`string`	`—`
`className`	`string`	`—`
`disabled`	`boolean`	`—`
`label` Text for the field and for typing to jump (defaults to the item's text).	`string`	`—`

<SelectGroup>

A labelled group of SelectItems.

Prop	Type	Default
`label`Required	`ReactNode`	`—`

<SelectSeparator>

A hairline between items or groups.

No props of its own; it accepts the props of the element it renders.