Multi-Select
Select multiple values with tag-style display and individual remove buttons.
Multiple Values
0 of 10,000 selected · Multi-select
Enable multi-select mode:
const select = useVirtualSelect({
options: skills,
getOptionValue: (s) => s.id,
getOptionLabel: (s) => s.name,
multiple: true,
closeOnSelect: false,
});
// Selected values
select.selectedValues; // ['react', 'typescript']
select.selectedOptions; // [{ id: 'react', ... }, ...]
// Actions
select.toggleValue('react');
select.deselectValue('react');
select.clearAll();Controlled multi-select:
const [values, setValues] = useState<string[]>([]);
useVirtualSelect({
multiple: true,
value: values,
onValueChange: setValues,
});Options
| Option | Type | Default |
|---|---|---|
multiple | boolean | false |
value | string[] | — |
defaultValue | string[] | [] |
onValueChange | (values: string[]) => void | — |
closeOnSelect | boolean | true (single) / false (multi) |