Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Accordion Settings Status

ProNew

Settings groups in an accordion whose headers summarise their state, such as 2 of 3 on, as part of their accessible name, with several groups open at once.

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 for preference pages with several groups where the overall state matters: notifications, privacy, integrations.

Do not use it for settings that are interdependent in ways the summary would hide.

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.

Log in Get Pro for $35

Props

AccordionSettingsStatus

Prop	Type	Default	Description
`groups`	`{ id, title, options: { id, label }[] }[]`	-	Groups of switches.
`values`	`Record<string, boolean>`	-	On state by option id.
`onValuesChange`	`(values) => void`	-	Called with the whole map.

Accessibility

The header's name carries the summary ("Email, 2 of 3 on"), with the separator as hidden text.
Every switch has a visible label; the groups are independent and can all be open.
The summary updates as switches change, so a person can verify the result without opening anything.

Keyboard

Key	Action
Enter or Space on a header	opens the group
Space on a switch	toggles it

Testing

The pattern ships a Testing Library test (accordion-settings-status.test.tsx) that covers summaries in names, updates, all on and several groups open.