Components / atoms

Form controls

Input, select, checkbox and radio share one shape, one focus style and the same modes, so a control looks and works the same wherever it is used.

Usage

When to use it

These are the single controls. Put a text input or select inside a Field, so it has a visible label, a hint and an error; checkboxes and radios carry their own label. The modes below are documentation states: in a live form the browser drives hover, active and focus, and only disabled, loading and error are set from code.

02 / examples

See the component in context.

Variant 01

Text input

A single-line field in every documented mode.

Default

Hover

Active

Focus

Disabled

Variant 02

Input with icons

A decorative icon can sit before or after the text. Icons are hidden from assistive technology, so the label still does the naming.

Username

Variant 03

Select

A native select with the system's own chevron, in every mode.

Default

Hover

Active

Focus

Disabled

Variant 04

Checkbox

A checkbox carries its own label, so it needs no separate Field.

Variant 05

Radio

One choice from a set. The set belongs in a fieldset with a legend.

03 / contract

Rules the component follows

The form controls are the text input, the select, the checkbox and the radio. They share one shape, one focus style and the same set of states, which are default, hover, active, focus, disabled, loading and error, so a control looks and behaves the same wherever it is used. The input can also carry an icon before or after the text.

A loading control is disabled and tells assistive technology that it is busy. Every control renders its native HTML element instead of a styled imitation, which keeps keyboard use, autofill and screen reader support working as the browser intends.

04 / accessibility

Accessibility information

The focus state shows the same ring that the browser draws when a control is reached with the keyboard. Every control meets the minimum touch target of 44px, including the clickable area of the checkbox and radio labels, so they are easy to use on a phone.

An error is always explained with text and an icon, never by colour alone. Icons inside an input are decorative and are hidden from assistive technology, because the label already tells people what the field is for.