Details

Details is an interactive text container that enables a user to show or hide additional information.

Anatomy of the Details component

Details closely mimics the API of the native details element
Consider the Accordion component for more data-heavy applications

A basic implementation of Details.

This example shows how you might dynamically control the open/closed state.

This example shows multiple instances of Details in a grid, such as an FAQ list.

Content within a collapsed Details component will not be discoverable by a find-in-page text search

Navigating a Details component with a keyboard
Keys	Action
`return`, `space`	Open/close the Details component
`tab`	Navigate progressively through the DOM

React props
Name	Type	Default	Description
children	`ReactNode`		The content of the Details component
open	`boolean`	false	If `true`, the Details component will be open

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
  <Details>
    <Summary>Summary</Summary>
    Details explaining the summary
  </Details>,
);

// Unfortunately react testing library doesn't currently
// understand the semantics of details/summary. In the
// future this should be queryable by role="details" and role="summary"
const details = screen.getByText('Details');

expect(details).toHaveProperty('open', false);

const summary = screen.getByText('Summary');

userEvent.click(summary);

expect(details).toHaveProperty('open', true);