ba-details
ba-details is used for standalone disclosure of secondary information
Airframe
Web Components
React
React Native
Picking between ba-details and ba-accordion
Use ba-accordion when:
- The text in the closed state acts as a heading for the content it contains
- You need something more prominent
- Grouping many collapsible sections
Use ba-details when:
- There is a small amount of content to be disclosed
- You need something less prominent
- The collapsible section is standalone
Anatomy
Summary
The clickable summary text that toggles the visibility of the content
Content area
The expandable area that reveals additional content, such as text, layout, or other components, when the details is opened
Design Documentation
A few contextual examples of where to use this component include:
- Read more
- Terms and conditions
- Summary of flight details
- Clarifying why information is needed on an input
This will help users decide whether to interact with this component. For example: "Read more", "Terms and Conditions", "Why we need this information", etc
When there are many ba-details grouped together it's tempting to only allow one accordion to be open at a time. However this does not provide the best user experience:
- On mobile devices auto closing can interfere with the scroll behavior
- Automatically moving the user up and down the page can be disorientating
- Increases cognitive load of having to remember what was in a closed accordion
- It makes it hard to compare the contents of multiple ba-details
Further Reading:
The content in ba-details is intended for information that not every user needs. Therefore, it should remain closed until the user interacts with the component.
If you are considering opening ba-details by default, the content might be better placed directly on the page instead of inside the ba-details
Live Demo
Details content
<ba-details summary="Summary">
<ba-content>
<p>Details content</p>
</ba-content>
</ba-details>Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
summary(required) |
summary |
Text to display in the interactive part of the component | string |
undefined |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑content>, <ba‑flex>, <ba‑form‑group>, <ba‑form‑group‑dropdown>, <ba‑grid>, <ba‑input>, <ba‑input‑date>, <ba‑input‑datepicker>, <ba‑input‑email>, <ba‑input‑number>, <ba‑input‑password>, <ba‑input‑phone‑number>, <ba‑input‑secure‑field>, <ba‑input‑stepper>, <ba‑input‑text>, <ba‑input‑textarea>, <ba‑input‑typeahead>, <ba‑input‑upload>, <ba‑radio‑group>, <ba‑select>, <fieldset>, <form> |
Parent components
ba-details can be slotted into:
<ba‑card><ba‑card‑segmented><ba‑flex><ba‑form‑group><ba‑grid><ba‑hero><ba‑message><ba‑message‑global><ba‑page‑segment>
Usage
Basic usage
In most scenarios ba-details will consist of a short descriptive summary and a few lines of content
<ba-details summary="Short descriptive text">
<ba-content>
<p>Hidden content to be shown when opened</p>
</ba-content>
</ba-details>Guidelines
In high contrast mode:
- The icon and text use the browser default colour for the summary element
- The keyline is the same colour as the current text colour
VoiceOver does not announce the expanded or collapsed state in Safari
This is a known bug and can be found on the WebKit bug tracker: https://bugs.webkit.org/show_bug.cgi?id=252223.
Issues with moving between multiple ba-details with VoiceOver
When trying to tab between multiple ba-details with VoiceOver in Safari, if a ba-details has been opened and then closed, you cannot navigate to the next ba-details. Instead, you are moved to the first one in the list.
Keyboard navigation
State: Summary has focus
Toggles the open / close state of ba-details
Toggles the open / close state of ba-details
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-details is only used for secondary information that is not needed by all users
- Summary text is clear, short, and descriptive, helping users decide whether to expand the component
- Multiple ba-details can be open at the same time to avoid disorienting users with auto-closing behavior
- ba-details is not opened by default - content remains closed until user interaction
- Content within ba-details is concise and relevant to the summary text
Accessibility checklist
- ba-details has discernible text in the summary
- Focus indicator has not been obscured on all sides of the component
- ba-details is not nested inside other interactive elements
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-details is operable using assistive technology
- Has a visible focus indicator on all sides of the component
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings
- High contrast mode adjustments