Form
Open in Storybook Open in Figma
This page describes how to assemble individual Inputs and labels into forms.
Rules For Accessibility
- For complex forms add instructions on top of the form to help users understand how to correctly complete the form.
- Provide instructions to help users understand how to complete individual form controls (like in which format dates should be typed in).
- Validate the user input and provide options to undo changes and confirm data entry.
- Divide long forms into multiple smaller forms that constitute a series of logical steps or stages and inform users about their progress.
Grid & labels
Form input fields and their labels need to be placed in grids so they behave properly in all Bootstrap tiers.
- Use
.rows without a.containeraround it to avoid the form to be indented left and right. - Use a
.row.form-groupand 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-labelclass and a.col-*sizing class. - The second column is a
<div>that contains the actual inputs. It also needs a.col-*classes as usual.
Rules For Developers
- Each input field needs a label. Use a
<label>tag with the ‘for’ attribute to correctly assign the label to the input. This label is not necessarily the one displayed in the first column, as e.g. a checkbox may have its label appended. - If we display read-only text instead of an input field, we must use a fake label, i.e. no
<label>element, as there would not be an<input>element to associate it with. - Group and associate related form controls with
<fieldset>and<legend>.
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.
‘To-the-left’ labels
In this default type of labels in forms of all kind in George.
Rules For Designers
- Labels are left-aligned and presented in semibold 600.
- Labels and their input field are placed using a 4-8 bootstrap grid.
- Input fields fill 100% width of their cell.
- On
XS/SMtier, ‘To-the-left’ labels automatically turn into ‘Above’ labels.
‘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 Bootstrap tiers:
Rules For Designers
- Labels are left-aligned with the border of the input field below.
- Input fields fill 100% width of their cell.
- Vertical spacing between label and input field is 10px.
- Vertical spacing between the input field and the following label 25px.
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 PrimaryButton to the first position on small devices.
Rules For Designers
- Vertical spacing between Form elements and Buttons should be 30px
- Buttons should be of large size
- Buttons should be right-aligned on desktop, with PrimaryButton being in the last position
- On small devices, PrimaryButton should appear first, before every other Button
Rules For Developers
- Buttons should be of large size
- Buttons should be right-aligned on desktop, with PrimaryButton being in the last position
Horizontal form spacing
There are two kinds of spacings when using forms.
The default larger spacings that 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:
Rules For Designers
- There is a 40px spacing between regular rows (label-to-label). This results in a 16px spacing between input fields.
- There is a 20px spacing between compact rows (label-to-label).
- Too long label texts are ellipsed (…).
- Only labels and amounts are semibold 600.
Captions
This section handles optional small texts below an input field that may contain help or additional information about that field:
Rules For Designers
- Explanation text is added below an input field.
- There is 10px spacing between the input field and explanation text.
Rules For Accessibility
- While it is tempting to think the caption is attached to the input field by providing a reference (either with the
aria-labelledbyor thearia-describedbyattribute), in this casearia-detailsis used, because the content of the caption may get quite long, and rich content may be used. - Due to the use of
aria-details, the caption has no impact on the accessible description, so it is not announced by assistive technology while the focus is on the input field. Hence the caption should not contain information that is required to know while the user is typing.
Error handling
Error messages for individual input fields (as opposed to the overall form) should be placed directly following the input field using small Alerts.
Rules For Accessibility
- Notify users about successful form completion as well as input errors.
- Use the ARIA role ‘alert’ to notify the user without them having to focus the element holding the message.
- Provide instructions to help the user correct mistakes.
- Assign the instructions to the input that caused the error by adding
aria-describedby="id-of-error-container"to the input field.
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.
Rules For Designers
- The padding in a large FormField is 16px.
- The input in a large FormField is bold and it has a font-size of 40px.
- When placed inside the input, the label is semibold 600 and it has a font-size of 14px.
Description
In the large variant it’s also possible to add the description (rich text) in a small section visually located inside the input.