Details

A details component lets users view or hide sections of content, keeping the page organised and uncluttered. You can also customise the content displayed within each section for better focus.

When to use the component

Use the details component to make a page easier to scan when it contains information that only some users will need. This is particularly useful for displaying supplementary details, such as descriptions or FAQs. Aim for a clear and concise summary, giving users the option to expand for more information when needed.

Don't use the details component to hide information that the majority of your users will need, as this could create unnecessary barriers to access. If your content needs to be constantly visible or requires frequent interaction with multiple sections at once, consider using alternative components like tabs or accordions instead.

The details component is a great choice when you want to provide optional content without overwhelming the layout, especially when screen space is limited or when presenting information that's not immediately necessary for everyone.

Examples in GOSS products

• Form template to explain more details about a form input

Accessibility considerations

The details component is designed with accessibility in mind, offering an easy and inclusive experience for all users. It follows best practices to ensure smooth interaction, with options for clear, expandable content that meets different needs.

Each section is clearly labelled, making it simple for users to understand what information is available and access it when needed.

When focused, the details controls show a clear highlight, helping users easily spot the expanded or collapsed sections.