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
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
.
Input with error
Here is an example of how an input error message looks.
Disabled input
Add the disabled property to the input element.
Email input
Set type="email" to the input element.
Password input
Set type="password" to the input element.
Number input
Set type="number" to the input element.
Search input
Set type="search" to the input element.
Textarea
Disabled textarea
Add the disabled property to the textarea element.
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.
Textarea with error
Here is an example of how a Textarea error message looks.
Checkbox
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.
Checkbox with error
Here is an example of how a checkbox error message looks.
Radio buttons
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.
Radio buttons error
Here is an example of how a checkbox error message looks.
Selects
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.
Select error
Disabled select
Alternate select
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.
Alternate select error
Disabled alternate select
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.