Explanatory text
Taxonomic name: M-FORM-ROW__EXPLANATORY-TEXT
CORE COMPONENT
v.4.9.0 - Updated 24/05/19. Archives
Molecule
Explanatory text surfaces important concise information or 'hints' for visibility to users completing form inputs. Be selective in their application and consider whether they are really needed - forms shouldn't require extensive completion instructions.
- Use where there are specific 'hints' that will inform data input (although a user's preferred data entry format should be accommodated where possible).
- Use where users may not be familiar with the data being asked for (such as policy number).
- Use where more information may be required on why something is being asked.
- Use where information needs to be provided about security or use of data.
- Information should be concisely written to support scanning - longer pieces of information should be catered for within help text.
- A text link may be used for in instances such as forgotten password details.
- See the style guide for detailed typography guidelines.
Explanatory text links
Structure
- Can only be used in form journeys for example login page.
- Can only be used with basic form elements such as single textbox, dropdown.
- Can not be used with radios, checkboxes, groups of textboxes etc.
- Do not use with contextual help within the same form row.
- Link placed to the right should only be used to help the user in recovering from their journey.
- For text that helps the user or has explanatory text consider using explanatory text, contextual help or show more pattern.
Placement
- Links are placed to the right of a form field label.
- Link should be placed underneath and to the right of a form field label and above the form field when a label is too long and causes the link to wrap.
Accessibility
- Links must be tertiary buttons to ensure there is a large enough hit target.
Design anatomy
- 16pt Source Sans Pro Bold.
- Link blue #004FB6.
- 1px solid underline #CCC.
Examples
Standard explanatory text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Explanatory text link
Notes for developers
The explanatory text link must only ever be used in conjunctions with basic form elements ie. single textbox, dropdown; do not use with form elements such as radios, checkboxes etc. If an explanatory text link is to be used in conjunction with standard explanatory text the text link must be first.
When including an explanatiry text link ensure that a tertiary button is used rather than a standard link. This ensure that the hit target is large enough to comply with WCAG guidelines.
Notes for testers
- Ensure that any links can be accessed via the mouse as well as via tabbing using the keyboard.
- Ensure that when hovering over any links the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
Code Examples
Standard explanatory text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="m-form-row">
<label class="a-label" for="...">...</label>
<p class="m-form-row__explanatory-text">...</p>
<div class="m-form-row__content">
...
</div>
</div>
Explanatory text link
<div class="m-form-row m-form-row--has-explanatory-text-link">
<label class="a-label" for="...">...</label>
<p class="m-form-row__explanatory-text-link"><a href="..." class="a-button a-button--tertiary [ Modifiers ]"><span class="a-button__inner">...</span></a></p>
<div class="m-form-row__content">
...
</div>
</div>
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__explanatory-text |
Base styling for some explanatory text | Yes | .m-form-row > .a-label + p |
|
.m-form-row--has-explanatory-text-link |
Modifier for a form row that contains an explanatory text link | Yes | .m-form-row |
Only required for an explanatory text link |
.m-form-row__explanatory-text-link |
Base styling for an explanatory text link placed to the right of the form label | Yes | .m-form-row--has-explanatory-text-link > .a-label + p |
Must be used in conjunction with .m-form-row__explanatory-text-link |
Keyboard operations
- TAB
-
Tabbing to a link the link should become clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus a link, pressing SPACE or ENTER will open the link.