# Field: label, hint and error

Status: stable

Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.

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.

## Example

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

## Anatomy

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

- **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 */

## Variants

### Field

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

```html
<div class="at-field"><label class="at-label" for="v-f1">Reference</label><input class="at-input" id="v-f1" type="text" /></div>
```

### Field with hint

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

```html
<div class="at-field"><label class="at-label" for="v-f2">Monthly price</label><p class="at-hint" id="v-f2-hint">In pounds, before VAT.</p><input class="at-input" id="v-f2" type="text" inputmode="decimal" aria-describedby="v-f2-hint" /></div>
```

### 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.

```html
<div class="at-field at-field--error"><label class="at-label" for="v-f3">Email address</label><p class="at-error" id="v-f3-error">Enter an email address, like name@example.com</p><input class="at-input" id="v-f3" type="email" aria-invalid="true" aria-describedby="v-f3-error" /></div>
```

## 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

Do: The error says what to type.

```html
<div class="at-field at-field--error"><label class="at-label" for="dd-f1">Monthly price</label><p class="at-error">Enter a price, like 12.50</p><input class="at-input" id="dd-f1" type="text" value="twelve" aria-invalid="true" /></div>
```

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

```html
<div class="at-field at-field--error"><label class="at-label" for="dd-f2">Monthly price</label><input class="at-input" id="dd-f2" type="text" value="twelve" aria-invalid="true" /><p class="at-error">Invalid input</p></div>
```

## 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.

## Code

```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>
```

## Classes

| Class | What it does |

|---|---|

| `at-field` | Wrapper |

| `at-field--error` | Error state: red, thicker border |

| `at-label` | Label |

| `at-hint` | Help text |

| `at-error` | Error message |

## Tokens

`--at-text-subtle`, `--at-text-danger`

## Accessibility

- Point aria-describedby at the hint and error; set aria-invalid="true" on error.