Select

Select component to select value from options.

When To Use

• A dropdown menu for displaying choices - an elegant alternative to the native <select> element.
• Utilizing Radio is recommended when there are fewer total options (less than 5).

Examples

import { Select } from 'tailor-ui/lab';

Basic

Controlled

Uncontrolled

Searchable

Async Search

try to search react:

disabled

With placeholder & clearable

Virtual scroll

Creatable

Stack

Multiple Select

Banana

API

Property	Description	Type	Default
id	Id of select	string
name	Name of select	string
width	Width of select	string | number	240
creatable	Create new option with input text if true	boolean	false
clearable	Show clear button.	boolean	false
disabled	Whether disabled select	boolean	false
loading	Is the select in a state of loading	boolean	false
searchable	Whether to enable search functionality	boolean	false
options	The options of select	Option[]	[]
value	Current selected option	Option
defaultValue	Initial selected option	Option
placeholder	Placeholder of select	string
onChange	Called when select an option or input value change	(option: Option \| Option[]) => void
onBlur	Called when blur	(event: FocusEvent) => void
noOptionsMessage	Text to display when there are no options	() => ReactNode
formatCreateLabel	Gets the label for the "create new option ..." option in the menu. Is given the current input value.	(labelInfo: { value: string; active: boolean; hovered: boolean }) => ReactNode	value => Create new option: ${value}
isValidNewOption	Determines whether the "create new option ..." option should be displayed based on the current input value, select value and options array.	(value: string) => boolean	value => value.trim() !== ''
onCreateOption	If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created	(value: string) => void