TIP

Select is a wrapper over DropdownMenu with additional selection features.

Select

import Select from '@semcore/ui/select';
<Select />;

SelectProps

& & {...}

Name	Type	Description
options	[]	Options array
defaultValue		The value or values array selected by default when using multiselect
value		The selected value or values array when using multiselect
onChange	((value: , e: React.SyntheticEvent) => boolean | void) | React.Dispatch<React.SetStateAction<>>	Callback on value change
placeholder	React.ReactNode	Trigger placeholder at not selected value
state	"normal" | "valid" | "invalid"	Trigger state
disabled	boolean	Disables select
name	string	If provided, adds a hidden <input /> tag with the given name for enhancing accessibility.
locale	string	Specifies the locale for i18n support
scrollToSelected	boolean	If enabled, after opening select popper view will be scrolled to selected option or, if there are multiple selected options, to the first selected option.

Select.Trigger

A wrapper over DropdownMenu.Trigger with ButtonTrigger as the default tag.

import Select from '@semcore/ui/select';
<Select.Trigger />;

Select.Menu

A wrapper over Select.Popper and Select.List, with all props passed to Select.List.

import Select from '@semcore/ui/select';
<Select.Menu />;

Select.Popper

A wrapper over DropdownMenu.Popper.

import Select from '@semcore/ui/select';
<Select.Popper />;

Select.List

A wrapper over DropdownMenu.List.

import Select from '@semcore/ui/select';
<Select.List />;

Select.InputSearch

A wrapper over Input with a Search icon and a Clear button as default addons.

import { InputSearch } from '@semcore/ui/select';
<InputSearch />;

Select.Group

A wrapper over Dropdown.Group.

import Select from '@semcore/ui/select';
<Select.Group />;

Select.Option

A wrapper over DropdownMenu.Item with additional props.

import Select from '@semcore/ui/select';
<Select.Option />;

SelectOptionProps

& {...}

Name	Type	Description
selected	boolean	Enables selected state
value	string | number	Value of the option

Select.Option.Hint

Styled Flex.

import Select from '@semcore/ui/select';
<Select.Option.Hint />;

Select.Option.Checkbox

A styled Box that looks like a checkbox.

import Select from '@semcore/ui/select';
<Select.Option.Checkbox />;

SelectOptionCheckboxProps

& {...}

Name	Type	Description
theme	string	Checkbox theme
indeterminate	boolean	Visual indeterminate state
selected	boolean	Controls the selected state

Deprecated

Select.OptionHint

WARNING

The Select.OptionHint is deprecated, use Select.Option.Hint or Select.Group with subTitle prop instead.

import Select from '@semcore/ui/select';
<Select.OptionHint />;

Select.OptionTitle

WARNING

The Select.OptionTitle is deprecated, use Select.Group with title prop instead.

import Select from '@semcore/ui/select';
<Select.OptionTitle />;