Inputs — Label, hint and error states

Three labelled fields compare default, error and disabled anatomy. Use them to keep field messages and state cues consistent.

ReactHTML

1440 × 480

Open in new tab

Component.tsx27 lines

export default function InputsFieldAnatomy() {
  return (
    <div className="grid w-72 gap-5 text-neutral-900 sm:w-80">
      <div>
        <div className="flex items-center justify-between text-sm">
          <label htmlFor="anatomy-name" className="font-medium">Display name</label>
          <span className="text-neutral-500">Optional</span>
        </div>
        <input id="anatomy-name" name="display-name" type="text" autoComplete="nickname" aria-describedby="anatomy-name-hint" placeholder="Enter display name" className="mt-1.5 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        <p id="anatomy-name-hint" className="mt-1.5 text-sm text-neutral-500">Shown beside your contributions.</p>
      </div>
      <div>
        <label htmlFor="anatomy-email" className="block text-sm font-medium">Email</label>
        <input id="anatomy-email" name="email" type="email" autoComplete="email" aria-invalid="true" aria-describedby="anatomy-email-error" defaultValue="name@" placeholder="name@example.com" className="mt-1.5 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 aria-invalid:border-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        <p id="anatomy-email-error" className="mt-1.5 flex items-center gap-1.5 text-sm text-neutral-600">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><path d="m12 3 10 18H2L12 3Z" /><path d="M12 9v5M12 17h.01" /></svg>
          Error: enter a valid email.
        </p>
      </div>
      <div>
        <label htmlFor="anatomy-account" className="block text-sm font-medium">Account ID</label>
        <input id="anatomy-account" name="account-id" type="text" disabled defaultValue="AC-1042" aria-describedby="anatomy-account-hint" placeholder="Account ID" className="mt-1.5 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        <p id="anatomy-account-hint" className="mt-1.5 text-sm text-neutral-500">This value cannot change.</p>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for form field states and message placement. Pick inputs-field-grid for related fields with mixed widths. Variations: swap the optional marker for Required, show a success message with a check icon, or use a read-only field instead of disabled.
Hierarchy: Read each label, control, then message. The first label shares a row with Optional. The error uses an alert icon, Error wording and aria-invalid. Disabled Account ID has a visible value. Labels up to 3 words, placeholder up to 4, messages up to 6.
Responsive: At 640px only the root width increases from 288px to 320px. All three field groups remain stacked and messages fit one line.
Layout: A 288px (w-72) stack, 320px (sm:w-80) from 640px. Three field groups have 20px gaps. Labels are 14px medium; inputs are 40px tall with 12px side padding and 6px radii. Each input sits 6px below its label, and its 14px message another 6px below. The error message has a 16px alert icon and 6px gap. Total height is 316px.
States: Enabled fields change their neutral-300 borders to neutral-400 on hover and show a 2px neutral-900 focus-visible outline offset 2px. The invalid field keeps a neutral-900 border through aria-invalid. The disabled input has neutral-50 fill, neutral-500 text and a not-allowed cursor. All placeholders are neutral-500; each message is linked with aria-describedby.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Display name                       Optional  │
│ ┌─────────────────────────────────────────┐  │
│ │ Enter display name                      │  │
│ └─────────────────────────────────────────┘  │
│ Hint: how this value is used                 │
│ Email                                        │
│ ┌─────────────────────────────────────────┐  │
│ │ name@                                   │  │
│ └─────────────────────────────────────────┘  │
│ ! Error: enter a valid email.                │
│ Account ID                                   │
│ ┌─────────────────────────────────────────┐  │
│ │ AC-1042 (disabled)                      │  │
│ └─────────────────────────────────────────┘  │
│ Hint: this value cannot change               │
└──────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact

Inputs — Label, hint and error states

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths