# Forms

## Purpose

Composing inputs into complete forms.

## Decisions

### Forms

- **Spacing:** **12px** between fields; label above (12px / 16px), helper text below, as in [Inputs](../components/inputs.md).
- **Required marking:** an **asterisk after the label** on required fields.
- **Validation timing:** a field is checked **when the person leaves it**, and again as they type once it has shown an error. Nothing is shown while they are still typing the first time.
- **Buttons:** on **desktop**, at the right of the form, Cancel then Save. On **mobile**, stacked and full-width, with the stacked buttons the same width.
- **Columns:** one column by default; **two columns** on a wide screen for short related fields (such as first and last name).
- **Errors:** shown **inline only**: a red-pink border, with the red-pink alert icon **on the right of the field** and a soft white message below. There is no error summary banner.