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

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

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 SPACE or ENTER will toggle the visability of the associated help text.