Details
Examples
Basic Details Card
Details with Shadow
Disabled
Customizing the Summary Icon
Header Actions
Grouping Details
Component Props
Slots
Events
Methods
CSS Parts
Animations
Dependencies

Since Shoelace 2.0

Code stable

Pattern stable

Figma draft

Details

sl-details

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

Examples

Basic Details Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<sl-details summary="Toggle Me">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

sl-details summary="Toggle Me"
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Details with Shadow

Use the shadow property to add a box shadow to the details card. The shadow matches the Card component’s shadow.

<sl-details summary="Details with shadow" shadow>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

sl-details summary="Details with shadow" shadow=true
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Disabled

Use the disable attribute to prevent the details from expanding.

<sl-details summary="Disabled" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

sl-details summary="Disabled" disabled=true
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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 summary-icon part as shown below.

Note: Custom expand/collapse icons are not a standard pattern in our Design System, and there is no Figma component for this option. Please check with the design team before using this option.

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

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

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

sl-details summary="Toggle Me" class="custom-icons"
  sl-icon name="plus" slot="expand-icon"
  sl-icon name="minus" slot="collapse-icon"
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

css:
  sl-details.custom-icons::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }

Header Actions

You can now include anchor tags and buttons with onClick handlers within the summary slot.

Link

Button with href

Button with onClick

<sl-details summary="Toggle Me">
  <div slot="summary">
    <a href="https://google.com">Link</a>
    <sl-button href="https://google.com" size="small">Button with href</sl-button>
    <sl-button size="small" onclick="() => {console.log('onClick called')}">Button with onClick</sl-button>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

sl-details summary="Toggle Me"
  | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Grouping Details

Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time by listening for the sl-show event.

<div class="details-group-example">
  <sl-details summary="First" open>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </sl-details>

  <sl-details summary="Second">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </sl-details>

  <sl-details summary="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </sl-details>
</div>

<script>
  const container = document.querySelector('.details-group-example');

  // Close all other details when one is shown
  container.addEventListener('sl-show', event => {
    if (event.target.localName === 'sl-details') {
      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
    }
  });
</script>

<style>
  .details-group-example sl-details:not(:last-of-type) {
    margin-bottom: var(--sl-spacing-2x-small);
  }
</style>

.details-group-example
  sl-details summary="First" open=true
    |  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  sl-details summary="Second"
    |  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  sl-details summary="Third"
    |  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

javascript:
  const container = document.querySelector('.details-group-example');

  // Close all other details when one is shown
  container.addEventListener('sl-show', event => {
    [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
  });

css:
  .details-group-example sl-details:not(:last-of-type) {
    margin-bottom: var(--sl-spacing-2x-small);
  }

Component Props

Property	Default	Details
`open`	`false`	`boolean` 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.
`summary`	—	`string` The summary to show in the header. If you need to display HTML, use the `summary` slot instead.
`disabled`	`false`	`boolean` Disables the details so it can’t be toggled.
`shadow`	`false`	`boolean` Option to add a box shadow to the details. Shadow matches card component shadow.
`updateComplete`		A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name	Details
(default)	The details’ main content.
`summary`	The details’ summary. Alternatively, you can use the `summary` attribute.
`expand-icon`	Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
`collapse-icon`	Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.

Learn more about using slots.

Events

Name	Name	Name	React Event	Details
`sl-show`	`sl-show`	`sl-show`	`onSlShow`	Emitted when the details opens.
`sl-after-show`	`sl-after-show`	`sl-after-show`	`onSlAfterShow`	Emitted after the details opens and all animations are complete.
`sl-hide`	`sl-hide`	`sl-hide`	`onSlHide`	Emitted when the details closes.
`sl-after-hide`	`sl-after-hide`	`sl-after-hide`	`onSlAfterHide`	Emitted after the details closes and all animations are complete.

Learn more about events.

Methods

Name	Details
`show()`	Shows the details.
`hide()`	Hides the details

Learn more about methods.

CSS Parts

Name	Description
`base`	The component’s base wrapper.
`header`	The header that wraps both the summary and the expand/collapse icon.
`summary`	The container that wraps the summary.
`summary-icon`	The container that wraps the expand/collapse icons.
`content`	The details content.

Learn more about customizing CSS parts.

Animations

Name	Description
`details.show`	The animation to use when showing details. You can use `height: auto` with this animation.
`details.hide`	The animation to use when hiding details. You can use `height: auto` with this animation.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>