Forms

A Form is an interactive part of the interface that allows users to enter, edit, or configure information and save it in the system.

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

 

Text Input

To ask for information unique to each user.

Name and surname, street name, phone number, e-mail address. 

Text Input

Text Area 

To collect a descriptive answer, which could be long and span multiple lines.

Comments, notes, special requirements, descriptions of products.

Text Area

Password Input

To ask for private information as it masks the entered characters.

Password, credit card numbers, personal document numbers.

Password Input

Chip Input

To collect multiple entries of the same format.

multiple e-mail addresses

Chip Input

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.

Signature input

Date Picker

To select a specific date.

Start date, end date, date of consumption.

 Date Picker

Date Range Picker

To select a period with a start and end date.

Reservation duration

 Date Range Picker

Month Picker

To select a month, without specifying the exact date.

 

Month picker

Time Picker

To select a specific time.

Arrival, departure time

Time picker

Drop Zone

To upload files from the computer.

Upload room images.

Drop Zone

Stepper

To provide numerical value.

Number of guests, adults, children.

Stepper

 

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

 

Select*

To select one of the pre-defined options from a longer list.

Country, language, nationality,

Select

Multi Select

To select multiple of the pre-defined options from a longer list.
Also comes in a compact variant.

 

Multi Select

Search

To select one of the options not provided to the front-end for performance optimization.

Customer, company, booker.

Search

Toggle

To enable/disable settings or to choose one of two binary options.

Activating modes, blocking values, enabling as default, enabling settings.

Toggle

Radio Button Group

To select one of the pre-defined options from a shorter list.

Sex, title, purpose of stay

Radio button group

Checkbox Group

To select multiple of the pre-defined options from a shorter list.

 

Chekcbox Group

Selection Card Group*

Alternative for Radio Buttons and Checkbox Groups, offering enhanced design.

Payment options, document type.

Selection cards

Tree*

To select one or multiple options from a longer list with a hierarchical structure.

Roles, permissions, properties

Tree

Filter Chips

Alternative to Checkbox Group for short labels only.

Search categories, sizes.

Filter Chips

*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

Don't

Don't

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.

Do

Do

If you're looking for a design alternative to radio buttons choose Selection Cards.

 

Don't

Don't

Don't use different selection controls for questions with similar context and amount of answers in the same form. This increases the user's cognitive load.

Do

Do

For questions with similar context and amount of answers use the same selection control to provide consistent experience ot the user.