Details
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
_labeland 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
Playground
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="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
Label and content
The label is defined via _label; the content area is populated via the slot.
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="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.
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="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.
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="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(options?: KolFocusOptions) => Promise<void>
Sets focus on the internal element.
Parameters
| Name | Type | Description |
|---|---|---|
options | KolFocusOptions | undefined |
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| The content displayed in the detail description. |