Form and form elements

A form allows the user to input data.

Usage

When to use

Use a form in the following cases:

Use forms to collect information from the user.

Types

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.

form-usage-text-field — Single text input

Textarea

A textarea is a multiline text input that allows the user to enter long text.

Selection controls

Checkbox

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.

Radio button

Use a radio button group when you want the user to select a single option from a short list. If you have more than ten options, consider using a select instead. Use a description text to give more explanation.

Switch

Use a switch to visualize the selection of binary states, for example “On” or “Off”.

Select

Use a select to let the user choose from a set of multiple choices.

Fieldset

A fieldset visually groups related form elements. The fieldset can only be used in forms. Fieldsets shall be used to structure complex forms within logical groups. Fieldsets are not mandatory but their use is considered best practice.

Don’t mix form content without fieldsets with form content contained in fieldsets within a single form to create consistent forms.

form-usage-types-fieldset-noncollapsible — Fieldset

General construction

A form consists of the following elements:

UI elements, 2. Required field and indicator, 3. Submit buttons

1. UI elements

UI elements are disabled if not currently needed.
Various UI elements are described in the types section above.

2. Required field and indicator

Mandatory input fields are marked with an asterisk.

3. 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.

Fieldset

A fieldset visually groups related form elements.
It can only be used in forms.
Don’t mix form content with fieldsets and form content without fieldsets.

Use a fieldset in the following cases:

When there is a relation between multiple inputs and controls.
When actions affect multiple control elements.
When a form is too complex to be represented or filled out in one single step.

Title, 2. Description, 3. UI elements, 4. Fieldset

1. Title

A title is mandatory.

2. Description

A description is optional but recommended.
The description gives context information about the contained control elements.

3. UI elements

A fieldset contains multiple UI elements.

4. Fieldset

A fieldset visually groups all contained elements.
The fieldset is visually related to the container. It inherits nearly all options of the container, though a fieldset can never be a simple container without title and it does not have content actions.

Layout

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.

Progressive disclosure

Keep the form as simple as possible. Reveal more input controls only when they are needed.

Behavior

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.

Style

This chapter shows form styles in the User Experience Toolkit.

Overview

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:

Type	Property	Spacing
Input controls	margin-bottom	16px
Form submit actions	margin-bottom	16px
Additional whitespace for visual separation of unrelated controls	margin-bottom	+ 8px

Form

<form novalidate="" autocomplete="off">
    <!-- Form elements, e.g. fieldsets, form-groups, etc., go here -->
</form>

It is considered best practice to structure a form (and/or complex forms) within logical groups. The 'fieldset' element is the appropriate element for such grouping.
A form can be used without fieldsets, but you must not mix form content with fieldsets and form content without fieldsets.

Fieldset

Fieldset title

Here goes the form content for this fieldset with fieldset class.

<div class="fieldset">
    <div class="legend">Fieldset title</div>
    <div>Here goes the form content for this fieldset with fieldset class.</div>
</div>

Fieldset title

Here goes the form content in a native fieldset.

<fieldset>
    <legend>Fieldset title</legend>
    <div>Here goes the form content in a native fieldset.</div>
</fieldset>