Skip to main content

Forms
ready

A form is a set of related input fields or control elements that allow users to input data, submit information, and configure options.

The form pattern can be configured to suit various contexts. Forms are not limited to specific locations within an interface but can be seamlessly integrated into various UI components based on the design and functional requirements, such as pages, dialogs, sidebars, and others. It is up to designers and developers to adapt the form pattern to their particular needs.

Anatomy of a form​

Redline callouts for form anatomy

Typically includes the title and description of the form. This section provides users with context about the purpose of the form and sets the stage for the information they are about to provide.

Body​

Main section of the form where users input and provide information. This is where you place the form elements such as input fields, checkboxes, radio buttons, or any other elements required to collect the necessary data. The Body is the core of the form, and its layout and design should be organized for clarity and ease of use.

Action bar​

Typically appears at the bottom of the form or near the primary interaction area. It contains buttons or actions that users can take to complete or manipulate the form. Common actions include "Submit," "Save," "Cancel," or any other actions relevant to the form's purpose. The Action Bar is a critical element for user navigation and interaction with the form.

Common form elements include:​

  • Text Fields: For entering short text, such as names, email addresses, or passwords.
  • Textarea: For longer blocks of text, like comments or messages.
  • Checkboxes: For selecting one or more options from a list.
  • Radio Buttons: For selecting a single option from a list.
  • Dropdown Menus/Select Boxes: For choosing one option from a list of predefined options.
  • Buttons: Such as submit buttons to send the form data or reset buttons to clear the entered information.

Forms can also contain other elements such as switches, sliders, etc.

Styling​

  • Form elements are left aligned. This promotes readability and follows the natural reading flow in many cultures.
  • Components are vertically stacked, and there is 16px of padding around each component. This spacing enhances the visual separation between components and provides a consistent and aesthetically pleasing layout.
  • The padding between the form title and the body, between the action bar and the body, and between two different sections of the form is set to 40px. This additional spacing helps create a clear visual hierarchy and prevents elements from feeling cramped.
Redline callouts for form spacing

Buttons​

Use one primary button per form​

Using one primary button per form helps users clearly understand the main action they need to take to complete a form while minimizing the risk of unintended consequences from secondary actions.

A single primary button clearly communicates the main action users are expected to take. Whether it's saving, submitting, or progressing to the next step, users know exactly what will happen when they click the primary button.

Left align primary buttons with the form container​

Western languages are read from left to right. Placing the primary action button on the left aligns it with the natural reading flow, making it easier for users to locate and understand the main action associated with the form. Left-aligned primary buttons contribute to better accessibility by providing a consistent and expected layout. Users with visual impairments or those using screen readers benefit from a standardized design pattern.

Place destructive actions such as Cancel or Discard in the top right corner and trigger a modal window to confirm the action. Placing destructive actions away from the main content and in a location where users don't typically interact for positive actions reduces the likelihood of accidental clicks. This helps prevent users from triggering irreversible actions unintentionally. Triggering a modal window for confirmation adds an extra layer of safety.

It's important to note that these principles may not apply universally, and context matters. In some cases, right-aligning buttons or centering them might be appropriate, depending on the design goals and user expectations within a specific cultural or application context. Ultimately, usability testing and user feedback can help determine the most effective button placement for a particular design.

Layout​

One column​

Organize the main form body using a one-column layout. Place related controls and input fields in a logical order, considering the natural flow of information.

Arrange form elements in a logical order to aid scanning and completion. Group related controls together to visually indicate their association. Use whitespace or visual dividers to create clear distinctions between different groups of controls. Add a heading if necessary to provide context for each group.

What to include​

  • Only ask for essential information to reduce effort and make the form-filling process more straightforward.
  • Use progressive disclosure to reveal information gradually as needed. Show advanced options on demand.
  • Only mark fields as required if absolutely necessary. This helps reduce friction in the form completion process. Use an asterisk (*) to highlight mandatory fields, ensuring users can quickly identify and fill in the essential information.
  • Use smart defaults whenever possible. Suggested options should align with and serve the interests of the majority of users.

Handling and preventing errors​

  • Provide clear and concise instructions for each form field. Use labels that are easy to understand and ensure they align with user expectations. Well-crafted labels contribute to a user-friendly experience.
  • Use inline validation to provide real-time feedback on user input
  • Use color coding, icons, or descriptive messages to convey validation results
  • Use default values for fields where appropriate to save users time. Pre-fill fields or default to common choices when possible.
  • Highlight the specific fields that need attention and provide clear instructions on how to correct errors. Implement user-friendly error messages and validation that guides users on how to correct mistakes.
  • Allow users to save their progress and continue later. This is especially important for longer or more complex forms.
  • Clearly communicate any errors or issues with form submissions.

