Select Menus

The select component represents a control that provides a menu of options.

Arrow IconArrow icon of the select list.Text field with helper text

Variations

Basic Select

Base size:

Arrow IconArrow icon of the select list.
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone

Large size:

Arrow IconArrow icon of the select list.
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone

Outlined Select

Base size:

Arrow IconArrow icon of the select list.
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone

Large size:

Arrow IconArrow icon of the select list.
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone
Arrow IconArrow icon of the select list.Text field with helper text
copydone

Usage

Use the select component to create drop-down select menus so that users can select the value they want.

The select tag normally goes within a form element, with the items to choose from coded within another tag, <option>. It can also be a standalone element, which would still be associated with a form with one of its special attributes, form.

Specs

Selects are created using the native markup.

with additional tailwind classes applied. They come in two basic styles (base and rounded) and 2 sizes:

  • Base: select font size of 0.875rem (14px) height of 2.5rem (40px) and a label that scales from 0.875rem (14px) in font size, when the select is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.
  • Large: select font size of 1rem (16px) height of 3rem (48px) and a label that scales from 1rem (16px) in font size, when the select is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.

Accessibility notes

Since selects are built with the native <select> element no additional accessibility roles are required.

Check out the latest release!