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

Adornments

Render content before or after the input with the start and end props:


<Select start={<SearchIcon />} placeholder="Search a country..." options={options} />

Theme Customization

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

root{}(2 keys)

The SelectInputTheme was restructured in 10.0.0:


interface SelectInputTheme {
  base: string;
  inputContainer: string;
  input: string;
  placeholder: string;
  selectedValue: string;       // was `prefix`
  actions: {                   // was `suffix`
    container: string;
    button: string;
    refresh: string;
    close: string;
    expand: string;
    loader: string;
  };
  adornment: {                 // new
    start: string;
    end: string;
  };
  disabled: string;
  unfilterable: string;
  error: string;
  single: {
    selectedValue: string;     // was `prefix`
    inputContainer: string;
    input: string;
  };
  multiple: {
    selectedValue: string;     // was `prefix`
    inputContainer: string;
  };
  open: string;
  chip: { /* ... */ };
}

The inputPrefix prop was also removed from SelectOption.

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

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

SelectOption

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

SelectMenu

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

SelectInput

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

SelectInputChip

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

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.