Select
Provide users with a versatile and compact selection interface using Rothko UI's Dropdown component. Display a list of options in a dropdown menu, allowing users to choose from a predefined set of values with ease.
Usage
import { Select } from '@rothko-ui/ui';
- Example
- Code
Select
Clearable
- Example
- Code
Select
Menu Variant
- Example
- Code
Select
Render Option
- Example
- Code
Select
Disabled
- Example
- Code
Select
Props
Name | Type | Default | Description |
---|---|---|---|
Name className | Type string | Default | Description Additional class name for the select. |
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 id | Type string | Default | Description Unique identifier for the select. |
Name label | Type string | Default | Description The label for the select. |
Name menuVariant | Type MenuVariant | Default bottom | Description The position of the select menu. |
Name multiple | Type boolean | Default | Description Whether the select allows multiple selections. |
Name noResultsMessage | Type React.ReactNode | Default No results | Description The message to display when there are no search results. |
Name onBlur | Type FocusHandler | Default | Description Event handler for when the select loses focus. |
Name onChange | Type (v: 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 Event handler for when an option is deleted in multiple selection mode. |
Name onFocus | Type FocusHandler | 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 React.CSSProperties | Default | Description Custom styles for the select. |
Name value | Type V | V[] | null | Default | Description The value(s) of the select. |