Details
<wa-details>
Details display a brief summary and expand to reveal additional content. Use them to progressively disclose information, group related FAQs, or hide advanced options.
Examples
Expanded Initially
Use the open attribute to expand the details initially.
Disabled
Use the disabled attribute to prevent the details from expanding.
Customizing the Summary Icon
Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the icon part as shown below.
Icon Position
The default position for the expand and collapse icons is at the end of the summary. Set the icon-placement attribute to start to place the icon at the start of the summary.
HTML in Summary
To use HTML in the summary, use the summary slot.
Links and other interactive elements will still retain their behavior:
Right-to-Left Languages
The details component, including its icon-placement, automatically adapts to right-to-left languages:
Appearance
Use the appearance attribute to change the element’s visual appearance.
Grouping Details
Use the name attribute to create accordion-like behavior where only one details element with the same name can be open at a time. This matches the behavior of native <details> elements.
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/[email protected]/components/details/details.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/details/details.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/details/details.js';
To import this component for React 18 or below, use the following code:
import WaDetails from '@awesome.me/webawesome/dist/react/details/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The details' main content. |
collapse-icon
|
Optional collapse icon to use instead of the default. Works best with <wa-icon>. |
expand-icon
|
Optional expand icon to use instead of the default. Works best with <wa-icon>. |
summary
|
The details' summary. Alternatively, you can use the summary attribute. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
appearanceappearance |
The element's visual appearance.
Type
'filled' | 'outlined' | 'filled-outlined' | 'plain'Default
'outlined' |
|
|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
disableddisabled |
Disables the details so it can't be toggled.
Type
booleanDefault
false |
|
|
iconPlacementicon-placement |
The location of the expand/collapse icon.
Type
'start' | 'end'Default
'end' |
|
|
namename |
Groups related details elements. When one opens, others with the same name will close.
Type
string |
|
|
openopen |
Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
can use the
show() and hide() methods and this attribute will reflect the details' open state.Type
booleanDefault
false |
|
|
summarysummary |
The summary to show in the header. If you need to display HTML, use the
summary slot instead.Type
string |
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
hide() |
Hides the details | |
show() |
Shows the details. |
Events
Learn more about events.
| Name | Description |
|---|---|
wa-after-hide |
Emitted after the details closes and all animations are complete. |
wa-after-show |
Emitted after the details opens and all animations are complete. |
wa-hide |
Emitted when the details closes. |
wa-show |
Emitted when the details opens. |
CSS custom properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--hide-duration |
The hide duration to use when applying built-in animation classes.
Default
var(--wa-transition-normal)
|
--show-duration |
The show duration to use when applying built-in animation classes.
Default
var(--wa-transition-normal)
|
--spacing |
The amount of space around and between the details' content. Expects a single value.
|
Custom States
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
animating |
Applied when the details is animating expand/collapse. |
:state(animating)
|
CSS parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The inner <details> element used to render the component. Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the display property. |
::part(base)
|
content |
The details content. |
::part(content)
|
header |
The header that wraps both the summary and the expand/collapse icon. |
::part(header)
|
icon |
The container that wraps the expand/collapse icons. |
::part(icon)
|
summary |
The container that wraps the summary. |
::part(summary)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.