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';

Basic

Banana

other sizes

Banana

Banana

Banana

Searchable

Banana

Creatable

Banana

disabled

Banana

With placeholder & clearable

どれ

Large items & custom menu

item #9527

Multiple

Banana

API

Property	Description	Type	Default
id	Id of select	string
name	Name of select	string
className	ClassName of select	string
width	Width of select	string | number	240
size	Select size	'sm' | 'md' | 'lg'	'md'
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
multiple	Support multiple selected options	boolean	false
searchable	Whether to enable search functionality	boolean	false
options	The options of select	Option[]	[]
value	Current selected option	Option | Option[]
defaultValue	Initial selected option	Option | Option[]
placeholder	Placeholder of select	string
menu	Render additional menu after options	ReactNode
itemSize	Size of menu option	number	36
optionsMaxHeight	Maximum height of the menu before scrolling	number	180
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