Select
A dropdown selection component with optional search, labels, and error states.
Basic
A simple select with cuisine options.
Searchable
A select with search filtering for long option lists.
With Label
Select with a label and placeholder text.
Interactive
Controlled select that displays the selected value.
Selected: none
| Prop | Type | Default | Description |
|---|---|---|---|
options | Array<{ value: string; label: string; disabled?: boolean }> | — | Array of options to display in the dropdown. |
value | string | — | The currently selected value (controlled). |
onChange | (value: string) => void | — | Callback fired when the selection changes. |
label | string | — | Label text displayed above the select. |
placeholder | string | — | Placeholder text when no value is selected. |
searchable | boolean | false | Enables a search input to filter options. |
disabled | boolean | false | Disables the select component. |
error | string | — | Error message displayed below the select. |