Selects

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

Default Select

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

Validation and Errors

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

Disabled Fields

<select class="form-select" aria-label="Default select example" disabled> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </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