Usage
import { MultiSelect } from '@kivora/react';
function Demo() {
const [frameworks, setFrameworks] = useState<string[]>([]);
return (
<MultiSelect
data={['React', 'Vue', 'Svelte', 'Solid']}
label="Frameworks"
value={frameworks}
onChange={setFrameworks}
placeholder="Pick frameworks"
/>
);
}
Props
data
MultiSelectOption[] | string[]
required
Options data. Can be an array of strings or objects with { value, label, disabled?, group? }.
Controlled selected values array.
Default selected values for uncontrolled mode.
onChange
(values: string[]) => void
Called when selection changes. Receives array of selected values.
Label text displayed above the select.
placeholder
string
default:"'Select…'"
Placeholder text shown when no options are selected.
Error message to display. When set, applies error styling.
Disables the select and prevents user interaction.
Enables search/filter functionality in the dropdown.
Shows a clear button to deselect all values.
Maximum number of values that can be selected.
size
'sm' | 'md' | 'lg'
default:"'md'"
Size variant affecting input height and chip sizing.
Additional CSS classes to apply to the select container.
HTML ID attribute. Auto-generated if not provided.
Type Definitions
interface MultiSelectOption {
value: string;
label: string;
disabled?: boolean;
group?: string;
}
Examples
Basic Multi-Select
<MultiSelect
data={['React', 'Vue', 'Svelte', 'Solid']}
label="Frameworks"
placeholder="Pick frameworks"
/>
Searchable Multi-Select
<MultiSelect
data={[
{ value: 'ts', label: 'TypeScript' },
{ value: 'js', label: 'JavaScript' },
{ value: 'py', label: 'Python' },
{ value: 'go', label: 'Go' },
{ value: 'rust', label: 'Rust' }
]}
label="Languages"
searchable
placeholder="Search languages..."
/>
With Max Values
<MultiSelect
data={skills}
label="Top 3 Skills"
maxValues={3}
value={selectedSkills}
onChange={setSelectedSkills}
/>
Clearable Multi-Select
<MultiSelect
data={tags}
label="Tags"
clearable
searchable
placeholder="Select tags"
/>
With Disabled Options
<MultiSelect
data={[
{ value: 'read', label: 'Read' },
{ value: 'write', label: 'Write' },
{ value: 'admin', label: 'Admin', disabled: true }
]}
label="Permissions"
/>
function SkillsForm() {
const [skills, setSkills] = useState<string[]>([]);
const allSkills = [
'React', 'Vue', 'Angular', 'Svelte',
'Node.js', 'Python', 'Go', 'Rust',
'TypeScript', 'GraphQL', 'REST'
];
return (
<MultiSelect
data={allSkills}
label="Your Skills"
value={skills}
onChange={setSkills}
searchable
clearable
maxValues={5}
error={skills.length === 0 ? 'Select at least one skill' : undefined}
placeholder="Search and select skills..."
/>
);
}
Different Sizes
<MultiSelect data={options} size="sm" />
<MultiSelect data={options} size="md" />
<MultiSelect data={options} size="lg" />
Notes
- Selected values display as removable chips/tags
- Click chip × button to remove individual selection
- Click container to open dropdown and add more values
- Dropdown closes when clicking outside
- Search functionality filters options by label
- When
maxValues is reached, selection is disabled
- Options show checkbox-style indicators
- Clear button removes all selections at once
- Uses
aria-multiselectable for accessibility
- Chip size adjusts based on
size prop