The field module facilitates the layout of a form control and its associated label, plus any other applicable text or sub-controls (e.g. error text or help button).

Unstacked Field

The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.

Multiple fields can be laid out inline by using the span tag with field class, as per the example below.

Replace the span tag with a div tag to layout unstacked fields in blocks, as per the following example.

For a textarea, the label will be vertically aligned to the middle of the field by default. Apply the field--align-top modifier to align it to the top.

Stacked Field

For a label stacked above the control, use the field__label--stacked element modifier.

Again, multiple fields can be laid out inline by using a span tag, as per the example below.

Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.

Field Font-Size

The field label will honour any font-size cascade. Wrap the label and control in a field__group element to maintain vertical alignment.

NOTE: form controls do not inherit the font-size cascade. This is default browser behaviour.

Disabled Field

The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.

TIP: Disabled controls are exempt from WCAG colour contrast requirements.

Readonly Field

A readonly control is conveyed using the readonly attribute. The value of a readonly control is passed to the server.

Required Field

A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.

Invalid Field

An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.

IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.

Field Description

A field may have nearby text to describe additional instructions, status or validation error of the control.

The field__description element defines some minimal styling, but does not dictate location or layout. This element has modifiers for confirmation, information and attention, depending on the type of descriptive text (or icon).

TIP: The description element can be designated as an ARIA live-region if client-side updates occur.

Text on Side of Field

A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.

To change the type of decription you would use field__description--confirmation, field__description--information, or field__description--attention.

Text Below Stacked Field

A description can be placed underneath a stacked field simply by using a block-level tag, such as div.

Text Above or Below Unstacked Field

A description can be added directly above and/or below the control by utlising CSS table-layout via the field--table modifier and field__row elements.

Text Below Floating label

When you use a floating label, you can have the description text below

Listbox Button with Label in Error State

You can use a listbox button as a field. This example includes a label, the listbox button as well an error message with the entire thing in an error state.

Textbox in Error State

You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

Textbox in Error State

You can use a textbox in an error state. This example includes a label, the textbox as well an error message with the entire thing in an error state.

Fluid Field

Form control elements (such as select and input) are inline-block by default, and will only use up as much of their parent's horizontal space as they need.

For a stacked field the control must be set to 100% width (using the fluid utility class) to fill all available space.

The above example shows the fields in a flexbox layout. This layout is created using the field-group helper class. Notice that each field is also set to fluid, in order to fill all available flexbox space (flexbox layout takes care of dividing the space evenly between fluid fields).

If we set the form control width to 100% in an unstacked field, the control would flow to a new line below the label (effectively behaving like a stacked label). This behaviour can be avoided by adding an additional field__group element to create flex layout inside of the field.

TIP: You may want to experiment with sizes other than 100%, and also the flexbox justify-content property.

For a fluid control and description, those elements can be wrapped in a field__group container to create flex layout.

Field Character Count

A field may have a character count section typically under the input and aligned to the right.

This variant adds a top-level container that houses both the field description and the character count, though field description or error is not necessary.

In order to be accessible, the character count should have a clipped element to describe what it is. At the same time, aria-describedby should be added to the input element that points to the character count element. Finally, aria-live should be off by default, but if it passes the current max characters, then it should be changed to polite. Once it goes back down below the max, it should go back to off.

Field with Character Count Only

Character character can be added by utlising CSS grid via the field__description--group modifier and the addition of the relevant markup. By default if there is only one element in the group, it will align to the right

Field Description and Character Count

A field description (or error) and character count can be added by adding an element before the field count. It will left align the description and right align the character count.

Field Description and Character Count with Text area

A field description (or error) and character count can also be added to a text area. Use similar markup as before but add a textarea element.