Forms - Overview

Text Input

Go to component

Text Inputs are form fields for the user to type into.

Text Input component

Example in use

Textarea

Go to component

Textarea fields are form elements used to collect multi-line, free-form text input data from the user. They are used in place of the Text Input when the value entered is expected to exceed one line.

Textarea component

Example in use

Select

Go to component

The Select component is used as part of a form where users can select an option from a list. Select is different to a dropdown component, which is used for filtering or sorting content as the action of making a selection has an immediate effect to the content on the page.

Select inputs are similar to the Radio component as both components let the user select only one option. If you have six or fewer options, it’s recommended to use the Radio component instead of the Select input, so the user can see all options up front.

The Select input saves screen estate, but requires the user to click to see all available options. It might also require the user to scroll to see all options, which should be avoided if possible on mobile.

Select component

Example in use

Field

Go to component

The Field component is a React-specific component, that is used to decorate Text Input, Textarea and Select components with a label, message and validation.

Example in use

Control Field

Go to component

The Control Field component holds a group of Checkboxes or Radios and adds information like legend, Validation message or an in-line message.

Control Field component

Example in use

Checkbox

Go to component

Checkboxes are form elements used to display lists of options. Users may select any number of options, including zero, one or multiple.

Even though the Checkbox is its own component, we recommend using the Control Field instead because it offers a label, validation message, and in-line messaging.

Checkbox component

Example in use

Radio

Go to component

Radios are form elements used to display lists with two or more options that are mutually exclusive. The user can only select one Radio item per list.

Even though the Radio is its own component, we recommend using the Control Field instead because it offers a label, validation message, and in-line messaging.

Radio component

Example in use

Radio Card

Go to component

Radio Cards offer mutually exclusive options, providing more content than the Radio component.

Radio Cards are used for a configuration, where only one option has to be selected from a set. The set of Radio Cards should have a submit Button associated with it to confirm the selection.

Please note Radio Card is different from Product Card, which is used when the user is adding or removing a product.

Radio Card component

Example in use

Validation

Go to component

Validation is used across multiple components to allow for consistency of error or success messaging. It is setup as part of Control Field and Field (Text Input, Textarea and Select in Figma) and can be added to the Radio Card if required.

Validation component

Planned components

Password Field

A Text Input field able to show/hide a password and indicate its strength.

Date Picker

A calendar view to choose available dates or time periods.

Swatch Button

A card to choose a colour swatch. This will use the Swatch component as a base.