Select

Use Select when you have a group of mutually choices and only one selection from the group is allowed. It has input and label. It can be disabled or have an error state. The label can be hidden.

Examples

examples

import { Select } from "@seduo/design-system";
...
<Select id="selectDefault" label="Label" name="selectDefault">
    <option value="" selected>
        Placeholder
    </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</Select>
<Select
    id="selectAdvanced"
    name="selectAdvanced"
    label="Label"
    validationState="danger"
    validationText="validation failed"
    isRequired
>
    <option value="" selected disabled>
        Placeholder
    </option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</Select>

<Grid cols="2" desktop="3">
    <Select id="selectDefault" label="Label" name="selectDefault">
        <option value="" selected>
            Placeholder
        </option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </Select>
    <Select
            id="selectAdvanced"
            name="selectAdvanced"
            label="Label"
            validationState="danger"
            validationText="validation failed"
            isRequired
    >
        <option value="" selected disabled>
            Placeholder
        </option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </Select>
</Grid>

API

Prop name	Type	Default	Required	Description
`helperText`	`string`	-	no	Custom helper text
`children`	`ReactNode`	`null`	no	Content of the Select
`id`	`string`	-	yes	Select and label identification
`isDisabled`	`bool`	-	no	Whether is field disabled
`isFluid`	`bool`	-	no	Whether is field is fluid
`isLabelHidden`	`bool`	-	no	Whether is label hidden
`isRequired`	`bool`	-	no	Whether is field required
`label`	`string`	-	no	Label text
`name`	`string`	-	no	Select name
`ref`	`ForwardedRef<HTMLSelectElement>`	-	no	Select element reference
`validationState`	[Validation dictionary][dictionary-validation]	-	no	Type of validation state
`validationText`	`string`, `string[]`	-	no	Validation text

Icons Provider

To display the icons correctly, the component needs to be wrapped with IconsProvider.

import { IconsProvider, Select } from '@seduo/design-system';

<IconsProvider>
  <Select />
</IconsProvider>;

On this page