Multi Select

Enable users to make multiple selections from a list of options effortlessly with rothko ui's Multi Dropdown component. Streamline the selection process in forms, filters, and other scenarios where multiple choices are required.

View Source

Import

Global
Single

import { MultiSelect } from '@rothko-ui/react';

Usage

Example
Code

Select

Clearable

Example
Code

Select

Disabled

Example
Code

Select

Menu Position

Example
Code

Select

Props

Name	Type	Default	Description
Name className	Type `string`	Default	Description CSS class name(s).
Name classNames	Type `Object<StyledComponents, string>`	Default	Description Additional class names for the select components
Name clearable	Type `boolean`	Default	Description Whether the select is clearable.
Name disabled	Type `boolean`	Default	Description Whether the select is disabled.
Name error	Type `boolean`	Default	Description Whether the select has an error state.
Name errorText	Type `string`	Default `Invalid`	Description The error message to display when the select has an error state.
Name label	Type `string`	Default	Description The label for the select.
Name menuVariant	Type `'top' \| 'bottom'`	Default `'bottom'`	Description The position of the select menu.
Name noResultsMessage	Type `ReactNode`	Default `"No results"`	Description The message to display when there are no search results.
Name onBlur	Type `(e: FocusEvent) => void`	Default	Description Event handler for when the select loses focus.
Name onChange	Type `(v: V[] \| null) => void`	Default	Description Event handler for when the select value changes.
Name onClear	Type `() => void`	Default	Description Event handler for when the select is cleared.
Name onClose	Type `() => void`	Default	Description Event handler for when the select is closed.
Name onDelete	Type `(v: V) => void`	Default	Description Callback triggered on deletion
Name onFocus	Type `(e: FocusEvent) => void`	Default	Description Event handler for when the select gains focus.
Name onOpen	Type `() => void`	Default	Description Event handler for when the select is opened.
Name options	Type `Option<V, T>[]`	Default	Description The options for the select.
Name placeholder	Type `string`	Default `"Select"`	Description The placeholder text for the select.
Name renderOption	Type `RenderOption<V, T>`	Default	Description Custom rendering function for select options.
Name style	Type `CSSProperties`	Default	Description Inline styles for the select.
Name styles	Type `Object<StyledComponents, CSSProperties>`	Default	Description Additional inline styles for the select components.
Name value	Type `V[] \| null`	Default	Description The value(s) of the select.