Combobox
Search a list of options and select a value.
Preview
Import
import { Combobox } from "@sigil-ui/components";Usage
<Combobox placeholder="Select framework..." options={[{ value: "next", label: "Next.js" }, { value: "remix", label: "Remix" }, { value: "astro", label: "Astro" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
options (required) | ComboboxOption[] | — | Options configuration. |
value | string | — | The current controlled value. |
defaultValue | string | — | Initial value when the component manages its own state. |
onValueChange | (value: string) => void | — | Called when the user changes the value. |
placeholder | string | — | Hint shown before a value is entered. |
searchPlaceholder | string | — | Search Placeholder configuration. |
emptyText | string | — | Empty Text configuration. |
className | string | — | Additional classes merged with the component styles. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border-style | Border style |
--s-background | Background |
--s-border | Border |
--s-duration-fast | Duration fast |
--s-ring | Ring |
--s-primary | Primary |
--s-text-muted | Text muted |
--s-surface | Surface |
--s-shadow-md | Shadow md |
--s-radius-sm | Radius sm |
--s-text | Text |