Select

import { Select } from 'yarcl';

PlanPro

Value: pro

Uncontrolled, with placeholderChoose a plan

const plans = [
  { value: 'free', label: 'Free' },
  { value: 'pro', label: 'Pro' },
  { value: 'enterprise', label: 'Enterprise', disabled: true },
];

<Field label="Plan">
  <Select options={plans} value={plan} onValueChange={setPlan} placeholder="Choose a plan" />
</Field>

Options are data, not children: the selected label is known even while the list is closed, and the value type is inferred from options. Pass name to submit the value with a form.

Keyboard

Key	Action
Enter Space ↓	opens the list at the selected option
↑ ↓	moves between options, skipping disabled ones
typing	jumps to a matching option, even while closed
Enter Space	chooses the focused option
Esc	closes without changing the value

Props

Select

Accepts every native <button> attribute except color, value, defaultValue and onChange.

Prop	Type	Default	Description
options required	readonly SelectOption<V>[]		The options to choose from.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
defaultValue	V | null	null	Initial value when uncontrolled.
name	string		Form field name. Renders a hidden input with the value.
onValueChange	(value: V | null) => void		Called with the chosen option's value.
placeholder	ReactNode		Text shown when nothing is selected.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	Sizeconfig	config.defaults.size	Control size, from the sizes config.
value	V | null		Controlled value. null means nothing is selected.

SelectOption

Prop	Type	Default	Description
label required	string		Text shown to the user. Also used for type-to-select and filtering.
value required	V		Value reported by onValueChange and submitted with forms.
disabled	boolean		Prevents choosing this option.