Swarm Design System Documentation

Select

A wrapper for an html <select> element with an optional <label> tag and helper text.

Snippet

Use this interactive snippet to try the component:

<div style={{width: 200}}>
    <FieldLabel htmlFor="swarm-select" >Swarm Select</FieldLabel>
    <Select
        value="A"
        id="swarm-select"
        name="swarm-select"
        onChange={(e) => alert(e.target.value)}
    >
        <option value="A">
            A
        </option>
        <option value="B">
            B
        </option>
        <option value="C">
            C
        </option>
        <option value="D">
            D
        </option>
    </Select>
</div>

Swarm Select

Props

Name	Type	Required?	Default	Description
disabled	boolean	optional	none	Whether the select menu is disabled.
error	string	optional	none	Whether the select menu has errored.
id	string	optional	none	Unique identifier for select tag.
name	string	required	none	Name of select menu form field.
requiredText	string	optional	none	Copy to be used for a required select field.

a11y

The following keyboard interactions are used to control the select component. You can also filter by typing letters, but this behavior varies by browser. Some will filter as you type, like autocomplete. Others will only sort by first letter. E.g., in a list of US States, hitting A then R may take you to Arizona, or it may take you to Alabama and then Rhode Island.

Keyboard interactions:

↑/↓ ... navigate between menu options
Spacebar ... expand

See: https://webaim.org/techniques/keyboard/

Examples

Default Select

Disabled Select

Select with error

Select Field

Line of helper text to describe the input.