Form

Under ReviewUpdated May 12, 2026

Description

A form captures data entered or edited by a user to complete an important task.
Where possible, limit the number of fields in a form.
If a form is long and complex, use the step flow wizard pattern. A wizard is less overwhelming than a long form and helps users complete fields correctly.

Figma library

5 steps of form design

Each step is described in a numbered tab at the top of this page.

Choose a container
Add elements
Add fields
Design the layout
Specify behavior

Anatomy

Anatomy

Container. The component used as the form background. See Choose a container for details.
Field. Text fields, dropdown selects, radio buttons, checkboxes, and others. See Add fields for details.
Form key. Shown on all forms with required fields. See Required fields for details.
Heading. Divides the form into logical sections. Read by screen readers once. See Add elements for details.
Separator. Divides the form into logical sections. Use with or without headings. See Add elements for details.
Inline buttons. Displays form action buttons.

Technical example

Form pattern implemented in Carbon.

Step 1. Choose a container

In most situations, place forms within a page, in a tile, or in a dialog.

Container	Use case
Tileor Standard page	The form needs a lot of space. For example, an invoice or pay run form.
Dialog	A form that can be triggered from any page. For example, from a quick create button in the navigation.A form to create or edit information for a read-only state.A simple form that gathers a small amount of information in context to complete a process.A complex form with many sections, or more than 2 steps.Use a separate dialog (and dialog URL) for each section or step.Use a single dialog (the same dialog URL) with a step sequence if the form can be triggered from several locations.
Sidebar	A user needs to see some information on the left or right side of the background page to complete the form. For example, generating a report.

Dos and don'ts

Don't

Step 2. Add elements

Group fields together or separate them into sections to help users move through the form.

See Typography component in Figma library

Element	Use case
Heading(Section title and paragraph)	Use a heading if the form container does not include the form title.Use a section title when there are multiple subsections beneath it.Use paragraph text for additional information or to explain the section.Use the relevant font in the existing page hierarchy. (HTML)
Subsection title	Use the relevant font in the existing page hierarchy. (HTML)
Section divider	Display after each section and subsection grouping.Do not display above the first section.Do not display above a subsection.
Step flow Wizard	Make a complex form easier to navigate and understand using a step flow.Use when the number of steps does not change.Display at the top header of each step.Use a single dialog (the same dialog URL) with a step flow if the form can be triggered from several locations.
Definition list	Summarizes information such as user responses at the end of a form.Lets users check answers before submitting information to a service.

Buttons

Use a single primary button. For example, Save, Submit, or Continue.
Use multiple subtle buttons if needed. For example, Add another address.
Use tertiary buttons for reversing actions. For example, Back or Cancel.
Do not use clear or reset buttons as they’re destructive and rarely needed.
If submitting the form takes time, show a loader in the submit button, and disable the button to prevent multiple clicks.

Button labels

Use specific labels that clearly explain what happens when the user selects the button.
Use a label for the primary button that matches the form title and the button that launches the form.
Use single-word labels where possible. Use no more than 3 words.

Dos and don'ts

Don't

Step 3. Add fields

Identify fields using a label set.
See guidance on using label sets in the General specs
Collect only the information needed to complete the task.
See guidance on using mandatory fields in the General specs

