Overview
Selecting the proper form component is crucial for a smooth user experience. The component should always fit the purpose and allow the user to provide an answer as quickly and efficiently as possible.
In MDS, we provide a variety of form components, including Text Inputs, Data Inputs, and Selection Controls.
Text Inputs
Inputs are free-form fields that require users to enter data themselves. They should be used when predicting or offering alternative answers is impossible.
|
Component type |
Purpose |
Examples of use |
|
|---|---|---|---|
|
To ask for information unique to each user. |
Name and surname, street name, phone number, e-mail address. |
|
|
|
To collect a descriptive answer spanning multiple lines. |
Comments, notes, special requirements, product descriptions. |
|
|
|
To ask for private information, masking entered characters. |
Passwords, credit card numbers, personal document numbers. |
|
|
|
Chip Input |
To collect multiple entries of the same format. |
Multiple e-mail addresses. |
|
Data inputs
These components allow users to provide data in a specific format.
|
Component type |
Purpose |
Examples of use |
|
|---|---|---|---|
|
Signature Input |
Capture finger or mouse motion as a graphical signature. |
User’s signature. |
|
|
To select a specific date. |
Start date, end date, date of consumption. |
|
|
|
To select a period with start and end dates. |
Reservation duration. |
|
|
|
Month Picker |
To select a month without specifying an exact date. |
Billing month, event month. |
|
|
To select a specific time. |
Arrival, departure time. |
|
|
|
Drop Zone |
To upload files from the computer. |
Room images, documents. |
|
|
To select a numeric value using increment/decrement controls. |
Number of guests, adults, children. |
|
Selection controls
Selection controls allow users to choose from predefined options, simplifying input. Use the decision tree to determine the best control for your use case.
|
Component type |
Purpose |
Examples of use |
|
|---|---|---|---|
|
To select one option from a pre-defined long list. |
Country, language, nationality, |
|
|
|
Also comes in a compact variant. |
Multiple languages, classifications. |
|
|
|
Search |
To filter and select a single option from a list that was not preloaded on the front end to optimize performance. |
Customer, company, booker. |
|
|
To enable/disable settings or to choose one of two binary options. |
Activating modes, blocking values, enabling as default, enabling settings. |
|
|
|
To select one of the pre-defined options from a short list. |
Sex, title, purpose of stay. |
|
|
|
To select one or more pre-defined options from a short list. |
Preferences, amenities. |
|
|
|
Alternative for Radio Buttons and Checkbox Groups, offering enhanced design. |
Payment options, document type. |
|
|
|
Tree* |
To select one or multiple options from a hierarchical list. |
Roles, permissions, properties. |
|
|
Filter Chips |
Alternative to Checkbox Group for short labels only. |
Search categories, sizes. |
|
Components marked with * can be set as single or multi-selection controls.
Selection Controls decision tree
When you are unsure which selection control best suits your use case, this decision tree flow will help you narrow down your options and choose the component that will ensure a good user experience.
Dos and Don’ts
Do not use Segmented Control as a form component. While some Design Systems indeed use it as an alternative for radio buttons, in MDS, it serves a different purpose.
If you're looking for a design alternative to Radio Buttons choose Selection Cards.
Do not mix different selection controls in similar questions, as it increases cognitive load.
Keep selection controls consistent across questions with similar context and the same number of answers.