---
title: Select (Vanilla) - USWDS + Tailwind
description: Let people choose one option from a menu with a select control. See
  default and disabled examples.
---

# Select

Let people choose one option from a menu with a select control. See default and disabled examples.

## Examples

### Default

```html
<div class="max-w-sm">
  <label for="select-default">Dropdown label</label>
  <div class="mt-2 relative flex items-center">
    <select
      id="select-default"
      class="peer opacity-100 p-2 pr-8 text-gray-90 w-full appearance-none border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 disabled:text-gray-70 disabled:cursor-not-allowed disabled:bg-gray-20"
    >
      <option value="" selected disabled>- Select -</option>
      <option value="value1">Option A</option>
      <option value="value2">Option B</option>
      <option value="value3">Option C</option>
    </select>
    <div
      aria-hidden="true"
      class="select-none pointer-events-none h-full absolute right-0 whitespace-nowrap px-2 flex items-center text-gray-90 peer-disabled:text-gray-70">
      <div class="icon-[material-symbols--unfold-more] size-5"></div>
    </div>
  </div>
</div>
```

### Disabled

```html
<div class="max-w-sm">
  <label for="select-disabled">Dropdown label</label>
  <div class="mt-2 relative flex items-center">
    <select
      disabled
      id="select-disabled"
      class="peer opacity-100 p-2 pr-8 text-gray-90 w-full appearance-none border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 disabled:text-gray-70 disabled:cursor-not-allowed disabled:bg-gray-20 "
    >
      <option value="" selected disabled>- Select -</option>
      <option value="value1">Option A</option>
      <option value="value2">Option B</option>
      <option value="value3">Option C</option>
    </select>
    <div
      aria-hidden="true"
      class="select-none pointer-events-none h-full absolute right-0 whitespace-nowrap px-2 flex items-center text-gray-90 peer-disabled:text-gray-70">
      <div class="icon-[material-symbols--unfold-more] size-5"></div>
    </div>
  </div>
</div>
```
