Select

import { Select } from '@enmovil/ui-design-system';

A dropdown for choosing one or several options, with search, a clear button and a loading state. In multiple mode, selected values that don't fit collapse into a single tag that lists them in a tooltip, and children renders as a label above the field.

Properties

Property	Type	Required	Default	Allowed values	Description
mode	string	No	—	'multiple', 'tags'	Set to multiple or tags to allow several values. Values that don't fit collapse into a "+ N more" tag whose tooltip lists the hidden labels.
style	CSSProperties	No	—	—	Inline styles of the select box, for example its width.
defaultValue	any	No	—	—	Value selected when the select first renders. An array in multiple or tags mode.
disabled	boolean	No	—	—	Disables the select so it cannot be opened or changed.
size	string	No	'middle'	'small', 'middle', 'large'	Height of the select: small, middle or large. Defaults to middle.
options	DefaultOptionType[]	No	—	—	Options listed in the dropdown, each with a label and a value.
showSearch	boolean	No	—	—	Lets the user type to filter the options.
placeholder	ReactNode	No	—	—	Text shown while nothing is selected.
loading	boolean	No	—	—	Shows a loading indicator in the select.
allowClear	boolean | { clearIcon?: RenderNode; }	No	—	—	Shows a clear icon that removes the current selection.
type	string	No	—	'text'	Has no effect. The component has no type option and passes it on unchanged.
isSelectMode	boolean	No	—	—	Toggle between input and select mode

Other attributes

Select passes 118 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onDropdownVisibleChange	((visible: boolean) => void)	Fires when the dropdown opens or closes. Useful to load options lazily on open.
onFocus	FocusEventHandler<HTMLElement>	Fires when the select receives focus.
onBlur	FocusEventHandler<HTMLElement>	Fires when the select loses focus.
onChange	((value: any, option?: DefaultOptionType | DefaultOptionType[]) => void)	Fires when the selected value changes.
onMouseEnter	MouseEventHandler<HTMLDivElement>	Fires when the pointer enters the select box.
onMouseLeave	MouseEventHandler<HTMLDivElement>	Fires when the pointer leaves the select box.
onSelect	SelectHandler<any, DefaultOptionType>	Fires when an option is picked, including re-picking the current one.
onSearch	((value: string) => void)	Fires as the user types in the search box. Requires showSearch.
onClear	(() => void)	Fires when the allowClear icon is clicked.
onPopupScroll	UIEventHandler<HTMLDivElement>	Fires when the dropdown list scrolls. Useful for loading more options at the bottom.
onDeselect	SelectHandler<any, DefaultOptionType>	Fires when an option is removed. multiple / tags mode only.
labelRender	((props: LabelInValueType) => ReactNode)	Custom render function for the label of the selected value, called with the option's label and value.

Children

Select does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default Select example.

Loading playground…

Storybook

Open Select in Storybook to try every story with the full set of controls.