User research front-end patterns

This styleguide contains all the patterns from GOVUK Elements with some additions. Any pattern in GOVUK Elements can be used with the code here.

More detailed implementation advice for the patterns below can be found in the HTML source code.

Tools

• Basic page

Pages

• Content page
• Start page
• Confirmation
• Page not found
• Technical problems

Text fields

• Single text field
• Single text field with validation
• Multiple text fields
• Multiple text fields with validation
• Date field
• Date field with validation
• Single multi-line text field
• Single multi-line text field with validation

Radio fields

• Single field with two radio options
• Single field with two radio options with validation
• Single field with multiple radio options
• Single field with multiple radio options with validation
• Multiple fields with multiple radio options
• Multiple fields with multiple radio options with validation

Checkbox fields

• Single field with multiple checkbox options
• Single field with multiple checkbox options with validation
• Multiple fields with multiple checkbox options
• Multiple fields with multiple checkbox options with validation
• Single field with multiple checkbox options and a conditional section
• Single field with multiple checkbox options and a conditional section with validation
• Single field with multiple checkbox options and a hidden legend