Patterns
Patterns are reusable compositions of components that solve design problems and help ensure consistency across the service.
Accessible form validation and error recovery
Form validation is a critical aspect of creating usable and accessible applications. By providing effective error feedback and guidance, you can help users submit accurate information while minimising frustrations.Ask users for dates and times
When we ask for date, time or a combination of both, there are a range of components that can be used to meet user needs in different situations.Conditionally revealed form content
Revealing additional form questions and help content after a user selects an option can reduce the amount of content a user must read when completing complex forms.Create, read, update and delete data in tables
Applications that require persistent data storage commonly require table layouts to present stored data. Here are some patterns that enable users to create, read, update and delete persistent data in tables.Focus mode
Used to help reduce distractions so that users can focus on completing a specific task.Helpful form content
Providing the right content in forms can help users understand and complete forms quickly and efficiently. The location, amount and type of content provided is important.Loading, empty and error states
When loading data in an application, it is important to consider and design for loading, empty, and error states. These states will help set user expectations and prevent them from assuming that the interface is unresponsive.Messaging
Messaging conveys contextual information to the user, provides information in relation to a service or interaction, and provides feedback in response to their actions or the current system status.Multi-task form
Use this pattern to break up large forms into multiple smaller tasks to decrease cognitive load.Review and submit
Review and submit is an important step of a multi-page form where users can review all information provided, make changes, understand privacy and security policies and submit the form. This pattern is used in multi-page forms.Search filters
Search filters help users find what they’re looking for by displaying options that meet specified criteria.Selectable tables with batch actions
Selectable tables allow users to select one or more rows simultaneously and perform batch actions against the selected rows. A batch action is any action that can be performed against any selectable row of a table.Selecting an option from a list
The type of list component to use is determined by the task, the experience level of the user, and the number of items in the list. Selecting the appropriate input type helps users make choices more easily and accessibly.Selecting multiple options from a list
Multi-select is a commonly used design pattern that allows users to select multiple options from a list. This pattern is used in various contexts such as search filters, form fields, and more.Warn before leaving
Use the Warn before leaving pattern to prevent users from accidentally losing unsaved data when navigating away from a form or in-progress task.yourGov example application
The yourGov application is designed to showcase the components and patterns of the design system. It enables usability testing with a diverse range of users.