Forms

Use forms to allow people to enter data for use by the application, or to configure options.

Forms are used to get information and guide people with minimal fuss. Designing forms well requires making decisions about structure, sequence, interface elements, field labels, help, and feedback.

Diagram of a form anatomy with four different fields.
  1. Labels: Standard label alignment is left-aligned with the field underneath. For the placeholder text, use sentence case and left-align.

  2. Required field label: Mark required fields with an asterisk (*). If all fields in the form are mandatory, this isn't necessary.

  3. Disabled fields: Show disabled fields if users need to know what controls might be available to them.

  4. Field length: The length of the field should reflect the intended length of content. Available lengths are 75px, 150px, 250px, 350px, and 500px.

Style

Accessibility

  • Autofocus the first field by default. This allows users to tab through elements in the form in a logical way.

  • Never disable a submit button, even if all of the required fields aren't filled in. Instead, describe what needs to be done using validation and error messages.

Layout

Common form components include text fields, checkboxes, radio buttons, selects, date pickers, toggles, and buttons.

Common layout of a form to create a new project.
  1. Title: Describes the form. If the form is the main item on a page, use an h2 tag, otherwise use h3 and adjust the rest of the page hierarchy accordingly. Follow the title with a short description.

  2. Group headline: Describes a group of controls and fields within a form. These should be grouped to help users understand what is required of them in a logical way. Try to make the headline concise and informative, but, if you need to, you can add a short paragraph of text to explain the group.

  3. Buttons: Use a primary button for the main action, and a link button to cancel. The primary button should be left-aligned along with the left side of the form field. If additional actions are required, put the primary button first, then any standard buttons, then the link button. The only exception is a multi-step form where the 'Back' standard button sits at the very left, while the rest of the buttons are aligned to the left.

Button positioning

Buttons are sorted by importance from right to left, with the most important button (primary) on the right.

Button positioning in a modal highlighting the primary button in the bottom right corner.An outline diagram of a form highlighting progress tracker at the top and primary button in the bottom right corner.

Exceptions to this are single-page forms, flags, cards and section messages where buttons are left aligned; with the primary button on the left.

Outline diagram of a single page form highlighting left-aligned primary buttons.

Long forms

When users access a form, it can be daunting to be shown a large number of fields that need to be filled out. The threshold for when a form is considered too long depends on the audience and the context. There are various techniques for lessening the impact of long forms.

Multi-step forms

Make sure people know their status at each step of a form. This approach can be used to spread form fields across more than one screen with a progress tracker. When using this pattern, each screen should show fields that logically belong together. This pattern is also good for saving form progress along the way.

Progressive disclosure

A form can reveal more content as users go through the form and use its fields and controls. This technique can be used when it is not necessary to see all controls unless users have made specific decisions, for example, if they ticked a particular checkbox additional information would be revealed.

Behavior

Validation and error messages

Use validation and error messages to indicate when a form or field submission fails or requires additional information to be shown.

Form validation example showing error messaging placement below each field and the use of red to highlight an unfocused text field that needs an entry.
  1. Unfocused text field

  2. Error message and icon

  3. Focused text field

When a user selects the text field and starts typing or changing content, the focus color changes to blue.

When validating text fields in real-time, message icons will switch depending on the message type. For example, helper text changes into an error message when the content being input doesn't fit the criteria. Error and warning messages disappear when the criteria is met.

Server

Primary buttons are left adjusted in AUI forms.


Was this page helpful?

We use this feedback to improve our documentation.