Control Field - Usage

Basic Guidelines

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

For more information on the Radio and Checkbox components, please refer to their individual documentation.

Content Guidance

• The list of options should be structured in a logical order, from simplest operation to most complex, or least risk to most.
• Options should be comprehensive and clearly distinct, using unambiguous vocabulary and context.
• The error message needs to be specific, concise and helpful, providing a solution on how the user can complete the process.
• The in-line message is optional and used for additional context regarding the whole group of options.

Error Messaging

If the Control field is displaying an error message, any Checkbox or Radio items automatically change their status to error accordingly.

Errors only occur if no selection has been made, but the user is required to make a choice to submit the form successfully.

Alignment

We recommend a 48px gap when stacking multiple Control Field components, to ensure each is recognised as its own entity.

The Control Field must align with the grid system set out in Foundations. It sits in-line with the rest of the text.

On 12-column grids, the Control Field component sits left-aligned within the six centre columns of the grid, in-line with the rest of the text. The example below is downscaled proportionally for illustration purposes.