Usage
import { Select } from '@kivora/react';
function Demo() {
const [framework, setFramework] = useState<string | null>(null);
return (
<Select
data={['React', 'Vue', 'Solid', 'Svelte']}
value={framework}
onChange={setFramework}
placeholder="Pick framework"
/>
);
}
Props
data
SelectOption[] | string[]
required
Options data. Can be an array of strings or objects with { value, label, disabled?, group? }.
Controlled selected value.
defaultValue
string | null
default:"null"
Default selected value for uncontrolled mode.
onChange
(value: string | null) => void
Called when selection changes. Receives the selected value or null.
Label text displayed above the select.
placeholder
string
default:"'Select…'"
Placeholder text shown when no option is selected.
Error message to display. When set, applies error styling.
Disables the select and prevents user interaction.
Shows a clear button to deselect the current value.
Enables search/filter functionality in the dropdown.
size
'sm' | 'md' | 'lg'
default:"'md'"
Size variant matching Input component sizes.
Additional CSS classes to apply to the select container.
HTML ID attribute. Auto-generated if not provided.
Type Definitions
interface SelectOption<V extends string = string> {
value: V;
label: string;
disabled?: boolean;
group?: string;
}
Examples
Basic Select (String Array)
<Select
data={['React', 'Vue', 'Solid', 'Svelte']}
placeholder="Pick framework"
/>
With Objects
<Select
data={[
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'solid', label: 'Solid' }
]}
value={selected}
onChange={setSelected}
/>
Searchable Select
<Select
data={countries}
label="Country"
searchable
placeholder="Search country..."
/>
Clearable Select
<Select
data={options}
value={value}
onChange={setValue}
clearable
placeholder="Select option"
/>
With Disabled Options
<Select
data={[
{ value: 'free', label: 'Free' },
{ value: 'pro', label: 'Pro' },
{ value: 'enterprise', label: 'Enterprise', disabled: true }
]}
/>
Different Sizes
<Select data={options} size="sm" />
<Select data={options} size="md" />
<Select data={options} size="lg" />
With Error State
<Select
data={options}
value={value}
onChange={setValue}
error="Please select an option"
/>
function FormDemo() {
const [country, setCountry] = useState<string | null>(null);
return (
<Select
label="Country"
data={[
{ value: 'us', label: 'United States' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'ca', label: 'Canada' }
]}
value={country}
onChange={setCountry}
searchable
clearable
error={!country ? 'Country is required' : undefined}
/>
);
}
Notes
- Dropdown closes when clicking outside (useClickOutside)
- Search input auto-focuses when dropdown opens
- Chevron icon rotates based on open state
- Selected option shows checkmark icon
- Empty state displays “Nothing found” message
- Clear button only shows when
clearable={true} and value is selected
- Uses combobox ARIA role for accessibility
- Smooth open/close animations