Details

<wa-details>

Since 2.0

stable

Details show a brief summary and expand to show additional content.

                
  Click the summary to expand and collapse the details component. You can put any content in here that you want to
  reveal on demand!

<wa-details summary="Toggle Me">
  Click the summary to expand and collapse the details component. You can put any content in here that you want to
  reveal on demand!
</wa-details>

Examples Jump to heading

Disabled Jump to heading

Use the disabled attribute to prevent the details from expanding.

                
  This content can't be seen because the details component is disabled. Try removing the disabled attribute to reveal
  what's inside!

<wa-details summary="Disabled" disabled>
  This content can't be seen because the details component is disabled. Try removing the disabled attribute to reveal
  what's inside!
</wa-details>

Customizing the Summary Icon Jump to heading

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.

                
  This example uses custom plus and minus icons for expanding and collapsing. You can use any icon you want to match
  the look and feel of your app.

<wa-details summary="Toggle Me" class="custom-icons">
  <wa-icon name="square-plus" slot="expand-icon" variant="regular"></wa-icon>
  <wa-icon name="square-minus" slot="collapse-icon" variant="regular"></wa-icon>

  This example uses custom plus and minus icons for expanding and collapsing. You can use any icon you want to match
  the look and feel of your app.
</wa-details>

<style>
  /* Disable the expand/collapse animation */
  wa-details.custom-icons::part(icon) {
    rotate: none;
  }
</style>

Icon Position Jump to heading

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.

  
    The expand/collapse icon is at the start of the summary. This is a common pattern that feels familiar to users who
    are used to tree views and file explorers.
  
    The expand/collapse icon is at the end of the summary. This is the default placement and works great for most
    use cases.

<div class="wa-stack">
  <wa-details summary="Start" icon-placement="start">
    The expand/collapse icon is at the start of the summary. This is a common pattern that feels familiar to users who
    are used to tree views and file explorers.
  </wa-details>
  <wa-details summary="End" icon-placement="end">
    The expand/collapse icon is at the end of the summary. This is the default placement and works great for most
    use cases.
  </wa-details>
</div>

HTML in Summary Jump to heading

To use HTML in the summary, use the summary slot. Links and other interactive elements will still retain their behavior:

Some text a link more text You can use the summary slot to put HTML in the summary, including links and other interactive elements. Pretty neat, right?

<wa-details>
  <span slot="summary">
    Some text
    <a href="https://webawesome.com" target="_blank">a link</a>
    more text
  </span>

  You can use the summary slot to put HTML in the summary, including links and other interactive elements. Pretty neat,
  right?
</wa-details>

Right-to-Left Languages Jump to heading

The details component, including its icon-placement, automatically adapts to right-to-left languages:

  
    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
  
    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن

<div class="wa-stack">
  <wa-details summary="تبديلني" lang="ar" dir="rtl">
    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
  </wa-details>
  <wa-details summary="تبديلني" lang="ar" dir="rtl" icon-placement="start">
    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
  </wa-details>
</div>

Appearance Jump to heading

Use the appearance attribute to change the element’s visual appearance.

  
    This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
  
    The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
    visual weight while keeping the content area clean.
  
    The filled appearance adds a background color to the entire component. Use this when you want the details to really
    pop on the page.
  
    No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.

<div class="wa-stack">
  <wa-details summary="Outlined (default)">
    This is the default outlined appearance. It has a subtle border that helps it stand out without being too flashy.
  </wa-details>
  <wa-details summary="Filled-outlined" appearance="filled-outlined">
    The filled-outlined appearance combines a filled header with an outlined body. It gives the summary a bit more
    visual weight while keeping the content area clean.
  </wa-details>
  <wa-details summary="Filled" appearance="filled">
    The filled appearance adds a background color to the entire component. Use this when you want the details to really
    pop on the page.
  </wa-details>
  <wa-details summary="Plain" appearance="plain">
    No bells and whistles on this one. The plain appearance strips away borders and backgrounds for a minimalist look.
  </wa-details>
</div>

Grouping Details Jump to heading

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.

  
    This is the first section of the accordion. When you open another section, this one will close automatically. Give
    it a try!
  
    This is the second section. Notice how the first section closed when you opened this one? That's the accordion
    behavior in action, powered by the shared name attribute.
  
    And here's the third section. You can have as many sections as you need — just make sure they all share the same
    name and only one will be open at a time.

<div class="wa-stack">
  <wa-details name="group-1" summary="Section 1" open>
    This is the first section of the accordion. When you open another section, this one will close automatically. Give
    it a try!
  </wa-details>

  <wa-details name="group-1" summary="Section 2">
    This is the second section. Notice how the first section closed when you opened this one? That's the accordion
    behavior in action, powered by the shared name attribute.
  </wa-details>

  <wa-details name="group-1" summary="Section 3">
    And here's the third section. You can have as many sections as you need — just make sure they all share the same
    name and only one will be open at a time.
  </wa-details>
</div>

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code.

import '@awesome.me/webawesome/dist/components/details/details.js';

To manually import this component from React, use the following code.

import WaDetails from '@awesome.me/webawesome/dist/react/details';

Slots Jump to heading

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 Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`appearance` `appearance`	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 \| undefined` Default `styles`
`disabled` `disabled`	Disables the details so it can't be toggled. Type `boolean` Default `false`
`iconPlacement` `icon-placement`	The location of the expand/collapse icon. Type `'start' \| 'end'` Default `'end'`
`name` `name`	Groups related details elements. When one opens, others with the same name will close. Type `string`
`open` `open`	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 `boolean` Default `false`
`summary` `summary`	The summary to show in the header. If you need to display HTML, use the `summary` slot instead. Type `string`

Methods Jump to heading

Learn more about methods.

Name	Description	Arguments
`hide()`	Hides the details
`show()`	Shows the details.

Events Jump to heading

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 Jump to heading

Learn more about CSS custom properties.

Name	Description
`--hide-duration`	The hide duration to use when applying built-in animation classes. Default `200ms`
`--show-duration`	The show duration to use when applying built-in animation classes. Default `200ms`
`--spacing`	The amount of space around and between the details' content. Expects a single value.

Custom States Jump to heading

Learn more about custom states.

Name	Description	CSS selector
`animating`	Applied when the details is animating expand/collapse.	`:state(animating)`

CSS parts Jump to heading

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 Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Using AI with Web Awesome

Frameworks

Components

Data Visualization

Style Utilities

Layout

Patterns

Theming

Design Tokens

Terms & Policies

Web Awesome

Details

Examples Jump to heading

Disabled Jump to heading

Customizing the Summary Icon Jump to heading

Icon Position Jump to heading

HTML in Summary Jump to heading

Right-to-Left Languages Jump to heading

Appearance Jump to heading

Grouping Details Jump to heading

Importing Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

Custom States Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading

Getting Started

Resources

Using AI with Web Awesome

Frameworks

Components

Data Visualization

Style Utilities

Layout

Patterns

Theming

Design Tokens

Terms & Policies

Web Awesome

Web Awesome Elsewhere

Details

Examples Jump to heading

Disabled Jump to heading

Customizing the Summary Icon Jump to heading

Icon Position Jump to heading

HTML in Summary Jump to heading

Right-to-Left Languages Jump to heading

Appearance Jump to heading

Grouping Details Jump to heading

Importing Jump to heading

Slots Jump to heading

Attributes & Properties Jump to heading

Methods Jump to heading

Events Jump to heading

CSS custom properties Jump to heading

Custom States Jump to heading

CSS parts Jump to heading

Dependencies Jump to heading