TIP
Select
is a wrap over DropdownMenu
with the addition of new selection features.
Select
jsx
import Select from '@semcore/ui/select';
<Select />;
import Select from '@semcore/ui/select';
<Select />;
SelectProps
& & {...}Name | Type | 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: , 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 | 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.
jsx
import Select from '@semcore/ui/select';
<Select.Trigger />;
import Select from '@semcore/ui/select';
<Select.Trigger />;
Select.Menu
jsx
import Select from '@semcore/ui/select';
<Select.Menu />;
import Select from '@semcore/ui/select';
<Select.Menu />;
Select.InputSearch
It is a wrap over the <Input.Value/>
.
jsx
import { InputSearch } from '@semcore/ui/select';
<InputSearch />;
import { InputSearch } from '@semcore/ui/select';
<InputSearch />;
Select.Option
jsx
import Select from '@semcore/ui/select';
<Select.Option />;
import Select from '@semcore/ui/select';
<Select.Option />;
SelectOptionProps
& {...}Name | Type | Description |
---|---|---|
value | string | number | Value of the option |
Select.OptionHint
jsx
import Select from '@semcore/ui/select';
<Select.OptionHint />;
import Select from '@semcore/ui/select';
<Select.OptionHint />;
Select.OptionTitle
jsx
import Select from '@semcore/ui/select';
<Select.OptionTitle />;
import Select from '@semcore/ui/select';
<Select.OptionTitle />;
Select.OptionCheckbox
jsx
import Select from '@semcore/ui/select';
<Select.OptionCheckbox />;
import Select from '@semcore/ui/select';
<Select.OptionCheckbox />;
SelectOptionCheckboxProps
& {...}Name | Type | Description |
---|---|---|
theme | string | Checkbox theme |
Select.Option.Checkbox
jsx
import Select from '@semcore/ui/select';
<Select.Option.Checkbox />;
import Select from '@semcore/ui/select';
<Select.Option.Checkbox />;
Styled Box
.