---
title: Details
description: Details
element: vaadin-details
---

## Description

`<vaadin-details>` is a Web Component which the creates an
expandable panel similar to `<details>` HTML element.

```html
<vaadin-details>
  <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  <div>
    Toggle using mouse, Enter and Space keys.
  </div>
</vaadin-details>
```

### Styling

The following shadow DOM parts are exposed for styling:

Part name        | Description
-----------------|----------------
`content`        | The wrapper for the collapsible details content.

The following state attributes are available for styling:

Attribute      | Description
---------------|------------
`opened`       | Set when the collapsible content is expanded and 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
`has-tooltip`  | Set when the element has a slotted tooltip

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

## Properties

### autofocus

**Type:** `boolean`

Specify that this control should have input focus when the page loads.

### disabled

**Type:** `boolean`

If true, the user cannot interact with this element.

### opened

**Type:** `boolean`

If true, the collapsible content is visible.

### summary

**Type:** `string | null | undefined`

A text that is displayed in the summary, if no
element is assigned to the `summary` slot.

## Events

### opened-changed

**Type:** [DetailsOpenedChangedEvent](#detailsopenedchangedevent)

Fired when the `opened` property changes.

## Types

### DetailsOpenedChangedEvent

```ts
/**
 * Fired when the `opened` property changes.
 */
export type DetailsOpenedChangedEvent = CustomEvent<{ value: boolean }>;
```