Text input

Stable

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.

Reference

---

Specifications

LightDark

Anatomy

Monthly price

In pounds, before VAT.

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

Reference

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

Text input

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

LightDark

Example

Email address

States

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

---

Usage

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

Monthly price

In pounds, before VAT.

DoA visible label, with help text above the field.

Don'tPlaceholder text as the label.

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.

---

Implementation

HTML

Copy

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

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

---

Accessibility

• Link label and input with for / id.

Related

Field: label, hint and error

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

View component

Textarea

Several lines of text.

View component

Select

Choose one option from a list of more than about five.

View component