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.

View Source

Import

Global
Single

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

Usage

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 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 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.