Disclosures let people choose when to inspect details. Use them for supporting explanations or advanced options that would otherwise make a page difficult to scan. Keep essential instructions, the main action, and important errors visible.

Choose the components

Use DisclosureGroup for an expandable section in the current page. Its label names a native header button, which exposes expanded state and controls the content region. Use navigation links when opening a different destination; a disclosure should not look like a link and then unexpectedly expand inline.

Each DisclosureGroup owns its expansion independently unless the application controls it. To coordinate multiple sections, use expanded and onExpandedChange. The library does not impose a single-open accordion policy across siblings.

Follow the interaction sequence

1. Give the closed section a label that predicts its content.
2. Let the person activate its header by pointer, Enter, or Space.
3. Reveal supporting content in the page's reading order.
4. Keep the expanded state visible and allow the same header to collapse it.
5. Preserve application data that should survive closing and reopening.

For “Advanced delivery options,” keep the selected summary visible outside the disclosure if it affects the submitted result. Do not make people reopen a section merely to learn what they selected.

States and recovery

DisclosureGroup defaults to collapsed. Expanded content is removed after collapse completes; an animated close keeps it mounted for the exit transition. With animated={false}, the content is removed immediately. Local state inside an unmounted child does not persist, so hold drafts that must survive collapse in the parent application state.

Lazy loading is application behavior. If expansion starts a request, show waiting inside the section and retain a retry action when it fails. Do not close the section merely because its content failed to load.

A disabled header prevents user toggling; it does not erase the current content. Keep the reason visible if disabling the disclosure affects the task. If validation finds an error inside a closed section, open that section and direct attention to the error rather than leaving it hidden.

Content

Use a concise noun phrase that identifies the content, such as “Delivery details,” rather than a generic “Show more.” Keep the label stable between open and closed states unless its wording explicitly describes the action. Avoid deeply nested disclosures whose labels lose the surrounding context.

Accessibility

Keep the header label free of nested links or buttons; it is already inside an interactive button. Structure the revealed content with meaningful headings and labels. Test the expanded state and reading order with assistive technology.

When the application collapses a section containing keyboard focus, move focus to the disclosure header or another appropriate visible destination before removing the content. Do not assume programmatic collapse restores focus. Test animated and reduced-motion behavior, including rapid close and reopen, in the actual composition.

Related implementation

See DisclosureGroup for supported variants and expansion props. Use Forms for draft ownership and Loading for lazy content.

Further reading

• Apple: Disclosure controls