Nested Select
Create hierarchical and nested menus or navigation structures with Rothko UI's Nested Dropdown component. Organize complex content and submenus, providing a seamless and intuitive user experience for deep-level interactions.
Usage
import { NestedSelect } from '@rothko-ui/ui';
- Example
- Code
Select
Disabled
- Example
- Code
Select
Clearable
- Example
- Code
Select
Menu Position
- 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 ID for the select element |
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 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 | null) => void | Default | Description Event handler for value change |
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 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 NestedOption<V, T>[] | Default | Description Select options |
Name placeholder | Type string | Default Select | Description The placeholder text for the select |
Name renderOption | Type RenderNestedOption<V, T> | Default | Description Custom method for rendering option |
Name style | Type React.CSSProperties | Default | Description Custom styles for the select |
Name value | Type V | null | Default | Description Current value of select or value array if multiple |