Forms

Pattern Status

---

Overview

A Form is a group of inputs and selection controls that allows users to provide data or set preferences. Forms can appear directly on a page, in panels, or in overlays.

 

When to use

• User registration and login: Collect usernames, passwords, and emails; verify credentials.
• Surveys and feedback: Gather opinions and survey responses.
• Contact and support requests: Allow users to reach out for support.
• Booking and reservations: Collect details to confirm and manage bookings.
• Profile updates: Let users update personal information, preferences, and settings.

When not to use

• Limited user context: If the Form is not relevant to the user’s current context or task, it can disrupt the user experience. Make sure that Forms are contextually appropriate and placed where users expect them.

 

---

Types

Simple

Simple forms are short groupings of related inputs that answer a single question or task. They typically appear in a dialog or panel.

Common simple forms in Mews include resetting a password, updating a single user preference or setting, and creating a simple entity.

 

Sectioned

Sectioned forms are organized into chunks, each with a clear section heading, to help users quickly scan and understand the questions.

Use a sectioned form when you need to ask multiple questions. For example, inviting a new user includes sections such as User Details, and Roles and Permissions.

Sectioned forms should display on a single screen with a clear primary call to action. For forms that become too lengthy and complex, consider using a multi-step form.

 

Multi-step

Multi-step forms distribute fields across multiple steps, supported by a Progress Indicator. Each step groups related fields with a clear linear flow.

Multi-step forms should include:

• Form title
• Clear section titles
• Progress indicator

Upfront instructions

Since users cannot scan the whole flow ahead, provide clear instructions on the form for required documents or legal requirements, using section descriptions or a Banner.

For example, when checking in online, guests will need to have their passports nearby. During the KYC process, Mews customers must have their legal identification ready to scan. 

 

Avoid multi-step forms for settings

Settings should generally remain on a single screen with clear sections; use multi-step forms only when absolutely necessary.

 

---

Pattern Implementation

Follow these tips to build forms that are easy to scan, understand, and complete.

Clear information hierarchy

Use section titles, headings, and consistent spacing to help users quickly scan and understand the required information.

 

Single-column layout

Place fields in a single column to make forms easier to scan top-to-bottom and reduce cognitive load.

 

Progressive disclosure

For complex forms, show conditional fields in a separate step, such as by using a Progress Indicator. This guides users to focus on key details, keeps the workflow simple and organized, and prevents them from feeling overwhelmed.

 

Related fields

Short related fields can be placed on one line (max. 2–3) to minimize eye movement and maintain a tidy layout.

 

Helper Text vs. Tooltips

Always favor using Helper Text over Tooltips. Tooltips require hover, are less accessible, and increase UI complexity.

Use Tooltips only when absolutely unavoidable (e.g., legacy backend cases or long explanations that don’t fit helper text).

Before using a Tooltip, consider alternatives such as section descriptions, helper text, or placeholders (for non-critical information only).

 

Spacing

• Use a standard vertical gap of 24px between elements.
• Use a 32px gap between sections.
• Use an 8px gap between fields in rows with more than one input.
• Link spacing with Design System tokens.

 

Anatomy

---

Actions

• Button Hierarchy: Buttons are sorted by importance from right to left, with the most important Button (primary) on the right.  
• Placement: Use a sticky footer (on page or panel level) to keep actions always visible when content scrolls. Avoid top-pinned submit buttons to respect reading direction and not confuse users.
• Disable Buttons: Never disable the submit button, even if not all the required fields are filled in. Use validation messages or inline errors instead.

 

---

Feedback and Validation

• Server-side validation: Show an Alert at the top and inline error messages in relevant fields. Inline messages should disappear once the criteria are met.
• Successful validation: Display a temporary success Alert confirming completion. Avoid using the word “successfully” if possible.
• Help information: Use a Banner component for general guidance.
• Leaving without saving: When users try to leave a form with unsaved changes, show a confirmation Dialog before discarding their input.

 

---

Best Practices

• Establish a clear hierarchy with headings and spacing.
• Use progressive disclosure for optional or conditional fields.
• Support fast comprehension and prevent missed fields by keeping layouts linear and visually clear.
• Prefer helper text over tooltips.
• Use multi-step intentionally and cautiously.
• Don’t use editable fields just to display information, opt for list view or read-only variant.

 

---

Accessibility Considerations

• All input fields must have visible, descriptive labels.
• Ensure logical focus order; single-column layouts help with this.
• Use clear, accessible inline error messages; associate them with the field using aria-describedby.
• All form controls and buttons must be operable via keyboard.
• Avoid relying on tooltips; provide accessible alternatives via helper text or section descriptions.