Select

Installation

npx shadcn@latest add @blank/select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
  </SelectContent>
</Select>

Examples

Sizes

32, 36 and 40 px on the same field surface as Input, so a trigger and a text field in one form match.

Below the trigger

The default item-aligned position lays the list over the trigger with the selected item on top of it, like a native menu. position="popper" drops it below instead, at the trigger's width.

Inverted

API Reference

Select

Every Radix Select.Root prop: value, defaultValue, onValueChange, open, onOpenChange, disabled, name.

SelectTrigger

Every Radix Select.Trigger prop, plus:

SelectContent

Every Radix Select.Content prop, plus:

SelectItem

Every Radix Select.Item prop: value, disabled, textValue.