---
title: Select (React) - 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

```tsx
import { Select } from '@uswds-tailwind/react'

export default function SelectDemo() {
  return (
    <div className="max-w-sm">
      <label htmlFor="select-default" className="block">Dropdown label</label>
      <Select.Root>
        <Select.Field id="select-default" defaultValue="">
          <option value="" disabled>- Select -</option>
          <option value="value1">Option A</option>
          <option value="value2">Option B</option>
          <option value="value3">Option C</option>
        </Select.Field>
        <Select.Icon />
      </Select.Root>
    </div>
  )
}
```

### Disabled

```tsx
import { Select } from '@uswds-tailwind/react'

export default function SelectDisabledDemo() {
  return (
    <div className="max-w-sm">
      <label htmlFor="select-disabled" className="block">Dropdown label</label>
      <Select.Root disabled>
        <Select.Field id="select-disabled" defaultValue="">
          <option value="" disabled>- Select -</option>
          <option value="value1">Option A</option>
          <option value="value2">Option B</option>
          <option value="value3">Option C</option>
        </Select.Field>
        <Select.Icon />
      </Select.Root>
    </div>
  )
}
```

## Component API

Put Field and optional Icon inside Root. Field is the native select control.

### Root `<div>`

Owns value and validation state.

| Prop | Type | Description |
| - | - | - |
| `defaultValue` | `string` | Initial uncontrolled selection. |
| `value` | `string` | Controlled selection. |
| `onValueChange` | `(value: string) => void` | Receives selection changes. |
| `name` | `string` | Form field name. |
| `required` | `boolean` | Requires a selection. |
| `disabled` | `boolean` | Disables the select. |
| `invalid` | `boolean` | Marks the selection invalid. |
| `readOnly` | `boolean` | Passes readOnly to the select. Native select elements do not enforce read-only behavior; use disabled to prevent interaction. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |
| `data-invalid` | `Present when invalid` | Style the error state. |

### Field `<select>`

Native select control containing option elements.

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |
| `data-invalid` | `Present when invalid` | Style the error state. |

### Icon `<div>`

Displays the dropdown indicator.

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |
| `data-invalid` | `Present when invalid` | Style the error state. |