Component · Form elements

Field: label, hint and error

Stable

A field wraps every form control: the label, an optional hint, an error message when the answer is wrong, and the control itself. Using it everywhere keeps forms evenly spaced and makes errors look the same on every screen.

Show errors after the manager tries to save, not while they are still typing.

Monthly price

In pounds, before VAT.

Enter a price, like 12.50

Specifications

Anatomy

Monthly price

In pounds, before VAT.

Enter a price, like 12.50

1) Label (.at-label)

font-size: var(--at-text-sm) /* 14px */

font-weight: var(--at-weight-bold)

2) Hint (.at-hint)

font-size: var(--at-text-sm)

color: var(--at-text-subtle)

3) Error (.at-error)

font-size: var(--at-text-sm)

font-weight: var(--at-weight-bold)

color: var(--at-text-danger)

4) Control

.at-input, .at-textarea or .at-select

in an error field: border: 2px solid var(--at-border-danger)

Size and spacing

First name

Last name

Inside a field

display: flex; flex-direction: column

gap: var(--at-space-2) /* 4px */

Between fields

wrap fields in .at-stack

gap: var(--at-space-5) /* 16px */

Field

Label and control. Add a hint only when it helps.

Example

Reference

Field with hint

A hint between the label and the control explains format or limits. Link it with aria-describedby.

Example

Monthly price

In pounds, before VAT.

Field with error

Add .at-field--error and an .at-error message above the control. Set aria-invalid="true" and add the error id to aria-describedby.

Example

Email address

Enter an email address, like name@example.com

Usage

When to use

Around every text input, textarea, select and date input.

When not to use

Checkboxes and radios: use a fieldset with a legend instead.

Content

Error messages say how to fix it: "Enter a price, like 12.50", not "Invalid".
Hints describe format or limits; they do not repeat the label.
If a form has several errors, also show an error alert at the top.

Do and don't

Monthly price

Enter a price, like 12.50

DoThe error says what to type.

Monthly price

Invalid input

Don'tA vague error, placed after the field where it is easy to miss.

Do

Say how to fix it: "Enter a price, like 12.50".

Don't

Show errors before the user has submitted.
Only colour the border: always show the message.

Implementation

HTML

<div class="at-field at-field--error">
  <label class="at-label" for="amount">Monthly price</label>
  <p class="at-hint" id="amount-hint">In pounds, before VAT.</p>
  <p class="at-error" id="amount-error">Enter a price, like 12.50</p>
  <input class="at-input" id="amount" type="text" inputmode="decimal" aria-describedby="amount-hint amount-error" aria-invalid="true" />
</div>