Select

Displays a list of options triggered by a button. Content defaults to align="start" for writing-direction friendliness. For a native <select>, see Native Select.

Basic

Open a list of options from a button trigger.

Installation

CLI

npx @sonojs/ui@latest add select

Also needsnpm i lucide-react

Composition

structure

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

Usage

select.tsx

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

export function Example() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Theme" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="light">Light</SelectItem>
          <SelectItem value="dark">Dark</SelectItem>
          <SelectItem value="system">System</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Props

Prop	Type	Default	Description
value	string	—	On `Select` — controlled selected value.
defaultValue	string	—	On `Select` — uncontrolled initial value.
onValueChange	(value: string) => void	—	Called when the selected value changes.
size	"sm" · "default"	"default"	On `SelectTrigger` — `h-7` or `h-8`.
position	"item-aligned" · "popper"	"item-aligned"	On `SelectContent` — popup positioning strategy.
align	"start" · "center" · "end"	"start"	On `SelectContent` — horizontal alignment.
disabled	boolean	false	Disable the select or an individual item.