Select

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

Basic

Default

<div className="w-full max-w-xs">
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select an option" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>
          Fruits
        </SelectLabel>
        <SelectItem value="apple">
          Apple
        </SelectItem>
        <SelectItem value="banana">
          Banana
        </SelectItem>
        <SelectItem value="orange">
          Orange
        </SelectItem>
        <SelectItem value="grape">
          Grape
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>

Variants

With Multiple Groups

<div className="w-full max-w-xs">
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select a food" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>
          Fruits
        </SelectLabel>
        <SelectItem value="apple">
          Apple
        </SelectItem>
        <SelectItem value="banana">
          Banana
        </SelectItem>
        <SelectItem value="orange">
          Orange
        </SelectItem>
      </SelectGroup>
      <SelectSeparator />
      <SelectGroup>
        <SelectLabel>
          Vegetables
        </SelectLabel>
        <SelectItem value="carrot">
          Carrot
        </SelectItem>
        <SelectItem value="broccoli">
          Broccoli
        </SelectItem>
        <SelectItem value="spinach">
          Spinach
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>

Disabled Items

<div className="w-full max-w-xs">
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectLabel>
          Available Fruits
        </SelectLabel>
        <SelectItem value="apple">
          Apple
        </SelectItem>
        <SelectItem value="banana">
          Banana
        </SelectItem>
        <SelectItem value="orange" disabled={true}>
          Orange (Out of Stock)
        </SelectItem>
        <SelectItem value="grape" disabled={true}>
          Grape (Out of Season)
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>

Usage

Controlled Select

You selected: Nothing selected

<d />