Select
Choose an option from an accessible popover list.
Preview
Import
import { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem, SelectLabel, SelectSeparator } from "@sigil-ui/components";Usage
<Select>
<SelectTrigger className="w-48">
<SelectValue placeholder="Choose option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="a">Option A</SelectItem>
<SelectItem value="b">Option B</SelectItem>
</SelectContent>
</Select>Sub-components
This component includes the following parts:
<SelectGroup><SelectValue><SelectTrigger><SelectContent><SelectItem><SelectLabel><SelectSeparator>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-input-height | Input height |
--s-radius-input | Radius input |
--s-radius-md | Radius md |
--s-border-style | Border style |
--s-background | Background |
--s-duration-fast | Duration fast |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-error | Error |
--s-border | Border |
--s-primary | Primary |
--s-card-radius | Card radius |