Forms

See working examples of forms on the Form Components page.

Fieldsets

Fieldsets are a semantic grouping of related form elements. The first element inside the fieldset should be a legend element, which provides a label for the group.

Correct fieldset usage


<fieldset>
  <legend>Legend text:</legend>
  <label for="f-name">Label text</label>
  <input id="f-name" type="text" name="" />
</fieldset>

Incorrect fieldset usage


<div>
  <p>Legend text:</p>
  <label for="f-name">Label text</label>
  <input id="f-name" type="text" name="" />
</div>

Screenreaders

If you wish to hide the legend but still have it present for screenreaders, use the class screenreaders-only.

For the purpose of demonstrations below (except checkbox and radio buttons) the legend is being hidden using screenreaders-only.

Labels

Screen readers go into forms mode when they encounter form input fields. Unless form elements have labels associated with them, the screen reader cannot tell the user what data needs to be entered.

Adding a for attribute to the label and an id to the input field tells the screen reader that the input field has a label.

Correct label usage


<label for="f-name">First name:</label>
<input id="f-name" type="text" name="" />

Incorrect label usage

 First name:
<input type="text" name="" />

Don't use the placholder attribute as a replacement for the label.

 First name:
<input type="text" name="" placeholder="First name" />

Please ensure that all form inputs have an appropriate label! Never use a placeholder instead of a label.

Inputs

Example:
Input example

Required input

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the label .

Example:
Required input example

Input with error

Here is an example of how an input error message looks.

Example:
Input error example
Error message.

Disabled input

Add the disabled property to the input element.

Example:
Disabled input example

Email input

Set type="email" to the input element.

Example:
Email input example

Password input

Set type="password" to the input element.

Example:
Password input example

Number input

Set type="number" to the input element.

Example:
Number input example

Search input

Set type="search" to the input element.

Example:
Search input example

Textarea

Example:
Textarea example

Disabled textarea

Add the disabled property to the textarea element.

Example:
Disabled textarea example

Required textarea

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the label.

Example:
Required textarea example

Textarea with error

Here is an example of how a Textarea error message looks.

Example:
Textarea error example
Error message.

Checkbox

Example:
Checkbox example

Required checkbox

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the legend.

Example:
Required checkbox example

Checkbox with error

Here is an example of how a checkbox error message looks.

Example:
Checkbox error example
Error message.

Radio buttons

Example:
Radio buttons example

Required radio buttons

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the legend.

Example:
Required radio buttons example

Radio buttons error

Here is an example of how a checkbox error message looks.

Example:
Radio buttons error example
Error message.

Selects

Example:
Select example

Required select

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the legend.

Example:
Required select example

Select error

Example:
Select error example
Error message.

Disabled select

Example:
Disabled select example

Alternate select

Example:
Alternate select example

Required alternate Select

The aria-required attribute informs screen readers that input fields require a value. The data-required attribute can be used to display a * symbol next to the legend.

Example:
Required alternate select example

Alternate select error

Example:
Alternate select error example
Error message.

Disabled alternate select

Example:
Diasabled alternate select example

Clear select

Use a clear select if using a background colour similar to a normal select. To see an example, view the Image header with filters example on the Headers Components page.

Example:
Clear select example

Clear select error

Example:
Clear select error example
Error message.

Disabled clear select

Example:
Disabled clear select example

Buttons

Example: