Details

This documentation is currently being revised and is in beta status. Content may still change.

This component is being retested for accessibility. The full test is still pending and can only be completed after a release.

Synonyms: Disclosure, Collapse, Summary

Description: The Details component allows additional information to be initially hidden and only made visible after the user clicks on it. It consists of a heading with an arrow icon (which changes orientation from right to down) and an expandable content area, enabling space-saving presentation of supplementary information.

Example

Component with sample content:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<KolDetails _label="More Information" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolDetails>

Accessibility

The Details component enables accessible presentation of supplementary information without distracting from the main content.
Opening and closing is handled via the semantic HTML structure of the <details> element series.
Screen readers automatically recognise the state (open or closed) of the component.
The arrow icon serves as a visual indicator of the state; the semantic structure also conveys the state to assistive technologies.

Links and references

Usage

Keyboard controls

Key	Function
`Tab`	Focuses the Details component.
`Enter`	Opens or closes the content of the component.

Best practices / Recommendations

Use the Details component to arrange supplementary or secondary information in a space-saving way.
Do not place important, legally relevant, or primary content exclusively in collapsed areas.
The component is particularly well suited for FAQ pages, with the question in _label and the answer in the content area.
Use descriptive labels that clearly indicate the content of the collapsed information.
Avoid using too many Details components without structure, as this impairs clarity.

Use cases

FAQ sections with many questions and answers
Additional or supplementary explanations of important concepts
Supplementary information in technical documentation
Context-sensitive help and additional information in forms
Detail views for product properties or variants

Construction / Technology

Playground

<KolDetails _label="Details Element" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolDetails>

Functionality (with code)

Label and content

The label is defined via _label; the content area is populated via the slot.

<KolDetails _label="Show details" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolDetails>

Open state

_open renders the component initially expanded. In the disabled state (_disabled) the component is non-interactive.

<KolDetails _label="Show details" _open={true} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolDetails>

Heading structure

The heading level is controlled via _level (0–6). A value of 0 renders the text as bold text without a semantic heading structure.

<KolDetails _label="Show details" _level={2} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolDetails>

Event handling

For event handling and callbacks see .

Event	Trigger	Value
`onToggle`	Component is opened or closed	`boolean`

API

Overview

The Details component allows additional information to be initially shown with a short introductory text, which is only fully expanded after the user clicks on an arrow icon.

By default, the Details component is displayed as a single-line layout element consisting of an arrow icon followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon changes its orientation from right to down. The component can also be closed again to hide the content.

Properties

Property	Attribute	Description	Type	Default
`_disabled`	`_disabled`	Makes the element not focusable and ignore all events.	`boolean \| undefined`	`false`
`_label` (required)	`_label`	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	`string`	`undefined`
`_level`	`_level`	Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`	`0`
`_on`	--	Defines the callback functions for details.	`undefined \| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }`	`undefined`
`_open`	`_open`	Opens/expands the element when truthy, closes/collapses when falsy.	`boolean \| undefined`	`false`

Methods

click

click() => Promise<void>

Triggers a click on the summary/toggle button.

Returns

Type: Promise<void>

`focus() => Promise<void>`

Sets focus on the internal element.

Returns

Type: Promise<void>

Slots

Slot	Description
	The content displayed in the detail description.

Example​

Accessibility​

Links and references​

Usage​

Keyboard controls​

Best practices / Recommendations​

Use cases​

Construction / Technology​

Playground​

Functionality (with code)​

Label and content​

Open state​

Heading structure​

Event handling​

API​

Overview​

Properties​

Methods​

click​

Returns​

focus() => Promise<void>​

Returns​

Slots​

Example

Accessibility

Links and references

Usage

Keyboard controls

Best practices / Recommendations

Use cases

Construction / Technology

Playground

Functionality (with code)

Label and content

Open state

Heading structure

Event handling

API

Overview

Properties

Methods

click

Returns

`focus() => Promise<void>`

Returns

Slots