Select

The Select component enhances user interaction by allowing the selection of a value or multiple values from a list of options. It's designed with flexibility in mind, supporting a wide range of features such as:

Single Select
Multi Select
Flexible customization of the components
Tagging / Creation of options
Filtering with Fuzzy Search via fuse.js (opens in a new tab)
Highlighting of selected options
Async Support
Groups Support
Animation

Examples

Basic Usage

Single Select

A straightforward implementation for choosing a single option from a dropdown list:

Custom Label

Create value if not available

Values with sections

State: Error

State: Full Width

Async

Remote Fetch on Load

Async Filtering

Multi-Select

Allows users to select multiple options, ideal for filtering mechanisms or gathering multiple interests/preferences.

Theme Customization

The Select component adheres to a comprehensive theme, ensuring it seamlessly integrates into any application's design:

root{}(2 keys)

Learn more about how to customize in the Theme documentation.

API

Configure the Select component to suit your application's needs with these properties:

Select

Prop	Description	Default
`id`	The id of the select. `string`
`name`	The form name of the select. `string`
`style`	Additional CSS style attributes to apply to the select. `CSSProperties`
`className`	Additional class names to apply to the select. `string`
`containerClassName`	Additional class names to apply to the select container. `string`
`activeClassName`	Additional class names to apply to the select when the menu is open `string`
`disabled`	Set the select to disabled state. `boolean`
`autoFocus`	Auto focus the select on render. `boolean`
`closeOnSelect`	Close the select after you select an option. `boolean`	`true`
`value`	The value of the select. `string \| string[]`
`defaultFilterValue`	The deafult value of the input filter. `string`
`required`	Whether the select is required or not. `boolean`
`multiple`	Whether the select is multi or single select. `boolean`
`placeholder`	Default placeholder text. `string`
`filterable`	Whether you can filter the select options. `boolean \| "async"`	`true`
`clearable`	Whether you can clear the select after selection. `boolean`	`true`
`tabToSelect`	Whether you can use the Tab key to select the current active option. `boolean`
`loading`	Whether the select is in loading state or not. `boolean`
`refreshable`	Whether you can refresh the async values or not. `boolean`	`false`
`createable`	Whether you can create new options or not. `boolean`
`selectOnPaste`	Select options when paste text inside input. `boolean`
`selectOnKeys`	The list of KeyCodes for creating select values. The default is ['Enter'] Typical options would be: ['Enter', 'Tab', 'Space', 'Comma'] `string[]`	`['Enter']`
`children`	The options of the select. `any`
`error`	Whether the select has an error state or not. `boolean`
`menuPlacement`	The placement options for the menu. `Placement`	`bottom-start`
`menuDisabled`	Whether the menu is disabled or not. `boolean`	`false`
`size`	The size of the select. `string`	`medium`
`onInputKeydown`	When the input receives a key down event. `(event: KeyboardEvent<HTMLInputElement>) => void`
`onInputKeyUp`	When the input receives a key up event. `(event: KeyboardEvent<HTMLInputElement>) => void`
`onFocus`	When the select was focused. `(event: FocusEvent<HTMLInputElement, Element> \| MouseEvent<HTMLDivElement, MouseEvent>) => void`
`onBlur`	When the select was blurred. `(event: FocusEvent<HTMLInputElement, Element>) => void`
`onInputChange`	When the select input value changed. `(event: ChangeEvent<HTMLInputElement>) => void`
`onRefresh`	When the user manually refreshed the options. `() => void`
`onChange`	When the value changes. `(value: any) => void`
`onOptionsChange`	When a new option is added or removed. `(options: SelectOptionProps[]) => void`
`input`	Input override component. `ReactElement<SelectInputProps, FC<SelectInputProps>>`	`<SelectInput />`
`menu`	Menu component override. `ReactElement<SelectMenuProps, FC<SelectMenuProps>>`	`<SelectMenu />`
`searchOptions`	The options for the Fuse.js search algorithm. `IFuseOptions<SelectOptionProps>`
`onOpenMenu`	When menu is opened `() => void`
`onCloseMenu`	When menu is closed `() => void`

SelectOption

Prop	Description	Default
`value` *	Value of the option. Usually a string value. `any`
`children`	Default label of the option. `ReactNode`
`inputLabel`	Custom input label. `ReactNode`
`group`	Optional group for the option. `string`
`menuLabel`	Optional menu label. `ReactNode`
`inputPrefix`	Optional input prefix. `ReactNode`
`selected`	Whether the option is selected. `boolean`
`disabled`	Whether the option is disabled. `boolean`

SelectMenu

