Select / Multiselect

Components

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

Select

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

type

SelectProps

DropdownMenuProps & BaseTriggerProps & {...}

Property	Description
multiselect `boolean`	Multiple select
options `SelectOption[]`	Options array
defaultValue `SelectValue`	The value or values array selected by default when using multiselect
value `SelectValue`	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.

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

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

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

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

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

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

type

SelectOptionProps

DropdownMenuItemProps & {...}

Property	Description
value* `string \| number`	Value of the option

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

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

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

type

SelectOptionCheckboxProps

SelectOptionProps & {...}

Property	Description
theme `string`	Checkbox theme

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

Styled Box.