Form

Open in Storybook Open in Figma

This page describes how to assemble individual inputs and labels into forms.

Grid

Form input fields and their labels need to be placed in grids so they behave properly in all tiers.

• Use .row without a .container around it to avoid the form to be indented left and right.
• Use .row.form-group and in it two columns (label, input).
• The first column is either an actual <label> or a fake one, depending on whether labelling the element in the second column is allowed. It must have the .col-form-label class and a .col-* sizing class.
• The second column is a <div> that contains the actual input(s). It too needs .col-* classes as usual.

Single-column

In George, forms are usually single column where there is each input field (and its label) in each line. This kind of form uses ‘To-the-left’ Labels (see below).

Two-column

In some rare cases (e.g. the address book), there are two columns per line. In this case, you need to set a grid to make all input fields properly rearrange on small devices. This kind of form uses ‘Above’ Labels (see below) and requires the use of a .row.g-form-multicol row containing two .col-*-6 columns, which then contain the individual .row.form-groups. In these form groups, both the label and the input fields are set in using .col-12. This nested grid is necessary to make all spacings uniform across all tiers and other kinds of forms in other cards on the same page.

Labels

‘To-the-left’ labels

In this default type of labels in forms of all kind in George.

‘Above’ labels

In this case, the label is above the input field. They are only used in two-column layouts or when ‘To-the-left’ are shown on smaller tiers:

Spacing

There are two kinds of horizontal spacings when using forms.

The default larger spacings are fine when mixing text lines with larger input fields.

When no input fields are used, the default spacings might be too large. They can be avoided by adding the .g-form-compact class to each row. However, those tighter spaces are incompatible with input fields and can only be used in summary pages that feature only text:

FormField

Every Form has one or many FormFields. At the very least, a FormField comes with a label and an input. The input determines what the user should enter/select, and at the same time is the primary driver for the FormField’s overall look. Many props exist that change the appearance further, most notably variant, labelColumnWidth, and labelPosition (in charge of the already covered label placement). And then there are boolean props like required, disabled, and invalid.

It does not stop there, many more things can be configured, which when present will orbit around label and input: A description, small alerts, an interactive addOn, and more.

Description

This section handles optional small text below an input field that may contain help or additional information about that field:

Alerts

Error messages for individual input fields (as opposed to the overall form) should be placed directly following the input field using small Alerts.

Large variant REACT-ONLY

In the large variant of a FormField, there is a larger input box and the label can be positioned above, aside or inside it.

Just like regular FormFields, lthe large variant can also have a description (rich text), specified via the description prop. However, unlike regular FormFields, the description is no longer placed underneath, but is now displayed as a small section inside the input.

Add-on REACT-ONLY

An interactive add-on can be added to a FormField, usually a Button or a Link. The visual placement of the add-on on screen is highly responsive and determined by the overall configuration of the FormField.

HINT Do not confuse FormField add-ons with InputGroup add-ons. A FormField can have an add-on, and its input can be an InputGroup that itself has add-ons. The former is always visually separated from FormField’s label and input.

Buttons

To properly group Buttons, a ButtonGroup with the modifier .g-group-button-form should be used. This automatically sets the right margins and pulls the primary button to the first position on small devices.