Single select

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Allow clearing the selected option

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	clearable
/>

Disable search

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	noSearch
/>

Simple value

By default, values are objects with value and label properties (and optionally metadata). If you want to use a simple string value, use the simpleValue prop.

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	simpleValue
/>