---
title: Field (React) - USWDS + Tailwind
description: Pair a form control with its label, hint, and validation message
  using the field pattern.
---

# Field

Pair a form control with its label, hint, and validation message using the field pattern.

## Examples

Use `Field.Root` when you want a form control to share a label, hint, and validation state. Wrap one control per field. `Field.Label` and `Field.Description` provide the control’s label and accessible description; `Input`, `Textarea`, and `Select.Field` read that context.

### Input and hint

```tsx
import { Field, Input } from '@uswds-tailwind/react'

export default function FieldInputDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Email address</Field.Label>
      <Field.Description>We will send updates to this address.</Field.Description>
      <Input type="email" />
    </Field.Root>
  )
}
```

### Error message

Set `invalid` on `Field.Root` after validation. `Field.ErrorMessage` then appears, and the control receives `aria-invalid` and a description that includes the error. `required` and `disabled` on the root also reach the control.

```tsx
import { Field, Input } from '@uswds-tailwind/react'

export default function FieldErrorDemo() {
  return (
    <Field.Root invalid className="max-w-xs">
      <Field.Label>Email address</Field.Label>
      <Field.Description>Enter the address where we can reach you.</Field.Description>
      <Field.ErrorMessage>Enter a valid email address.</Field.ErrorMessage>
      <Input type="email" />
    </Field.Root>
  )
}
```

### Select

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

export default function FieldSelectDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Contact method</Field.Label>
      <Field.Description>Choose how you would like a reply.</Field.Description>
      <Select.Root>
        <Select.Field defaultValue="">
          <option value="" disabled>Select a method</option>
          <option value="email">Email</option>
          <option value="phone">Phone</option>
        </Select.Field>
        <Select.Icon />
      </Select.Root>
    </Field.Root>
  )
}
```

### Textarea

```tsx
import { Field, Textarea } from '@uswds-tailwind/react'

export default function FieldTextareaDemo() {
  return (
    <Field.Root className="max-w-xs">
      <Field.Label>Message</Field.Label>
      <Field.Description>Include any details that will help us respond.</Field.Description>
      <Textarea />
    </Field.Root>
  )
}
```

### Fieldset

Use `Fieldset.Root` to group related controls and `Fieldset.Legend` to name the group. Each nested `Field.Root` keeps its own label and control association.

```tsx
import { Field, Fieldset, Input } from '@uswds-tailwind/react'

export default function FieldFieldsetDemo() {
  return (
    <Fieldset.Root className="max-w-xs">
      <Fieldset.Legend>Personal information</Fieldset.Legend>
      <div className="space-y-4">
        <Field.Root>
          <Field.Label>First name</Field.Label>
          <Input type="text" />
        </Field.Root>
        <Field.Root>
          <Field.Label>Last name</Field.Label>
          <Input type="text" />
        </Field.Root>
      </div>
    </Fieldset.Root>
  )
}
```

## Component API

Wrap one form control in Root. Label, Description, and ErrorMessage share the control's validation state.

### Root `<div>`

Supplies field state to nested controls.

| Prop | Type | Description |
| - | - | - |
| `required` | `boolean` | Requires a value. |
| `disabled` | `boolean` | Disables the control. |
| `invalid` | `boolean` | Shows an error state. |
| `readOnly` | `boolean` | Makes the control read-only. |

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

### Label `<label>`

Names the control.

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

### Description `<div>`

Provides hint text associated with the control.

### ErrorMessage `<div>`

Provides error text when invalid.

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

### Fieldset.Root `<fieldset>`

Groups related fields under one legend.

| Prop | Type | Description |
| - | - | - |
| `disabled` | `boolean` | Disables controls in the group. |
| `invalid` | `boolean` | Marks the group invalid. |

### Fieldset.Legend `<legend>`

Names the group of controls.

### Fieldset.Description `<div>`

Provides supporting text for the group.

### Fieldset.ErrorMessage `<div>`

Displays group-level validation text.

### Accessibility

Put one Input, Textarea, Select.Field, or other supported control inside each Field.Root. The field connects its label, hint, and error text to that control.