Select
Accessible dropdown built on Radix UI. Supports error and disabled states.
Live Demo
Please select a fruit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | SelectOption[] | — | componentPages.select_prop_options |
label | string | — | componentPages.select_prop_label |
placeholder | string | 'Select an option' | componentPages.select_prop_placeholder |
value | string | — | componentPages.select_prop_value |
defaultValue | string | — | componentPages.select_prop_defaultValue |
onValueChange | (value: string) => void | — | componentPages.select_prop_onValueChange |
error | string | — | componentPages.select_prop_error |
helperText | string | — | componentPages.select_prop_helperText |
size | 'sm' | 'md' | 'lg' | 'md' | componentPages.select_prop_size |
disabled | boolean | false | componentPages.select_prop_disabled |
Usage
import { Select } from '@ghiberti85/ui'
const options = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
]
// Basic
<Select label="Fruit" options={options} placeholder="Pick a fruit" />
// With error
<Select label="Fruit" options={options} error="Please select a fruit" />
// Sizes
<Select label="Fruit" options={options} size="sm" />
<Select label="Fruit" options={options} size="lg" />
// Disabled
<Select label="Fruit" options={options} disabled />
// Controlled
<Select
label="Fruit"
options={options}
value={value}
onValueChange={setValue}
/>