Select
Dropdown acessível construído com Radix UI. Suporta erro e estado desabilitado.
Demonstração
Por favor, selecione uma fruta.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
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 |
Uso
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}
/>