Don’ts​

  • Never disable submission buttons.
  • Avoid overly long forms whenever possible. Breaking the form into smaller, manageable sections using multistep forms or accordions helps maintain user engagement.
  • Use modal windows sparingly. Modal windows should be used judiciously to avoid disrupting the user's flow. While they can be effective for certain interactions, overusing them can lead to a disjointed user experience. Reserve modal windows for critical tasks or information that requires immediate attention.

Variants​

Full-page forms​

Best suited for complex, standalone workflows or critical configurations.

Characteristics​

  • Typically for situations where the user is engaging in a comprehensive or critical task that requires a dedicated and immersive experience.
  • Suitable for forms with a larger number of fields, complex input requirements, or workflows that demand the user's full attention.
  • Offers ample space for instructions, contextual information, and visual elements.

Dialogs​

Best suited for forms no longer than 5 fields that are part of a larger workflow or user journey, or a longer form.

Characteristics:​

  • Ideal for brief interactions where users can quickly complete a form without leaving the current context.
  • Typically appears as a pop-up or overlay within the current screen, maintaining a connection to the larger workflow or journey.
  • Useful when collecting a small amount of information without requiring a full-page transition.

Drawers​

Best suited for forms longer than 5 fields that are part of a larger workflow or user journey, or a longer form.

Characteristics:​

  • Similar to dialogs, but often provides more space for longer forms or more extensive workflows.
  • Appears as a side panel or drawer, expanding horizontally or vertically from the edge of the screen.
  • Suitable for collecting more information without fully taking the user away from their current context.

Designing long forms​

Designing long forms can be challenging, but there are several strategies we can employ to make them easier to complete and reduce user errors.

Break the form into sections​

Divide the long form into logical sections or steps. Each section should focus on a specific set of related information. This approach makes the form more manageable and helps users mentally organize the required information.

Accordion pattern​

Implement the accordion pattern to reveal information gradually. Group related sections, and let users expand or collapse each section as needed. This helps maintain a clean and focused interface while allowing users to explore additional details selectively.

Inline additions​

Hide additional fields from people who don’t need them (e.g. in the Reporting form, the "Add another dashboard" button reveals an additional set of input fields on demand).

  • Add a "Add More" or similar button next to a section or set of fields.
  • When users click the button, dynamically generate additional fields for their input.
  • This approach keeps the form concise initially but allows users to expand it as necessary.

Dynamic forms (Progressive disclosure)​

Employ conditional logic to show or hide specific fields based on user input or selections. This helps personalize the form, displaying only the relevant information to the user (e.g. the Schedule page of the Reporting form).

Implementation:​

  • Identify fields that may not be applicable to all users.
  • Use conditional logic to hide these fields until certain criteria are met (e.g., user selects a specific option).
  • Provide clear indications or tooltips for users to understand when and why certain fields are hidden.

Use cases:

  • For focused tasks or workflows that temporarily overlay the main content.
  • Collecting input for a specific task or decision point.
  • When you need to present a set of related options, configurations, or settings that are closely tied to a specific task or action.
  • For scenarios where the additional options may affect the entire user interface or application state.

Considerations:

  • Ensure that the modal content is well-organized, with clear navigation or categorization of options.
  • Consider providing a summary or preview of the changes before applying them.
  • Modal windows may interrupt the user's flow, so use them judiciously, especially for less critical actions.

Drawers (Side panels)​

Use cases:

  • Displaying additional options or settings without fully obscuring the main content.
  • Providing a persistent space for additional controls or navigation elements.
  • Enhancing the overall user experience by allowing users to access supplementary information while staying within the main context.

Considerations:

Drawers are often used for less intrusive interactions that don't require the full attention of the user. They can be beneficial for displaying additional options, settings, or information without disrupting the primary workflow. Drawers are particularly useful in responsive designs, adapting to different screen sizes.

Advanced options expander​

If a form has many advanced options that not all users need, consider placing them in an advanced option expander section.

Include a "Show advanced options" link or button. This feature allows users to access optional controls or features that may not be immediately relevant to everyone. This is particularly beneficial for power users or those who seek more customization.