Select Menus

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

Select an optionText field with helper text

Variations

Basic Select

Copy as:HTMLReact

Base size:

Select an option

copydone

Select an optionText field with helper text

copydone

Select an optionText field with helper text

copydone

Large size:

Select an option

copydone

Select an optionText field with helper text

copydone

Select an optionText field with helper text

copydone

<!-- Component: Plain base basic select -->
<div class="relative my-6 md:w-60">
  <select id="id-01" name="id-01" required class="relative w-full h-10 px-4 text-sm transition-all bg-white border-b outline-none appearance-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white focus:border-emerald-500 focus:focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400">
    <option value="" disabled selected></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

  <label for="id-01" class="pointer-events-none absolute top-2.5 left-2 z-[1] px-2 text-sm text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-valid:-top-2 peer-valid:text-xs peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Select an option
  </label>
  <svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute top-2.5 right-2 h-5 w-5 fill-slate-400 transition-all peer-focus:fill-emerald-500 peer-disabled:cursor-not-allowed" viewBox="0 0 20 20" fill="currentColor" aria-labelledby="title-01 description-01" role="graphics-symbol">
    <title id="title-01">Arrow Icon</title>
    <desc id="description-01">Arrow icon of the select list.</desc>
    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
  </svg>
</div>
<!-- End Plain base basic select -->

Outlined Select

Copy as:HTMLReact

Base size:

Select an option

copydone

Select an optionText field with helper text

copydone

Select an optionText field with helper text

copydone

Large size:

Select an option

copydone

Select an optionText field with helper text

copydone

Select an optionText field with helper text

copydone

<!-- Component: Rounded base basic select -->
<div class="relative my-6 md:w-60">
  <select id="id-04" name="id-04" required class="relative w-full h-10 px-4 text-sm transition-all bg-white border rounded outline-none appearance-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white focus:border-emerald-500 focus:focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400">
    <option value="" disabled selected></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label for="id-04" class="pointer-events-none absolute top-2.5 left-2 z-[1] px-2 text-sm text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-valid:-top-2 peer-valid:text-xs peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Select an option
  </label>
  <svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute top-2.5 right-2 h-5 w-5 fill-slate-400 transition-all peer-focus:fill-emerald-500 peer-disabled:cursor-not-allowed" viewBox="0 0 20 20" fill="currentColor" aria-labelledby="title-04 description-04" role="graphics-symbol">
    <title id="title-04">Arrow Icon</title>
    <desc id="description-04">Arrow icon of the select list.</desc>
    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
  </svg>
</div>
<!-- End Rounded base basic select -->

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.

Select Menus

Variations

Basic Select

Base size:

Large size:

Outlined Select

Base size:

Large size:

Usage

Specs

Accessibility notes

Check out the latest release!