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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Email address

We will send updates to this address.

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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Email address

Enter the address where we can reach you.

Enter a valid email address.

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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Contact method

Choose how you would like a reply.

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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Message

Include any details that will help us respond.

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.

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Personal information

First name

Last name

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>