REMOVED
This component has been removed from the Framework. Move to using form help show more.
- Taxonomic name: M-FORM-ROW__HELP
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Form row help
Form row help allowed users to view more information to help them complete a form field input.
Design and usage
- 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
Interactive example
Code example
Standard textbox with help
<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="..." class="a-textbox [ Modifier ]" />
</div>
</div>Standard textbox with help and data description to interpret the purpose of the link
<div class="m-form-row" data-description="...">
<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="..." class="a-textbox [ Modifier ]" />
</div>
</div>Development and test
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).
A data-description tag must be used where a descriptive link is required, for example where there is very little text or an object/image/chart/table or list begins the content so there is nothing to interpret the purpose of the link. Description data is combined with the text link and presented as an aria-label.
Changing locale settings
Locale settings will need to be updated to include appropriate translations for the 'read more' and 'read less' links.
en: {
mFormRowHelp : {
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.
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.)
Component releases
- Added on: v3.0.0 (15/09/17)
- Removed on: v5.0.0 (05/10/20)
Latest update:
- Component removed in order to consolidate design and development patterns. Move to using form help show more.