Examples

Select

A Tailwind CSS select component for choosing from a list of options.

<div class="w-full max-w-xs">
  <select class="select">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
  </select>
</div>

With label

Pair with a Label and wrap in a Field for accessible form fields. Connect them using matching for and id attributes so clicking the label focuses the select and screen readers announce it correctly.

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="country">Country</label>
    <select class="select" id="country" name="country">
      <option value="">Select a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
      <option value="au">Australia</option>
    </select>
  </div>
</div>

Disabled

Add disabled to prevent interaction. The select appears faded automatically.

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="disabled-country">Country</label>
    <select class="select" id="disabled-country" name="country" disabled="">
      <option value="">Select a country</option>
      <option value="us">United States</option>
    </select>
  </div>
</div>

Validation

Add aria-invalid="true" to show the select in an error state. Connect an error message using aria-describedby on the select, pointing to the id of the error element. This lets screen readers announce the error when the select is focused.

Please select a country 

<div class="w-full max-w-xs">
  <div class="field">
    <label class="label" for="validation-country">Country</label>
    <select
      class="select"
      id="validation-country"
      name="country"
      aria-invalid="true"
      aria-describedby="country-error"
    >
      <option value="">Select a country</option>
      <option value="us">United States</option>
    </select>
    <p class="field-error" id="country-error">
      Please select a country
    </p>
  </div>
</div>

With avatars

Combine selects with avatars to assign roles or permissions per user.

People with access
Sarah Johnson

Sarah Johnson

[email protected]

Michael Chen

Michael Chen

[email protected]

Emma Wilson

Emma Wilson

[email protected]

<div class="w-full max-w-md">
  <div class="grid gap-5">
    <span class="label">People with access</span>
    <div class="grid gap-5">
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
            alt="Sarah Johnson"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Sarah Johnson</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22" name="sarah-johnson">
          <option value="write" selected="">Write</option>
          <option value="read">Read</option>
        </select>
      </div>
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/7bd8889a.webp"
            alt="Michael Chen"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Michael Chen</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22" name="michael-chen">
          <option value="write">Write</option>
          <option value="read" selected="">Read</option>
        </select>
      </div>
      <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <img
            class="avatar"
            src="https://cdn.gufo.dev/stockphotos/a8a338c1.webp"
            alt="Emma Wilson"
          />
          <div class="text-sm">
            <p class="font-semibold text-foreground">Emma Wilson</p>
            <p class="text-muted-foreground">[email protected]</p>
          </div>
        </div>
        <select class="select h-8 w-22" name="emma-wilson">
          <option value="write">Write</option>
          <option value="read" selected="">Read</option>
        </select>
      </div>
    </div>
  </div>
</div>

How it works

The select component is a CSS-only utility class applied to a native <select> element.

Structure

Use the .select class on a <select> element. Pair it with a .label element connected via for and id:

<label class="label" for="country">Country</label>
<select class="select" id="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
</select>

Disabled state

Add disabled to the select:

<select class="select" disabled>
  <option>Disabled</option>
</select>

Validation

Add aria-invalid="true" to show the select in an error state:

<select class="select" aria-invalid="true">
  <option value="">Select an option</option>
</select>

Class reference

ClassDescription
selectBase select styles