Select

stable

Pick one option from a list, with typeahead and sections.

since v1.23.8 kB gzip

Preview

Code

Framework

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add select

Usage

React

Import only

import { Select, SelectItem } from "@/components/strata";

<Select label="Framework" defaultSelectedKey="vite">
  <SelectItem id="vite">Vite</SelectItem>
  <SelectItem id="next">Next.js</SelectItem>
</Select>

Props

Prop	Type	Default
`label` Visible label.	ReactNode	—
`selectedKey` Controlled value.	Key \| null	—
`onSelectionChange` Called when the user picks an option.	(key: Key) => void	—
`placeholder` Shown when empty.	string	"Select an option"
`isDisabled` Prevents interaction and dims the control.	boolean	false

Accessibility

Text field

Single-line input with label, description, validation and adornments.

Checkbox

Binary choice with indeterminate state and grouped variants.

Switch

Instant on/off setting, typically in settings lists.

Slider

Choose a value or range along a track, with steps and output.

Was this page helpful?

Documented since v1.2 · components/select.mdx