Selecting proper form components is crucial for a smooth form’s user experience. The component should always fit the purpose and allow the user to provide an answer as quickly 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 the 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, which could be long and span multiple lines. |
Comments, notes, special requirements, descriptions of products. |
|
|
|
To ask for private information as it masks the entered characters. |
Password, 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 of a specific format.
|
Component type |
Purpose |
Examples of use |
|
|---|---|---|---|
|
Signature Input |
To register 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 a start and end date. |
Reservation duration |
|
|
|
Month Picker |
To select a month, without specifying the exact date. |
|
|
|
To select a specific time. |
Arrival, departure time |
|
|
|
Drop Zone |
To upload files from the computer. |
Upload room images. |
|
|
To provide numerical value. |
Number of guests, adults, children. |
|
Selection controls
Selection controls provide users with pre-defined options for easier and quicker data entry. As we provide multiple alternative components, please refer to the decision tree in order to choose the best fitting one for your use case.
|
Component type |
Purpose |
Examples of use |
|
|---|---|---|---|
|
To select one of the pre-defined options from a longer list. |
Country, language, nationality, |
|
|
|
To select multiple of the pre-defined options from a longer list. |
|
|
|
|
Search |
To select one of the options not provided to the front-end for performance optimization. |
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 shorter list. |
Sex, title, purpose of stay |
|
|
|
To select multiple of the pre-defined options from a shorter list. |
|
|
|
|
Alternative for Radio Buttons and Checkbox Groups, offering enhanced design. |
Payment options, document type. |
|
|
|
Tree* |
To select one or multiple options from a longer list with a hierarchical structure. |
Roles, permissions, properties |
|
|
Filter Chips |
Alternative to Checkbox Group for short labels only. |
Search categories, sizes. |
|
*Component properties allow to set it up as a single or multi-selection control
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
