Select

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Dropdown label

select-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Dropdown label

select-disabled-demo.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.