TIP

Select is a wrapper over DropdownMenu with additional selection features.

Select

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

SelectProps

& & {...} & ( {tag?: never; size?: ["size"] } | {})

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: ) => boolean | void) |	Callback on value change
placeholder		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

Select.Option.Text

An instance of Text with the appropriate styles depending on the Select size.

Plain text without addons placed directly in Select.Option is wrapped in Select.Option.Text automatically.

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

NSText.Props

& & ( {formatTags?: boolean; ellipsis?: never; ellipsisProps?: never; hint?: never; hintProps?: never } | ( {formatTags?: never } & & ))