Menu
Components
This page is In Progress and subject to frequent changes
Please contact Gemma D. to verify any information is correct before using it.
Help
In Progress
Help components provide the user with additional information where they need it. The help link and a help panel together make up the help component.
UX Owner: Charlie Corkbeat
UI Owner: Steven Roberts
Note: This component doesn't yet exist in Storybook, preliminary image(s) shown.
On this page
Example
When to use
A help component can be used where:
- the user might need some extra information related to a form field to gain confidence in their answer
- the user might question why they're being asked for a particular piece of information
When not to use
A help component should be avoided where:
- it’s essential that the user reads the information (in these cases it’s better to use hint text or a notification instead)
Anatomy
Interaction and visibility
By default, the help panel is hidden until the user clicks or taps on the help link. The help panel can then be toggled off and on by interacting with the help link.
Example
Layout
Where visible, the help panel expands to fill 100% of the available space and pushes other content where necessary (in other words, it should never float above the page layer obscuring other content.
For further guidance on layout see desktop form field layout and mobile form field layout in Zeplin.
Help panel content
For most help panels, a simple couple of lines of paragraph of body copy will be enough to get across the additional information.
However, that’s not always the case. Help panels can include headers and links too.
But remember, keep it as concise as possible – people have opened the help panel because they’re looking for further information, but we don’t want to scare them off with large blocks of copy.
Examples
Similar components
Where to find this component
Documentation version history
Last updated Tuesday, 30th March 2021 09:40 by Gemma D.