Elements

Text Inputs

Usage

Definition

The input allows a user to type and submit alpha-numeric text. Variations and rules for specific input types are specified below.

Full-screen width fields are only allowed on the XS grid (0-479). In all other cases, inputs should span to a specified number of columns in the layout.

Common Characteristics

Text inputs are normally 40px high, but a small 32px alternative may be used. Whichever size is used, use the same size for associated elements like selects and buttons.

When using text inputs always declare the appropriate HTML input type to ensure that mobile browsers invoke the correct mobile keyboard.

All text inputs have these states: disabled, active, and focused.

Label Options

In some scenarios it may be desired to move or hide the input label. Right aligned labels can save vertical space in the UI. Hidden labels should be used with caution, and only when there are very few fields (e.g. a login form), or where the input required is very well understood (e.g. the user’s street address).

Hidden labels are present in the code but hidden in the UI, allowing screen readers to read the label.

Required vs Optional

When designing forms, aim to include only required fields. Avoid optional fields unless designed a search/filter scenario, where all fields may be optional.

Do not mark required form fields with an asterisk (*). Instead, mark optional fields as “optional” next to the label when they are an exception that can't be avoided. Optionally, designers can include a text instruction, “All fields are required.” at the top of the form.

Optional

Optional fields should be an exception and marked as “Optional”.

Validation

When an input is required, validation should take place as soon as technically possible in the user's experience, beginning with while a field is in focus (e.g. a matching password field), then when a field loses focus (e.g. an email field), etc.

It's all good message
There's a problem message

Inputs requiring a specific number format should allow users to input the format as they wish without triggering a format error. The field should auto-format the displayed entry as the user types and submit the format required by the system. This can be done by ignoring all non-numeric characters entered (parentheses, dashes, dots, etc).

This is not a valid 10-digit phone number.
This is not a valid 10-digit phone number.

Types and Variants

120 characters remaining

The number input (aka “spinner”) has an adjustable default, minimum, and maximum value.