Form row help
Taxonomic name: M-FORM-ROW__HELP
v.3.0.0 - Updated 11/09/17.
Molecule
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 part way 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. This first line of help text must not include images or bullet lists etc.
- Keep help text as concise and action-oriented as possible.
Examples
Standard textbox with help with short text (will only display show more for mobile view)
Lorum ipsum pellentesque, wisi wisi hendrerit.
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 developers
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).
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: {
showMore: 'Show more',
showLess: 'Show less'
}
}
};
For more information on this, see our page on how to change locale settings within JavaScript.
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.
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">
<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 ENTER will toggle the visibility of the associated help text. (On some older browsers, this functionality may be replicated using the SPACE bar instead of the ENTER button.)