Skip to content

Select / Multiselect

Components4.12.2

Select is a wrap over DropdownMenu with the addition of new selection features.

Select

import Select from '@semcore/ui/select';
<Select />;
typeSelectProps
DropdownMenuProps & BaseTriggerProps & {...}
PropertyDescription
multiselect
boolean

Multiple select

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: SelectValue, e: React.SyntheticEvent) => boolean | void) | React.Dispatch

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

Input name

locale
string
scrollToSelected
boolean = true

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

It is a wrap over the <DropdownMenu.Trigger/> component with default tag ButtonTrigger.

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

Select.Menu

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

Select.InputSearch

It is a wrap over the <Input.Value/>.

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

Select.Option

import Select from '@semcore/ui/select';
<Select.Option />;
typeSelectOptionProps
DropdownMenuItemProps & {...}
PropertyDescription
value*
string | number

Value of the option

Select.OptionHint

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

Select.OptionTitle

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

Select.OptionCheckbox

import Select from '@semcore/ui/select';
<Select.OptionCheckbox />;
typeSelectOptionCheckboxProps
SelectOptionProps & {...}
PropertyDescription
theme
string

Checkbox theme

Select.Option.Checkbox

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

Styled Box.