Docs
πŸ—οΈ ⏐ Components
Form
Select

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

Advanced Customization

Multi-Select

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

CSS Classes

The select component exposes the following CSS class names for custom styling.

  • select-input
  • select-input-value
  • select-input-refresh
  • select-input-clear
  • select-input-toggle
  • select-input-chip
  • select-menu
  • select-menu-item
  • select-menu-create-option
  • select-menu-empty-search
  • select-menu-empty
  • select-menu-group
  • select-menu-group-header

Theme Customization

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

  • root{}(2 keys)
      Show all

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

PropDescriptionDefault
idThe id of the select.
string
nameThe form name of the select.
string
styleAdditional CSS style attributes to apply to the select.
CSSProperties
classNameAdditional class names to apply to the select.
string
activeClassNameAdditional class names to apply to the select when the menu is open
string
disabledSet the select to disabled state.
boolean
autoFocusAuto focus the select on render.
boolean
closeOnSelectClose the select after you select an option.
boolean
true
valueThe value of the select.
string | string[]
defaultFilterValueThe deafult value of the input filter.
string
requiredWhether the select is required or not.
boolean
multipleWhether the select is multi or single select.
boolean
placeholderDefault placeholder text.
string
filterableWhether you can filter the select options.
boolean
true
clearableWhether you can clear the select after selection.
boolean
true
tabToSelectWhether you can use the Tab key to select the current active option.
boolean
loadingWhether the select is in loading state or not.
boolean
refreshableWhether you can refresh the async values or not.
boolean
false
createableWhether you can create new options or not.
boolean
selectOnPasteSelect options when paste text inside input.
boolean
selectOnKeysThe list of KeyCodes for creating select values. The default is ['Enter'] Typical options would be: ['Enter', 'Tab', 'Space', 'Comma']
string[]
['Enter']
childrenThe options of the select.
any
errorWhether the select has an error state or not.
boolean
menuPlacementThe placement options for the menu.
Placement
bottom-start
menuDisabledWhether the menu is disabled or not.
boolean
false
sizeThe size of the select.
string
medium
onInputKeydownWhen the input receives a key down event.
(event: KeyboardEvent<HTMLInputElement>) => void
onInputKeyUpWhen the input receives a key up event.
(event: KeyboardEvent<HTMLInputElement>) => void
onFocusWhen the select was focused.
(event: FocusEvent<HTMLInputElement, Element> | MouseEvent<HTMLDivElement, MouseEvent>) => void
onBlurWhen the select was blurred.
(event: FocusEvent<HTMLInputElement, Element>) => void
onInputChangeWhen the select input value changed.
(event: ChangeEvent<HTMLInputElement>) => void
onRefreshWhen the user manually refreshed the options.
() => void
onChangeWhen the value changes.
(value: any) => void
onOptionsChangeWhen a new option is added or removed.
(options: SelectOptionProps[]) => void
inputInput override component.
ReactElement<SelectInputProps, FC<SelectInputProps>>
<SelectInput />
menuMenu component override.
ReactElement<SelectMenuProps, FC<SelectMenuProps>>
<SelectMenu />
searchOptionsThe options for the Fuse.js search algorithm.
IFuseOptions<SelectOptionProps>
onOpenMenuWhen menu is opened
() => void
onCloseMenuWhen menu is closed
() => void

SelectOption

PropDescriptionDefault
value *Value of the option. Usually a string value.
any
childrenDefault label of the option.
ReactNode
inputLabelCustom input label.
ReactNode
groupOptional group for the option.
string
menuLabelOptional menu label.
ReactNode
inputPrefixOptional input prefix.
ReactNode
selectedWhether the option is selected.
boolean
disabledWhether the option is disabled.
boolean

SelectMenu

