Loading…

Select

Picks one value from a short list of options.

Forms
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add select

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Select } from "@/components/ui/select";

Examples

Every example the tests run, live and operable, side by side.

Default
Grouped
With Disabled Option
Long List
Invalid
Spring Stagger

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Select>

Prop	Type	Default
`aria-describedby`	`string`	—
`aria-invalid`	`AriaAttributes["aria-invalid"]`	—
`aria-label`	`string`	—
`aria-labelledby`	`string`	—
`id`	`string`	—

Every prop of Radix UI’s Select.Root, plus className.

<SelectTrigger>

Prop	Type	Default
`triggerSize`	`"sm" \| "md" \| "lg"`	`"md"`

Every prop of Radix UI’s Select.Trigger, plus className.

<SelectContent>

Every prop of Radix UI’s Select.Content, plus className.

<SelectItem>

Prop	Type	Default
`label` What the trigger shows once this option is chosen. The primitive clones the item's text into the trigger, so a rich option — a name with a description under it — would otherwise drag all of that into a one-line trigger. Give the label here and the rest as children.	`ReactNode`	—

Every prop of Radix UI’s Select.Item, plus className.

<SelectLabel>

Every prop of Radix UI’s Select.Label, plus className.

<SelectSeparator>

Every prop of Radix UI’s Select.Separator, plus className.

Accessibility

Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen options prefer Combobox — scrolling a long listbox by keyboard is slow. The opening pop, option stagger and tick pop are decoration and stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

aria-describedby

string

—

aria-invalid

AriaAttributes["aria-invalid"]

—

aria-label

string

—

aria-labelledby

string

—

id

string

—

Prop

Type

Default

triggerSize

"sm" | "md" | "lg"

"md"

Prop

Type

Default

label

What the trigger shows once this option is chosen. The primitive clones the item's text into the trigger, so a rich option — a name with a description under it — would otherwise drag all of that into a one-line trigger. Give the label here and the rest as children.

ReactNode

—