Developer 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.