Form row help

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)

Standard textbox with help

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

<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.

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.)