Prop	Description	Default
`id`	The id of the select. `string`
`options`	Options passed to the select. `SelectOptionProps[]`
`selectedOption`	The selected option(s). `SelectOptionProps \| SelectOptionProps[]`
`style`	Additional CSS styles to apply to the select menu. `CSSProperties`
`disabled`	Whether the menu is disabled or not. `boolean`
`groups`	The groups of options. `GroupOptions`
`createable`	Whether users can create options or not. `boolean`
`className`	Additional class names to apply to the select menu. `string`
`multiple`	Whether the menu can select multiples or not. `boolean`
`index`	Internal active index of the keyboard position. `number`
`inputSearchText`	The input's search text to use for highlighting. `string`
`filterable`	Whether users can filter the options or not. `boolean \| "async"`
`loading`	Whether the component is loading or not. `boolean`
`size`	The size of the select menu. `string`
`checkIcon`	Icon displayed for checked elements of the list `any`
`onSelectedChange`	Event fired when the selected option(s) change. `(option: SelectValue) => void`
`theme`	The theme for the Select. `SelectTheme`

SelectInput

Prop	Description	Default
`id`	The id of the select input. `string`
`name`	The name of the select input. `string`
`required`	If true, the select input is required. `boolean`
`options`	The options for the select input. `SelectOptionProps[]`
`disabled`	If true, the select input is disabled. `boolean`
`menuOpen`	If true, the select input menu is open. `boolean`
`inputText`	The input text of the select input. `string`
`closeOnSelect`	If true, the select input will close on select. `boolean`
`selectedOption`	The selected option of the select input. `SelectOptionProps \| SelectOptionProps[]`
`autoFocus`	If true, the select input will auto focus. `boolean`
`className`	The class name of the select input. `string`
`activeClassName`	The active class name of the select input. `string`
`createable`	If true, the select input is createable. `boolean`
`filterable`	If true, the select input is filterable. `boolean \| "async"`
`multiple`	If true, the select input allows multiple selection. `boolean`
`loading`	If true, the select input is loading. `boolean`
`reference`	The reference of the select input. `Ref<SelectInputRef>`
`placeholder`	The placeholder of the select input. `string`
`error`	If true, the select input has an error. `boolean`
`clearable`	If true, the select input is clearable. `boolean`
`refreshable`	If true, the select input is refreshable. `boolean`
`menuDisabled`	If true, the select input menu is disabled. `boolean`
`size`	The size of the select input. `string`
`theme`	The theme of the select input. `SelectTheme`
`closeIcon`	The close icon of the select input. `ReactNode`	`<CloseIcon />`
`refreshIcon`	The refresh icon of the select input. `ReactNode`	`<RefreshIcon />`
`expandIcon`	The expand icon of the select input. `ReactNode`	`<DownArrowIcon />`
`loadingIcon`	The loading icon of the select input. `ReactNode`	`<DotsLoader size="small" />`
`chip`	The chip of the select input. `ReactElement<SelectInputChipProps, FC<SelectInputChipProps>>`	`<SelectInputChip />`
`onSelectedChange`	The function to handle selected change. `(option: SelectValue) => void`
`onExpandClick`	The function to handle expand click. `(event: MouseEvent<Element, MouseEvent>) => void`
`onKeyDown`	The function to handle key down. `(event: KeyboardEvent<HTMLInputElement>) => void`
`onKeyUp`	The function to handle key up. `(event: KeyboardEvent<HTMLInputElement>) => void`
`onFocus`	The function to handle focus. `(event: FocusEvent<HTMLInputElement, Element> \| MouseEvent<HTMLDivElement, MouseEvent>) => void`
`onBlur`	The function to handle blur. `(event: FocusEvent<HTMLInputElement, Element>) => void`
`onInputChange`	The function to handle input change. `(event: ChangeEvent<HTMLInputElement>) => void`
`onPaste`	The function to handle input paste event. `(event: ClipboardEvent<HTMLInputElement>) => void`
`onRefresh`	The function to handle refresh. `() => void`

SelectInputChip

Prop	Description	Default
`option`	The option to render as a chip. `SelectOptionProps`
`maxLength`	The maximum length of the chip. `number`	`20`
`className`	Additional class names to apply to the chip. `string`
`disabled`	Whether the chip is disabled or not. `boolean`
`clearable`	Whether the chip is clearable or not. `boolean`
`theme`	Theme for the Select. `SelectTheme`
`closeIcon`	The close icon for the chip. `ReactNode`	`<CloseIcon />`
`onTagKeyDown`	Callback for when a key is pressed on the chip. `(event: KeyboardEvent<HTMLSpanElement>, option: SelectOptionProps) => void`
`onSelectedChange`	Callback for when the selected option changes. `(option: SelectOptionProps) => void`

Design and Usability Tips

Immediate Feedback: Provide visual cues for actions such as hovering, selection, and focusing, enhancing the user's interaction with the component.
Keyboard Navigation: Support full keyboard navigation including arrow keys for option selection and Esc to close the dropdown, ensuring accessibility.

Range Textarea