Forms

Usage

Forms are sets of components designed to gather information from users. They can be either simple or more complex, depending on the context and the amount of data required.

Forms play an important role in user interfaces and serve various purposes. Forms continue to be an essential part of user interactions, such as allowing users to:

• Create or access an account
• Register for a service
• Complete surveys
• Make purchases
• Share feedback

Respect the privacy of the user (GDPR)

It's essential to prioritize data privacy and security, especially with the impact of regulations like GDPR (General Data Protection Regulation). Designing forms that comply with these regulations helps protect user data and create trust with users.

In summary, well-designed forms ensure a smooth user experience while safeguarding sensitive information, maintaining compliance with privacy laws like GDPR.

Formatting

Anatomy of a form

A – Titles: Titles are a important element in form design, as they provide users with essential context and guidance when interacting with a digital application.B – Labels: Input labels guide users on the expected content for each field, ensuring clarity.
C – Text inputs: These fields enable users to provide free-form text, such as entering names, comments, or messages.
D – Data inputs: Besides text inputs, users can enter information through various non-free form fields, like checkboxes, radio buttons, dropdowns, file uploaders, date pickers, and toggles. For more detailed information and visuals, refer to the individual component pages.
E – Help: In-context guidance, such as tooltips, placeholder text, or helper text, assists users in providing accurate information.
F – Buttons: These elements allow users to submit or exit a form, providing clear actions for their interactions.

Data inputs

Data inputs are elements that allow users to make choices from predefined options or within a limited range. We offer a range of data input components, each designed for specific use cases.

Selection controls present users with predetermined choices. To choose the right component, consider the number of options and how many items users can select. Common selection controls include checkboxes, radio buttons, file uploaders and select lists.

Input control usage

When designing your form, it's important to use the appropriate input controls for different scenarios. Here are some common controls and their typical usage:

Control	Usage	Context
Checkbox	To select or deselect one or more choices.	Agreeing to terms and conditions, adding optional items, selecting multiple options.
Radio Button	To select only one option from two or more choices.	Choosing the type, shipping method, or any exclusive selection.
File Uploader	To upload or attach a file or multiple files to a form.	Adding more context or detailed information.
Multiselect	To select multiple items from a longer list.	Adding multiple products or options to a form.

Bound entry controls

Bound entry controls are designed to enable users to input specific numeric data, such as dates and times, while restricting invalid input. These controls rely on both keyboard and mouse interactions and ensure that only valid entries are allowed, eliminating the need for field validation.

Common bound entry controls include

Accessibility

Autofocus the first field by default. This helps users navigate the form in a logical way. Avoid disabling the submit/save button, even if all required fields are not filled in. Instead, use validation and error messages to guide users on what needs to be done."

Multi-step forms

Ensure users are aware of their progress through each step of the form. This method divides form fields across multiple screens with a progress tracker. Each screen should display related fields. This approach also helps in saving form progress.

Button Best Practices

Choose a primary button for the main action that stands out, and opt for secondary buttons for actions like "Cancel" or "Discard" that have less prominence.

Align buttons strategically based on your form's layout and design. Always position the primary action to the right or center aligned if the layout is center aligned with the primary action closest to the form's end.

In side panels, dialogs, or forms within tiles, allow the button group to span the full width, ensuring buttons bleed to the bottom edge. If content length becomes an issue, stack buttons vertically, maintaining their margin and padding. Refer to the button usage guidance for further details.

Best practice for Forms

1. Keep It Simple: Prioritize simplicity and clarity in form design to enhance usability and reduce user friction.
   
2. Button Alignment: Align buttons to the left or right based on the form's flow and user expectations. In line with UX best practices, position the primary action to the right. For center-aligned layouts, center-align the buttons with the primary action closest to the form's end.
   
3. Clear Instructions and Error Messages: Provide concise guidance and error messages to assist users in completing the form accurately.
   
4. Proper Validation: Implement validation to prevent errors and improve data accuracy during form submission.
   
5. Responsive Design: Ensure your forms adapt well to different devices, optimizing user interactions on various screen sizes.
   
6. Minimize Form Fields: Limit the number of form fields to make the user's task less overwhelming and improve completion rates. If necessary, consider dividing it into a multi-step form for enhanced user engagement and ease of completion.
   
7. Accessibility: Ensure that your forms are accessible to all users, including those with disabilities, by following best practices for web accessibility.

By following these tips, you can create user-friendly and efficient forms that enhance the overall user experience in your design system.