Forms comprise of the form itself and multiple form inputs. Each form is broken down into one or more fieldsets that groups the form elements into logical chunks that make sense to the user, for example, a delivery address.
Form elements are split into two key input types:
Freeform inputs - Free form text inputs are the most used components in forms. Use text fields and text areas for freeform entry. Text fields are used to input a short (single line) amount of freeform text. Text areas are used to input multiple lines of text, for example, a comments field. Use text areas when you expect longer entries.
Selection inputs - Selection inputs are used to select an option from a predefined list of available options. Selection options may be single-select or multi-select. Use a radio button list or dropdowns for single selections and checkboxes for multi-selections.
Validation communicates whether a field or form meets its input requirements. When a requirement is not met, messages should explain what the issue is, where it occurred and how to fix it.
When communicating information related to a form or task, consider whether the message is about the user's interaction or the subject of the task.
Contextual feedback is based on the subject of a form or task, rather than the user's interaction with the form itself. For example, a user may enter a valid vehicle registration and the lookup returns that an inspection is required before renewal.
Use information feedback for status information the user should know but does not need to act on. Use warning feedback when the status requires action or affects what the user can do next.
When both types appear, structure them in the order users need to interpret them: user feedback first, followed by contextual feedback. Use this sequence for all field types.
Associate the message with its field using aria-describedby. Do not apply an error or warning state to a valid field: the alert describes the subject's status, not whether the user's input is valid.
Do not use success or error feedback for contextual feedback. These treatments communicate the outcome of a user action rather than the state of the subject.
For more guidance, see In-page alert.
The dropdown pattern, also referred to as a drop list or select list, allows users to select a single option from a list of available options.
Single checkboxes are used to confirm a user's selection or preference like agreeing to terms and conditions or registering for an option.
Checkbox lists provide the user with a list of available items to choose from. The number of items a user can select should be indicated to the user on the page. Checkbox lists are used where multiple selections are permitted. Checkbox lists are wrapped in a fieldset to make them one logical group.
Radio lists provide the user with a list of all available items from which a single selection is made. Radio lists are wrapped in a fieldset to make them one logical group.
Help text allows form designers to provide users with help to fill in a form element. Use help text to provide additional context, information or as an example to complete a field input.
Do not render disabled form fields simply to display information. Avoid using disabled=true to present values, as this suggests interactivity when none is available. For read-only values, present the information outside of input fields, for example as plain text or within a summary list. This approach makes intent clear and avoids confusing users with inactive controls.
More information: Inactive fields method
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
To ensure WCAG 2.2 AA compliance for a full array of filter components, correct usage and configuration are vital. While each component provides a foundation for accessibility, it's essential to minimise redundant entry by retaining previously selected or entered filter values if a user revisits the page or refines their search. Ensure all filter options are clearly labelled and provide instructions where needed, so users understand the available choices and input formats. Additionally, allow users to modify their filter selections easily without resetting other filters.
Ensure each input, whether it's a text field, checkbox, radio button, dropdown, or date input, is clearly labelled with descriptive text to communicate its purpose. Consistent error messaging and validation feedback are crucial; provide users with clear, actionable instructions if errors occur, without requiring them to re-enter data unnecessarily. Keyboard navigation should be maintained across all inputs, with each respective field focus indicator allowing users to move easily between fields clearly.
Following these practices will help create accessible, user-friendly forms that offer a seamless experience across various input types.
User feedback communicates the state of a field or the outcome of a user's interaction with the form.
Contextual feedback communicates the current state of the subject of the form, rather than the outcome of the user's interaction.
Use an information treatment for relevant status information that the user should know but does not need to act on.
Concession recorded
This vehicle has a registration concession. Additional charges may apply if ownership is transferred. No action is needed to complete this check.
Use a warning treatment when the subject's status requires the user to take action or affects what they can do next.
Online renewal unavailable
This registration needs changes to its operating conditions. Visit a service centre to renew.
A field can show that a value was validated while a separate message explains the subject's status. Only show the valid confirmation when it helps the user.
Safety inspection required
This vehicle needs a safety inspection before you can renew the registration.