Field	Component	Guidelines
Address	Text inputText areaDropdown: selectFile input	Use separate fields to collect address elements.Group related address fields using spacing or separators.Use a dropdown select to switch between address locales.
Date	Date: numeral inputDate: picker inputDate: range input	Use a numeral date for a date of birth or a date that's far from the current date.Use a date picker for a date that's close to the current date.Use a date range to let a user set 2 dates that are related to each other.
Personal information(Names, title, sex and gender, email)	Text input	Tell users how their personal information is used.Use separate first name, last name, and middle name (optional) fields.Follow regional and cultural name conventions. See W3C Personal names around the world.Collect a user's title only when completely necessary. Let the user enter free text.Collect a user's sex or gender only if it's required for your service. For example, payroll maternity or paternity scenarios.Use sex when you need biological data. Use gender in all other cases.Address the user as you, and third parties as they where possible. Avoid gendered pronouns like he and she.For an email field, ask developers to specify that the text input is an email input.For an email field, tell users how their email address is used. This builds trust and confidence.
Password	Password	Obscure the password by default.Allow users to paste their password.Do not ask the user to enter the password twice. Instead, allow the user to unmask the password to check it.
Reference and ID number	Text input	Use a single field.Add hint text below the field label showing an example of a valid entry.
Consent under PECR or GDPR	Checkbox	Use a single checkbox that's unset by default.Seek legal guidance if necessary.
Accept terms and conditions	Button	Use a primary button to accept terms and continue.Use a secondary button to cancel.Seek legal guidance if necessary.
Turn on or off	Radio buttonCheckboxSwitch	Use 2 radio buttons (positive and negative option) unset by default.Use a checkbox unset by default.Use a switch to let users make a change straight away without submitting or saving. They are useful in settings areas. Set the switch to off by default.
Select 1 option from 2 options	DialogRadio button	Use 2 buttons in a dialog. For example, Save changes and Continue editing. Avoid Yes and No as the meaning is not always clear.Use 2 radio buttons (positive and negative option) in other containers.
Select 1 option from 3 to 5 options	Radio button
Select 1 option from 5 or more options	Dropdown: select
Select several options	Checkbox

Dos and don'ts

Don't

Step 4. Design the layout

Arrange and organize elements and fields to make the form easy to understand, navigate, and complete.

Alignment

Use a single vertical pathway through the form.

See an example of vertical form alignment in Figma

Horizontally align a maximum of 2 closely related fields. For example, first name and last name.
Use horizontal alignment sparingly and only for related fields as it can make the path through the form unclear.
Make sure horizontally aligned fields respond as a group. For example, they stay aligned when an error is displayed above one of the fields.

Before the error message

After the error message

Field width

Field width

Button position

Action buttons

Dos and don'ts

Don't

Step 5. Specify behavior

Work with developers to define how fields behave and interact with users.

Field behavior

Turn off autocomplete for forms where users enter customer or supplier details.
Turn on autocomplete for sign-up or contact forms where users enter their own personal details.
Turn off spell check as it can be frustrating for users when entering names and addresses.
Avoid auto-advancing (automatically jumping to the next question) as it can confuse users and cause input errors.
Use smart defaults carefully. Users might not notice they’re turned on and might not be alerted by error validation. Make sure it's easy to correct or reverse the settings.
Allow users to enter data in different formats.
Postcodes and credit card numbers with and without spaces.
Phone numbers with and without international prefixes. For example, +44...
Dates in different formats. For example, 01/04/2018, 1/4/18, 1/4, 1 Apr.
Trimming before and after spaces in case users copy and paste data.

Error validation

When the user submits form

Accessibility requirements

Error summary

When using the form pattern, any error messages that are displayed after submitting the form should be grouped together at the top of the page into a summary.

Each element of the summary needs to be a link to the specific part of the form where the error has occurred.

Error message summary> Make sure that error messages pull focus when they appear so that they are tackled by screen readers.

Watch this video for more detailed information on the error summary pattern.

Note: the error message text in this example does not follow current content guidelines. Error messages should be written in active voice and tell the user what to do.

https://sage365.sharepoint.com/sites/Accessibility/_layouts/15/embed.aspx?UniqueId=f18805b9-1063-448b-90c0-db075f7e0966&embed=%7B%22ust%22%3Atrue%2C%22hv%22%3A%22CopyEmbedCode%22%7D&referrer=StreamWebApp&referrerScenario=EmbedDialog.Create

Testing

Computer

Operating System	Version
MacOS Monterey	14.3.1
---	---
Safari	17.3.1
Chrome	105.0.5195.102

Assistive technology

Type	Name
Screen reader	VoiceOver (Mac)
Screen reader	NVDA (Windows)
Speech recognition	Voice Control (Mac)

Resources

Date	Change
September 2024	Copied information from Product design system.

Description

5 steps of form design

Anatomy

Technical example

Step 1. Choose a container

Dos and don'ts

Step 2. Add elements

Buttons

Button labels

Dos and don'ts

Step 3. Add fields

Dos and don'ts

Step 4. Design the layout

Alignment

Related fields

Field width

Button position

Dos and don'ts

Step 5. Specify behavior

Field behavior

Error validation

Accessibility requirements

Error summary

Testing

Computer

Assistive technology

Resources