---
title: Field (Vanilla) - 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.

Use one field for each form control. Use a `<fieldset>` with a `<legend>` to name a group of related fields.

Connect each label with `for` and each hint or error with `aria-describedby`. Set `aria-invalid="true"` when validation fails. There is no separate Field initializer.

## Examples

### Input and hint

```html
<div class="max-w-xs">
  <label for="field-email" class="block">Email address</label>
  <div id="field-email-hint" class="text-gray-50">We will send updates to this address.</div>
  <input id="field-email" type="email" aria-describedby="field-email-hint" class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v bg-white" />
</div>
```

### Error message

```html
<div class="max-w-xs">
  <label for="field-error-email" class="block">Email address</label>
  <div id="field-error-hint" class="text-gray-50">Enter the address where we can reach you.</div>
  <div id="field-error-text" class="mt-0.5 text-red-60v font-bold">Enter a valid email address.</div>
  <input id="field-error-email" type="email" aria-invalid="true" aria-describedby="field-error-hint field-error-text" class="p-2 w-full h-10 border-4 border-red-60v focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v bg-white" />
</div>
```

### Select

```html
<div class="max-w-xs">
  <label for="field-select" class="block">Contact method</label>
  <div id="field-select-hint" class="text-gray-50">Choose how you would like a reply.</div>
  <div class="relative flex items-center mt-2">
    <select id="field-select" aria-describedby="field-select-hint" class="appearance-none p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v">
      <option value="" disabled selected>Select a method</option>
      <option value="email">Email</option>
      <option value="phone">Phone</option>
    </select>
    <div aria-hidden="true" class="pointer-events-none absolute right-0 px-2"><div class="icon-[material-symbols--unfold-more] size-5"></div></div>
  </div>
</div>
```

### Textarea

```html
<div class="max-w-xs">
  <label for="field-message" class="block">Message</label>
  <div id="field-message-hint" class="text-gray-50">Include any details that will help us respond.</div>
  <textarea id="field-message" aria-describedby="field-message-hint" class="p-2 w-full max-w-mobile-lg h-40 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v"></textarea>
</div>
```

### Fieldset

Use a `fieldset` and `legend` for a group of related controls. Keep each control’s label associated with its own input.

```html
<fieldset class="max-w-xs">
  <legend class="leading-snug max-w-mobile-lg mb-3">Personal information</legend>
  <div class="space-y-4">
    <div>
      <label for="field-first-name" class="block">First name</label>
      <input id="field-first-name" type="text" class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v bg-white" />
    </div>
    <div>
      <label for="field-last-name" class="block">Last name</label>
      <input id="field-last-name" type="text" class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v bg-white" />
    </div>
  </div>
</fieldset>
```