Form row help allows users to view more information to help them complete a form field input.
- Visible text is limited to 120 characters at desktop, 100 at tablet, and 30 for mobile views, although if the visible character limit is reached partway through a word, the remainder of that word will also be visible.
- Remaining text after the visible character limits will be displayed on click/tap of the ‘Show more’ call to action.
- Form row help must always begin with a full sentence of text. The first line of help text must not include images or bullet lists etc.
- Keep help text as concise and action oriented as possible.
For documentation on form row help prior to v.1.1.4 see our deprecated form row help documentation. If you are using v.1.1.4 or above please move to using this version of the form row help as soon as possible.
Examples
Standard textbox with help
Ornare praesent pellentesque, wisi hendrerit. Lacus adipiscing, pellentesque imperdiet, sed vestibulum dolor. Vehicula a, mi pede, enim neque. Scelerisque lacinia ac.
Standard checkbox with help
Notes for testers
Help text should appear before the form field while error messages appear below.
When JavaScript is available, the first part of the help text will be visible, with the complete text sliding into view via a 'read more' link.
The first element within the .m-form-row__help
div must be a standard unstyled <p>
with no markup tags within it (these may be cropped by the truncation script).
Ensure that autofill is not available for sensative fields such as password, card/account number etc.
Changing locale settings
Locale settings will need to be updated to include appropriate translations for the 'read more' and 'read less' links.
var locale = {
en: {
formHelp: {
text: 'Help',
showMore: 'Show more',
showLess: 'Show less'
}
}
};
For more information on this, see our page on how to change locale settings within JavaScript.
Code Examples
Standard textbox with help
Ornare praesent pellentesque, wisi hendrerit. Lacus adipiscing, pellentesque imperdiet, sed vestibulum dolor. Vehicula a, mi pede, enim neque. Scelerisque lacinia ac.
<div class="m-form-row m-form-row--light">
<label class="a-label" for="...">...</label>
<div class="m-form-row__content">
<div class="m-form-row__help" data-module="m-form-row__help">
<p>...</p>
...
</div>
<input type="..." id="..." name="..." placeholder="..." class="a-textbox [ Modifier ]" />
</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__help |
Adds the help box and its styling | Yes | .m-form-row__content > div |
Must be displayed before any validation or error text |
.m-form-row__help > p |
Initial unstyled paragraph required | Yes | .m-form-row__help > p |
Must be displayed before any validation or error text |
Keyboard operations
- TAB
-
Tabbing to an input field should make the input clearly visually different so that the focus point on the page is obvious to the user.
- SPACE OR ENTER
-
With focus on an help icon, pressing SPACE or ENTER will toggle the visability of the associated help text.