- Taxonomic name: M-FORM-ROW__INSTRUCTION
- Added on: v5.3.0 (26/01/21)
- Updated on: v5.5.0 (23/03/21)
Form row instruction
Provides a relacement for placeholder text in order to improve accessibility by offering instructional content which is permanently visible on the page.
Design and usage
Structure
- Short, single paragraph of text to describe what the expected entry for an input field should be
Placement
- Between the field label and the field itself, but always sits above any error/validation messages and below any help text
Accessibility
- Displaying instructions such as the specific format required permanently, rather than using placeholder text, ensures compliance with WCAG 3.3.2
- Uses aria-describedby to associate the form field with the instruction
Use case and exception scenarios
- To provide instructions regarding what the expected input format is to be, for example "DD/MM/YYYY" for date entry
- Only use where the format of the entry could be unclear, for example date entry; do not use when asking for an email address, for example, as the format required it not ambiguous
Examples
Interactive example
Code example
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<p class="m-form-row__instruction id="..."">...</p>
...
</div>
</div>Development and test
Notes for developers
The instruction must have a unqiue ID and the form element or fieldset (if the instruction applies to a group of inputs) must have the attribute aria-describedby set to include the instructions ID in order to ensure that the instruction is correctly associated with the form element(s).
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-form-row__instruction |
Base styling for instruction text | Yes | .m-form-row__content > p |
Placed before any error messages but after any help text |
Component releases
- Added on: v5.3.0 (26/01/21)
- Updated on: v5.5.0 (23/03/21)
Latest update:
- updated: Additional aria attributes are now recommended to be applied across all form fields/rows so as to aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occurred.