Select

Displays a list of options for the user to pick from—triggered by a button.

Docs API Reference

Component select-demo not found in registry.

Installation

Install the following dependencies:

Copy and paste the following code into your project:

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectPortal,
  SelectTrigger,
  SelectValue,
} from "@components/ui/select"
<Select
  options={[...]}
  itemComponent={(props) => (
    <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
  )}
>
  <SelectTrigger>
    <SelectValue<string>>{(state) => state.selectedOption()}</SelectValue>
  </SelectTrigger>
  <SelectPortal>
    <SelectContent />
  </SelectPortal>
</Select>

Examples

Error

Component select-error-demo not found in registry.

Changelog

2025-11-13 Add HiddenSelect component

To improve accessibility and integration with form libraries, we have added HiddenSelect component.

Segmented ControlSeparator