Descriptions Collapsible Sections

ProNew

A long record split into titled sections that each open and close, with the first open and a count of fields in the closed ones.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when a detail page has many fields grouped by theme: cloud resources, orders with shipping and billing, user admin records.

Do not use it when there are only a handful of fields (a single Descriptions is easier to scan), or all sections must be visible for printing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`sections`	`DetailSection[]`	required	-
`defaultOpen`	`string[]`	optional	Ids open at first. Default: the first section.

Accessibility

Section headings are h3 elements wrapping a button with aria-expanded and aria-controls.
Closed panels use the hidden attribute so their content leaves the accessibility tree.
Expand all and Collapse all are visible buttons.

Testing

The pattern ships with a Testing Library test (descriptions-collapsible-sections.test.tsx) that covers the initial open state, toggling with aria-controls and expand and collapse all.

Guide and examples

When to use it

Use this when a detail page has many fields grouped by theme: cloud resources, orders with shipping and billing, user admin records.

Do not use it when there are only a handful of fields (a single Descriptions is easier to scan), or all sections must be visible for printing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`sections`	`DetailSection[]`	required	-
`defaultOpen`	`string[]`	optional	Ids open at first. Default: the first section.

Accessibility

Section headings are h3 elements wrapping a button with aria-expanded and aria-controls.
Closed panels use the hidden attribute so their content leaves the accessibility tree.
Expand all and Collapse all are visible buttons.

Testing

The pattern ships with a Testing Library test (descriptions-collapsible-sections.test.tsx) that covers the initial open state, toggling with aria-controls and expand and collapse all.