Forms: information accordion
An information accordion is used to provide users more information, help or details when filling out a form field.
Please see the form template to get started with creating your own forms and error messages.
- Use the information accordion when users may need more details or help answering a form input. For example: explaining where to find a piece of information on their identification.
- If a field input must meet certain criteria you can include it in the information expander. For example: password requirements.
- Do not use the form information accordion in other components.
- Do not use the information expander to supply additional content within the form. Only provide details about the form field.
- Only use one information expander per form field.
- Keep the information expander content to less than 100 characters.
- Provide a link if more information is required.
- For information text with a long character count, you can break up the text into 2+ lines by hitting the enter key.
- Otherwise, information accordions should not be changed - please maintain style and colours.
We added this component to the Extended GC Design Library - DECD as it did not exist in the canada.ca design system or in the Core GC Design Library. We modelled it off of the behaviour of existing forms in Service Canada. As it does not function on hover, it is accessible on mobile as well.