Page History
...
The Dynamic Accordion component is a collapsible content container.
It organizes information into expandable and collapsible sections.
Each accordion item (child component) has a title that remains visible.
The content of each section can be expanded or hidden.
...
An accordion is used as a progressive disclosure pattern when content is related but not always needed on screen. The items hold secondary content that supports, but does not replace, the main content. Each item title describes one clear topic so the collapsed list is easy to scan, and the localized title property shows the correct label for each language. A meaningful displayName is set so the accordion can be recognized quickly in the structure panel.
...
Dos and Don’ts
Usage & Content
Dos The accordion is used as a progressive disclosure pattern when content is related but
- Use the accordion for related content that is not always needed on screen, and let the items hold this secondary
...
- information.
...
- Give each item a title
...
- that covers exactly one
...
- topic so the collapsed list
...
- stays easy to scan
...
- .
- Set a meaningful
displayNamesuch as “Product FAQ” or “Billing sections” so the accordion can be recognized quickly in the structure panel.
Don’ts
- Do not use the accordion for content that must always be visible, and do not hide critical information
...
- behind expansion.
...
- Do not combine unrelated topics into a single item
...
- .
- Do not keep generic internal names such as “Accordion 1”
...
- , and do not show machine-like keys or placeholders
...
- to end users.
Layout & Spacing
Dos The layout is selected to match
- Choose a layout that matches the content.
...
- Set
layout
...
- to
"vertical"for stacked reading and forms,
...
- and use
"horizontal"
...
- only for short, side-by-side content.
...
- Apply gap classes and
paddingClassso items are well spaced and content does not touch the container edges
...
- .
Don’ts Horizontal layout is not forced
- Do not force a horizontal layout for long labels or dense forms,
...
- to avoid awkward text wrapping.
- Do not leave icons and text
...
- misaligned, and
...
- do not let headers look uneven because
alignItemsClassis missing
...
- .
- Do not allow gaps to be too tight or missing
...
- , and
...
- do not
...
- let the accordion sit directly against neighboring components
...
- or look cramped due to missing padding.
Visibility & Authorization
Dos Visibility
- Use visibility rules
...
- so the accordion appears only when it is relevant, and hide sections that
...
- do not apply to a user
...
- .
- Fully hide sensitive accordions for users without permission.
...
- Use conditional visibility to keep the layout clean by hiding
...
- empty or irrelevant accordions.
Don’ts Irrelevant accordions are not left
- Do not leave irrelevant accordions visible just because they exist in the template.
...
- Do not show sensitive content and then
...
- block it only with text such as “no access.”
...
- Do not leave empty accordions on the page, and do not let unused shells clutter the layout when
displayConditionscan hide them.
Content Quality & Clarity
Dos Short
- Write short, descriptive titles in sentence case
...
- so the
titlefield clearly states what is inside each item.
...
- Align internal
displayNamevalues
...
- with
...
- visible titles, and
...
- ensure names
...
- in the structure panel roughly match what users see in the UI.
Don’ts Long
- Do not use long sentences, technical IDs, or slogans
...
- in headers that
...
- must
...
- be scanned quickly.
...
- Do not use completely different internal and external names
...
- without a strong reason, so
displayNameandtitledo not create confusion for authors or testers.
Accessibility
- Provide meaningful, unique titles for each section so context is clear even when collapsed (
elements.title). Use plain-language; avoid icon-only labels (elements.title). - Expose a stable handle for automated accessibility checks (
dataTestId). - Avoid color-only meaning; place essential cues in text (
elements.title,elements.content). - Keep expansion order predictable by establishing item order during initialization (
ON_INIT,elements).
