Selects

Selects create dropdowns for selecting a single entry from a list.

Default Select

The Default Select description from Figma goes here

1<select class="form-select" aria-label="Default select example"> 2 <option selected>Open this select menu</option> 3 <option value="1">One</option> 4 <option value="2">Two</option> 5 <option value="3">Three</option> 6</select>

Validation and Errors

The Error Select description from Figma goes here

1<select class="form-select is-invalid" aria-label="Default select example"> 2 <option selected>Open this select menu</option> 3 <option value="1">One</option> 4 <option value="2">Two</option> 5 <option value="3">Three</option> 6</select>

Disabled Fields

The Disabled Select description from Figma goes here

1<select class="form-select" aria-label="Default select example" disabled> 2 <option selected>Open this select menu</option> 3 <option value="1">One</option> 4 <option value="2">Two</option> 5 <option value="3">Three</option> 6</select>

Accessibility

Make it clear what this select widget does for the user.

DO

  • What to do with select

DON'T

  • What not to do with select