When to use
Use a form in the following cases:
- Use forms to collect information from the user.
A form consists of the following elements:
- A fieldset visually groups related form elements. For further information, see chapter Fieldset.
2. UI elements
- UI elements are disabled if not currently needed.
- Various UI elements are described in the types section below.
3. Required field / optional field and indicator
- Mandatory input fields are marked with an asterisk.
- If the majority of user inputs are required, tag only the optional ones with an additional optional label.
- Stay consistent with one rule within one app.
4. Submit buttons
- Use a primary button for the main action and a secondary or ghost button for alternative actions.
- The submit buttons under a form should be left aligned with the primary button at first.
- For further information, see chapter Button.
Arrange input controls in one column. User inputs that are directly related may be placed next to each other. For example postal code and city.
Keep the form as simple as possible. Reveal more input controls only when they are needed.
There are the following UI element types:
Text input controls
Text input elements have a top aligned label. They can also have an optional placeholder text and a description.
Single text input
Use a single text input to limit the amount of text to enter. You should specify the expected format in the title, such as number or email address.
A textarea is a multiline text input that allows the user to enter long text.
Use a checkbox group to allow users to select no, one or more options. The group label informs the user about the topic of the group. The checkbox label informs the user what will happen if the box is checked. Checkboxes and the checkbox group can have a description text for explanation.
Use a radio button group when you want the user to select a single option from a short list. If you have more then ten options, consider using a select instead. Use a description text to give more explanation.
Use a switch to visualize the selection of binary states, for example “On” or “Off”.
Use a drop-down list to let the user choose from a set of multiple choices.
Form validation is explained in the chapter Form validation.
Do’s & Don’ts
- Use labels to give input controls a title.
- Never label input fields inside the placeholder text. With user input the placeholder text is hidden.
- Fit the field size to the expected content.
- Don’t use one field size for all input formats.
This chapter shows form styles in the MindSphere Design System.
Also see chapter Form validation and Typography for the use of the different font sizes and font styles.
Sizing and spacing
The following measurements show the dimensions for forms:
|Form submit actions||margin-bottom||16px|
|Additional whitespace for visual separation of unrelated controls||margin-bottom||+ 8px|