- Home
- Components
- Select

# 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


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

### SelectTrigger


Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Trigger size
state	'default' | 'error'	'default'	Visual state
...Radix props	ComponentProps<typeof SelectPrimitive.Trigger>	-	All Radix trigger props

### SelectContent


Prop	Type	Default	Description
position	'item-aligned' | 'popper'	'item-aligned'	Positioning strategy
...Radix props	ComponentProps<typeof SelectPrimitive.Content>	-	All Radix content props

### SelectItem


Prop	Type	Default	Description
prefix	ReactNode	-	Element rendered before the label
suffix	ReactNode	-	Element rendered after the label
...Radix props	ComponentProps<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>
```