# Text input

Status: stable

A single line of text, with its label above.

Text inputs let managers type and edit a single line of text: a name, a reference, an amount. Every input has a visible label above it, and optional help text between the label and the field.

## Example

```html
<div class="at-field"><label class="at-label" for="d-ref">Reference</label><input class="at-input" id="d-ref" type="text" value="INV-1042" /></div>
```

## Anatomy

1. **Label**: font-size: var(--at-text-sm) /* 14px */; font-weight: var(--at-weight-bold); color: var(--at-text)

2. **Hint (optional)**: font-size: var(--at-text-sm); color: var(--at-text-subtle)

3. **Field**: min-height: 36px; padding: var(--at-space-3) /* 8px */; border: 1px solid var(--at-border); border-radius: var(--at-radius-1); font-size: var(--at-text-md) /* 16px */

## Size and spacing

- **Field**: min-height: 36px; width: 100% of its container

- **Spacing**: label to field: var(--at-space-2) /* 4px */; between fields: var(--at-space-5) /* 16px */

## Variants

### Text input

Use the right type so phones show the right keyboard: text, email, tel, or inputmode="decimal" for money.

```html
<div class="at-field"><label class="at-label" for="v-email">Email address</label><input class="at-input" id="v-email" type="email" /></div>
```

| State | Specification |

|---|---|

| Default | border: 1px solid var(--at-border) |

| Hover | border-color: var(--at-text-subtle) |

| Focus | outline: 3px solid var(--at-border-focus) |

| Error | border: 2px solid var(--at-border-danger); plus an .at-error message |

| Disabled | opacity: 0.5 |

## When to use

- Short free text: names, references, amounts, email addresses.

## When not to use

- Long text: use a textarea.
- A fixed set of answers: use radios or a select.

## Content

- Labels are short nouns: "Reference", not "Please enter your reference".
- Put format help in the hint: "In pounds, before VAT".
- Do not use placeholder text: it disappears when typing and has poor contrast.

## Do and don't

Do: A visible label, with help text above the field.

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

Don't: Placeholder text as the label.

```html
<input class="at-input" type="text" placeholder="Enter the monthly price in pounds" aria-label="Price" />
```

## Do

- Always show a label above the input.
- Set type="email", "number" or "tel" where it fits.

## Don't

- Use placeholder text as the label.

## Code

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

## Classes

| Class | What it does |

|---|---|

| `at-field` | Wraps label, input, hint and error |

| `at-input` | The input |

## Tokens

`--at-border`, `--at-surface`, `--at-text`, `--at-border-bold`

## Accessibility

- Link label and input with for / id.