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

OptionTypeDefault
multiplebooleanfalse
valuestring[]
defaultValuestring[][]
onValueChange(values: string[]) => void
closeOnSelectbooleantrue (single) / false (multi)
Powered by grishaLR
© 2026 virtualized-ui. All rights reserved.