Select

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

Types

interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
  state?: "default" | "disabled" | "error";
  size?: "sm" | "md" | "lg";
  font?: "standard" | "mono";
  align?: "left" | "center" | "right";
}

interface SelectItemProps extends ComponentProps<typeof SelectPrimitive.Item> {
  prefix?: ReactNode;
  suffix?: ReactNode;
}

// Other select components use Radix primitives:
// SelectRoot, SelectGroup, SelectValue, SelectContent,
// SelectLabel, SelectSeparator - all extend Radix component props

In Toolbar

<Toolbar>
  <ToolbarGroup>
    <Button icon variant="ghost" size="sm">
      <Settings className="size-4" />
    </Button>
    <Select defaultValue="medium">
      <SelectTrigger size="sm" className="w-20">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="small">S</SelectItem>
          <SelectItem value="medium">M</SelectItem>
          <SelectItem value="large">L</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <Button icon variant="ghost" size="sm">
      <Download className="size-4" />
    </Button>
  </ToolbarGroup>
</Toolbar>

Props

Select

PropTypeDefaultDescription
font'standard' | 'mono''mono'Font family applied to trigger and items
align'left' | 'center' | 'right''left'Text alignment applied to trigger and items
...Radix propsComponentProps<typeof SelectPrimitive.Root>-All Radix Select root props

SelectTrigger

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Trigger size
state'default' | 'error''default'Visual state
...Radix propsComponentProps<typeof SelectPrimitive.Trigger>-All Radix trigger props

SelectContent

PropTypeDefaultDescription
position'item-aligned' | 'popper''item-aligned'Positioning strategy
...Radix propsComponentProps<typeof SelectPrimitive.Content>-All Radix content props

SelectItem

PropTypeDefaultDescription
prefixReactNode-Element rendered before the label
suffixReactNode-Element rendered after the label
...Radix propsComponentProps<typeof SelectPrimitive.Item>-All Radix item props

SelectLabel, SelectGroup, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, SelectValue

Pass-through wrappers for corresponding Radix components.

Usage

<Select defaultValue="apple">
  <SelectTrigger size="sm" className="w-[180px]">
    <SelectValue placeholder="Select a fruit"/>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana" prefix={<Plus/>}>Banana</SelectItem>
      <SelectItem disabled value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes" suffix={<>Suffix<Minus/></>}>Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>

    <SelectSeparator/>

    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="aubergine">Aubergine</SelectItem>
      <SelectItem value="broccoli">Broccoli</SelectItem>
      <SelectItem disabled value="carrot">Carrot</SelectItem>
      <SelectItem value="courgette">Courgette</SelectItem>
      <SelectItem value="leek">Leek</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

State

<Select>
  <SelectTrigger disabled size="sm" className="w-[180px]">
    <SelectValue placeholder="Disabled"/>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Sides

Left

Top

Bottom

Right

<p className="text-sm font-medium mb-2">Left</p>
<Select>
  <SelectTrigger size="sm" className="w-[120px]">
    <SelectValue placeholder="Left"/>
  </SelectTrigger>
  <SelectContent side="<left | top | bottom | right>" position="popper">
    <SelectGroup>
      <SelectItem value="left1">Left 1</SelectItem>
      <SelectItem value="left2">Left 2</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Font Styles

Standard Font

Mono Font

{/* Standard font */}
<Select font="standard">
  <SelectTrigger size="sm" className="w-[120px]">
    <SelectValue placeholder="Standard"/>
  </SelectTrigger>
</Select>

{/* Monospace font (default) */}
<Select font="mono">
  <SelectTrigger size="sm" className="w-[120px]">
    <SelectValue placeholder="Mono"/>
  </SelectTrigger>
</Select>

Text Alignment

Left Aligned

Center Aligned

Right Aligned

{/* Left aligned (default) */}
<Select align="left">
  <SelectTrigger size="sm" className="w-[140px]">
    <SelectValue placeholder="Left aligned"/>
  </SelectTrigger>
</Select>

{/* Center aligned */}
<Select align="center">
  <SelectTrigger size="sm" className="w-[140px]">
    <SelectValue placeholder="Center aligned"/>
  </SelectTrigger>
</Select>

{/* Right aligned */}
<Select align="right">
  <SelectTrigger size="sm" className="w-[140px]">
    <SelectValue placeholder="Right aligned"/>
  </SelectTrigger>
</Select>

Error

<Select>
  <SelectTrigger state="error" size="sm" className="w-[180px]">
    <SelectValue placeholder="Error"/>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>