PropDescriptionDefault
idThe id of the select.
string
optionsOptions passed to the select.
SelectOptionProps[]
selectedOptionThe selected option(s).
SelectOptionProps | SelectOptionProps[]
styleAdditional CSS styles to apply to the select menu.
CSSProperties
disabledWhether the menu is disabled or not.
boolean
groupsThe groups of options.
GroupOptions
createableWhether users can create options or not.
boolean
classNameAdditional class names to apply to the select menu.
string
multipleWhether the menu can select multiples or not.
boolean
indexInternal active index of the keyboard position.
number
inputSearchTextThe input's search text to use for highlighting.
string
filterableWhether users can filter the options or not.
boolean
loadingWhether the component is loading or not.
boolean
sizeThe size of the select menu.
string
checkIconIcon displayed for checked elements of the list
any
onSelectedChangeEvent fired when the selected option(s) change.
(option: SelectValue) => void
themeThe theme for the Select.
SelectTheme

SelectInput

PropDescriptionDefault
idThe id of the select input.
string
nameThe name of the select input.
string
requiredIf true, the select input is required.
boolean
optionsThe options for the select input.
SelectOptionProps[]
disabledIf true, the select input is disabled.
boolean
menuOpenIf true, the select input menu is open.
boolean
inputTextThe input text of the select input.
string
closeOnSelectIf true, the select input will close on select.
boolean
selectedOptionThe selected option of the select input.
SelectOptionProps | SelectOptionProps[]
autoFocusIf true, the select input will auto focus.
boolean
classNameThe class name of the select input.
string
activeClassNameThe active class name of the select input.
string
createableIf true, the select input is createable.
boolean
filterableIf true, the select input is filterable.
boolean
multipleIf true, the select input allows multiple selection.
boolean
loadingIf true, the select input is loading.
boolean
referenceThe reference of the select input.
Ref<SelectInputRef>
placeholderThe placeholder of the select input.
string
errorIf true, the select input has an error.
boolean
clearableIf true, the select input is clearable.
boolean
refreshableIf true, the select input is refreshable.
boolean
menuDisabledIf true, the select input menu is disabled.
boolean
sizeThe size of the select input.
string
themeThe theme of the select input.
SelectTheme
closeIconThe close icon of the select input.
ReactNode
<CloseIcon />
refreshIconThe refresh icon of the select input.
ReactNode
<RefreshIcon />
expandIconThe expand icon of the select input.
ReactNode
<DownArrowIcon />
loadingIconThe loading icon of the select input.
ReactNode
<DotsLoader size="small" />
chipThe chip of the select input.
ReactElement<SelectInputChipProps, FC<SelectInputChipProps>>
<SelectInputChip />
onSelectedChangeThe function to handle selected change.
(option: SelectValue) => void
onExpandClickThe function to handle expand click.
(event: MouseEvent<Element, MouseEvent>) => void
onKeyDownThe function to handle key down.
(event: KeyboardEvent<HTMLInputElement>) => void
onKeyUpThe function to handle key up.
(event: KeyboardEvent<HTMLInputElement>) => void
onFocusThe function to handle focus.
(event: FocusEvent<HTMLInputElement, Element> | MouseEvent<HTMLDivElement, MouseEvent>) => void
onBlurThe function to handle blur.
(event: FocusEvent<HTMLInputElement, Element>) => void
onInputChangeThe function to handle input change.
(event: ChangeEvent<HTMLInputElement>) => void
onPasteThe function to handle input paste event.
(event: ClipboardEvent<HTMLInputElement>) => void
onRefreshThe function to handle refresh.
() => void

SelectInputChip

PropDescriptionDefault
optionThe option to render as a chip.
SelectOptionProps
maxLengthThe maximum length of the chip.
number
20
classNameAdditional class names to apply to the chip.
string
disabledWhether the chip is disabled or not.
boolean
clearableWhether the chip is clearable or not.
boolean
themeTheme for the Select.
SelectTheme
closeIconThe close icon for the chip.
ReactNode
<CloseIcon />
onTagKeyDownCallback for when a key is pressed on the chip.
(event: KeyboardEvent<HTMLSpanElement>, option: SelectOptionProps) => void
onSelectedChangeCallback 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.