Form group

This chapter shows how to integrate different form elements to compose a form.

Form group

This is a fieldset title
Optional description.
Optional description.
Optional description.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.
Optional text input description, at least one sentence.

Usage

ElementClassDescription
div .form__lineBreak As elements in a form group are placed next to each other, a separate div element with this class allows a line break.
.inputGroup__label .is-required Marks the form element as a required field with a red asterisk after the label.
.inputGroup .inputGroup--<size> Sets the size/width of the input group (no dependencies with breakpoints).

The following values are possible, please see graphic below for detailed pixel values:
  • .inputGroup--xxsmall
  • .inputGroup--xsmall
  • .inputGroup--small
  • .inputGroup--smallmedium
  • .inputGroup--medium
  • .inputGroup--mediumlarge
  • .inputGroup--large

Input group sizes

All possible min-widths for input fields
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top