Select / Multiselect
Components4.12.2
Select
is a wrap overDropdownMenu
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 | 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 />;
type
SelectOptionProps
DropdownMenuItemProps & {...}
Property | Description |
---|---|
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 />;
Select.Option.Checkbox
import Select from '@semcore/ui/select';
<Select.Option.Checkbox />;
Styled Box.