Skip to content

Details

Details is an interactive text container that enables a user to show or hide additional information.
Figma logo
Anatomy of the Details component
Anatomy of the Details component

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
KeysAction
return, spaceOpen/close the Details component
tabNavigate progressively through the DOM
React props
NameTypeDefaultDescription
children  ReactNodeThe content of the Details component
open  booleanfalseIf 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);