Field

A label, a control and a hint stacked as one. The error message waits until the field has been touched.

.fieldlabelCSS only

Examples

Project name Used in URLs and exports. Enter a name.

Email We'll send the invite here.

`.field`	Column wrapper with a small gap. Add `data-inline` to put the label beside the control.
`> label`	Small, medium-weight caption. Point its `for` at the control's `id`.
`> .input`	The control: an `.input`, a `.select`, an `.input-group` or any other input.
`> small`	Optional hint in muted text. Hidden while the error shows.
`> [data-error]`	Optional error message in the danger colour. Hidden until the control is invalid.

Attribute	Values	Description
`data-error`	boolean	On a child of `.field`: the error message. Shown once the control matches `:user-invalid` or carries `aria-invalid="true"`, and then it replaces the `<small>` hint.
`data-required`on `label`	boolean	Appends a danger-coloured asterisk. Pair it with `required` on the control; the marker alone validates nothing.
`data-inline`on `.field`	boolean	Two columns: the label (at least 8rem) beside the control, with hint and error under the control.
`aria-invalid`	`true`	On the control: shows the error message straight away, without waiting for the user. Use it for errors from the server.
`required`	boolean	On the control: native validation. The browser reports `:user-invalid` only after the user has edited or left the control, so an untouched form shows no errors.

Connect the label with for and id; the field's layout expects the label and the control as siblings. A placeholder is not a label.
The hint and error are not linked to the control by the CSS. Give them ids and list them in the control's aria-describedby so they are read with it.
The asterisk is generated content and may not be read. required on the control is what announces the field as required.
Errors revealed by :user-invalid appear silently. For errors that arrive after submit, set aria-invalid="true" and move focus to the first invalid field.