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.
Usage
import { MultiSelet } from '@rothko-ui/ui';
- Example
- Code
Select
Clearable
- Example
- Code
Select
Disabled
- Example
- Code
Select
Menu Position
- Example
- Code
Select
Props
Name | Type | Default | Description |
---|---|---|---|
Name value | Type V | V[] | null | Default | Description Current value of dropdown or value array if multiple |
Name placeholder | Type string | Default 'Select' | Description Placeholder in input |
Name options | Type Option<V, T>[] | Default | Description Dropdown options |
Name onChange | Type (v: V | V[] | null) => void | Default | Description Event handler for value change |
Name onOpen | Type () => void | Default | Description OnOpen handler |
Name onBlur | Type (e: FocusEvent) => void | Default | Description OnBlur handler |
Name onFocus | Type (e: FocusEvent) => void | Default | Description OnFocus handler |
Name onDelete | Type (v: V) => void | Default | Description Callback triggered on deletion |
Name clearable | Type boolean | Default | Description Can you clear the selection |
Name disabled | Type boolean | Default | Description Is the dropdown disabled |
Name error | Type boolean | Default | Description Did an error occur. Alert user when true |
Name renderOption | Type RenderOption<V, T> | Default | Description Custom method for rendering option |
Name className | Type string | Default | Description Class names of outer wrapper |
Name label | Type string | Default | Description If the dropdown has a label |
Name menuPosition | Type 'top' | 'bottom' | 'auto' | Default 'bottom' | Description Open dropdown position |
Name bordered | Type boolean | Default
| Description Is this a minimal dropdown |
Name style | Type React.CSSProperties | Default | Description Adds a style to the component |