Select

A custom dropdown for selecting a single value from a list of options.

Select

Installation

pnpm dlx stera-ui@latest add select

Composition

Use the following composition to build a Select:

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Examples

Sizes

Select Sizes

Size	Description
`sm`	Small
`md`	Medium (default)
`lg`	Large

With Groups

Use SelectGroup, SelectLabel, and SelectSeparator to organize options into labelled sections.

Select with Groups

Disabled

Select Disabled

Invalid

Select Invalid

API Reference

Built on Base UI's Select primitive — see the full API reference there.

Select

Select is an alias for Base UI's Select.Root. Accepts all its props.

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value: string) => void`	—
`disabled`	`boolean`	`false`
`name`	`string`	—

SelectTrigger

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

SelectContent

Prop	Type	Default
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`
`align`	`"start" \| "center" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`alignItemWithTrigger`	`boolean`	`true`

SelectItem

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	`false`