Select

Displays a select input.

Props

Name	Type	Required	Default	Description
defaultValue	string	No	-
options	Array<{ label: string; value: string | number | undefined; }>	No	-	The options of the select (alternative to `children`)
children	React.ReactNode	No	-	The options of the select (alternative to `options`)

States

Default

Result

Loading...

Live Editor

<FormField
    id="select-state-default"
    labelText="Select Label"
>
    <Select defaultValue="2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </Select>
</FormField>

Error

Result

Loading...

Live Editor

<FormField
    id="select-state-error"
    labelText="Select Label"
    hasError
>
    <Select defaultValue="2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </Select>
</FormField>

Disabled

Result

Loading...

Live Editor

<FormField
    id="select-state-disabled"
    labelText="Select Label"
    disabled
>
    <Select defaultValue="2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </Select>
</FormField>

Examples

Standalone

Result

Loading...

Live Editor

<Select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</Select>

Standalone with options as props

Result

Loading...

Live Editor

<Select
    options={[{
        label: 'Option 1',
        value: 1
    }, {
        label: 'Option 2',
        value: 2
    }, {
        label: 'Option 3',
        value: 3
    }]}
/>

Icon on the left

Result

Loading...

Live Editor

<FormField
    id="input-example-icon-left"
    labelText="Select Label"
    iconLeft={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <Select defaultValue="2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </Select>
</FormField>