---
title: DetailsSummary
description: DetailsSummary
element: vaadin-details-summary
---

## Description

The details summary element.

### Styling

The following shadow DOM parts are exposed for styling:

Part name  | Description
-----------|-------------------
`toggle`   | The icon element
`content`  | The content wrapper

The following state attributes are available for styling:

Attribute    | Description
-------------| -----------
`active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.
`opened`     | Set when the element is expanded and related collapsible content is visible.
`disabled`   | Set when the element is disabled.
`focus-ring` | Set when the element is focused using the keyboard.
`focused`    | Set when the element is focused.

The following custom CSS properties are available for styling:

Custom CSS property                        |
:------------------------------------------|
| `--vaadin-details-summary-background`    |
| `--vaadin-details-summary-border-color`  |
| `--vaadin-details-summary-border-radius` |
| `--vaadin-details-summary-border-width`  |
| `--vaadin-details-summary-font-size`     |
| `--vaadin-details-summary-font-weight`   |
| `--vaadin-details-summary-gap`           |
| `--vaadin-details-summary-height`        |
| `--vaadin-details-summary-padding`       |
| `--vaadin-details-summary-text-color`    |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### disabled

**Type:** `boolean`

If true, the user cannot interact with this element.

### opened

**Type:** `boolean`

When true, the element is opened.