Form

Form is a pattern for collecting and sending data to the system. It always consists of different types of inputs and controls.

Use one size of inputs and controls in the form.

Input should have a text label.

• Font weight should be regular. In cases when you need an extra accent fo the input's label you can use bold font-weight.
• Do not put a colon after the text label.

In cases when you need to save space and if it is clear from the context what data should be entered into the input, you can use only placeholder for the input.

You also can mark the input as an optional.

In cases, when the form is centered on the page, input labels can be right-aligned.

Placeholders are required to prompt the user about what data should be entered.

• It is not user-friendly to use only placeholders for inputs. When completed, such form becomes poorly readable.
• Do not put a specific value as a placeholder. The user may think that the input has already been filled.

You may not add a placeholder only if the input’s purpose is obvious.

To format values that the user enters use InputMask.

After opening the form the first input should get the focus.

The main denominator in the design system is 4. All margins between the components and widgets shall be a multiple of this denominator. See Spacing system for more information.

See detailed information about the form validation in Validation.

Depending on your task, you can use vertical or horizontal form layout.

Briefly:

• vertical layout is good for short simple forms and forms for mobile screens;
• horizontal layout is suitable for complex forms, where you need to slow the user down in order he/she do not make mistakes.

When to use?

• The form is small and simple.
• “Price of the mistake” after completing the form is not big.

Advantages of vertical form layout

• It is quicker to be completed (see the research).
• It is simpler to be scanned with eyes.
• It is ideal for multilingual interfaces.

Disadvantages of vertical form layout

• It needs more vertical space.
• It is not an ideal solution for large forms (and the complex ones).

When to use?

• The form is large and/or complex, and you need to slow the user down in order he/she do not make mistakes.
• “Price of the mistake” after the completion of a large form is significant.

Advantages of horizontal form layout with left label alignment

• It can be compact (take less vertical space, unlike the forms with vertical layout).
• It claims more user’s attention.

Disadvantages of horizontal form layout with left label alignment

• It needs more horizontal space.
• It takes more time to complete (see the research).
• It is less suitable for multilingual interfaces.

When to use?

• The form is large and/or complex, and you need to slow the user down in order he/she вщ not make mistakes.
• Right alignment of labels visually better connects labels with inputs, in comparison with left alignment.

Advantages of horizontal form layout with right label alignment

• In view of visual connection between the label and the input this variant is better than the previous one.
• Higher results of filling rate, in comparison with the previous one (see the research).
• It can be more compact in comparison with the forms with vertical layout.

Disadvantages of horizontal form layout with right label alignment

• Such forms are more difficult to be scanned and read (labels are right aligned, user needs more time to find the beginning of the following line).
• It is less suitable for multilingual interfaces.