Skip to content

Select / Multiselect

Components
3.5.12

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

Select

import Select from '@semcore/ui/select';
<Select />;
interface
ISelectProps extends IDropdownMenuProps, IBaseTriggerProps
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

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 />;
interface
ISelectOptionProps extends IDropdownMenuItemProps
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 />;
interface
ISelectOptionCheckboxProps extends ISelectOptionProps
PropertyDescription
theme
string

Checkbox theme

Select.Option.Checkbox

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

Styled Box.