Forms

Summary

Forms are used to collect user input and configure options of a task the user is completing.

Status

Examples

Code

HTML

Forms are constructed with a root element (form.aui), containers (commonly for rows), then various input or button types within those containers.

Commonly, there will be a set of fieldsets and field group elements (depending on the input type contained); and in almost all cases a buttons container at the end. Remember all inputs should have a label, it makes them more usable and accessible.

A simple example including a required field:

Text inputs

Textareas

Radio Buttons

Radio buttons a11y guidelines

Side note: whether you'd follow these guidelines or not, it's always advised to at least test your markup with a screen reader software.

• Keep radio button's labels short and descriptive.
• (If applicable) Start all labels with a capital letter.
• Don't include punctuation at the end of labels.
• Provide unique labels for each radio button. This will ensure that screen reader users can understand the purpose of them when read out of context.
• When a form is submitted with invalid data:
  • Ensure that error text is not visible by default. It should be available only after the form submission.
  • Set focus on the first field with error as soon as the form is submitted.
  • The error text should be announced before the description, e.g. aria-describedby="error-id description-id".

Checkboxes

Checkboxes a11y guidelines guidelines

Side note: whether you'd follow these guidelines or not, it's always advised to at least test your markup with a screen reader software.

• Keep checkbox labels short and descriptive.
• Start all checkbox labels with a capital letter.
• Don't include punctuation after checkbox labels.
• Provide unique labels for the checkboxes. This will ensure that screen reader users can understand the purpose of the checkbox when read out of context.
• When a form is submitted with invalid data:
  • Ensure that error text is not visible by default. It should be available only after the form submission.
  • Set focus on the first field with error as soon as the form is submitted.
  • The error text should be announced before the description, e.g. aria-describedby="error-id description-id".

Select

Multi-select Deprecated

File upload

Styled file upload

Disabled field

Required field

Note AUI provides the visual style only, you will need to implement validation:

Error

Description

Descriptions go just after their input. They should only be used for non-critical, supplementary text. Critical information must go in the label:

JavaScript

Inline help

Forms include the option for an inline help field, which is hidden on load and toggled with JavaScript.

Options

Form layouts

The overall layout of the form can be chosen by adding a class to the root element:

• default, shorter labels (no additional class) - standard layout has narrow labels to the left of inputs.
• long-label (class="aui long-label") - makes the labels wider.
• top-label (class="aui top-label") – Places labels above form elements (except radios and checkboxes where the label remains to the right of the input). This style is used for forms in narrow spaces.

Form input widths

You can increase the width of an input (note this is separate from the width of the label, controlled by form layouts) by adding a class to the input:

• Short: class="short-field"
• Medium: class="medium-field"
• Medium-long: class="medium-long-field"
• Long: class="long-field"
• Full width: class="full-width-field" (this will make the field expand to the full available width)

For example, to set a long field: