Select

Pick one option from a list. Free, MIT · Forms and input › Selects

Select-only combobox: a field-styled trigger that opens a listbox. Props not listed go to the trigger button.

Installation

npx valyro-cli@latest add select

npx shadcn@latest add https://valyro.xyz/r/select.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Select } from 'valyro-ui';

Props

Prop	Type	Default
`options`	`SelectItem[]`		Options to pick from, flat or in labelled groups. Or compose them as children: `Select.Item`, `Select.Group`.
`children`	`ReactNode`		The compound form instead of `options`: `Select.Item` and `Select.Group` elements.
`value`	`string`		Selected option value; an empty string means nothing is selected.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`		Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placeholder`	`string`	`'Select…'`	Trigger text while nothing is selected.
`emptyText`	`ReactNode`	`'No options'`	Shown in the popover when `options` is empty.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger height and text size.
`invalid`	`boolean`	`false`	Error border and aria-invalid on the trigger (an explicit `aria-invalid` wins).
`name`	`string`		Submits the value with the surrounding form (a hidden input, or the native select's own value).
`native`	`boolean`	`false`	Renders a native `<select>` in the same field look: the phone's own wheel or sheet, the browser's form validation (`required`) and autofill (`autoComplete`). `ref` and the other props then go to the `<select>`; option icons and descriptions are not shown in its list.
`required`	`boolean`		A value is required: `aria-required`, and the surrounding form does not submit without one.
`autoComplete`	`string`		Autofill hint of the native select, e.g. `country` (with `native`).

Compound parts

Select.Item (SelectItemPart), Select.Group (SelectGroupPart)

Related components

Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement

Previous: Tags Input · Next: Multi Select · All Forms and input