Component
Disclosure group
A row that expands to reveal more content beneath it, with a chevron that rotates open, used to hide secondary detail until asked for.
The primitive
disclosure group.tsx
<NativeDisclosureGroup label="Transaction details" icon={<Receipt size={18} />}>
<NativeLabelValue label="Reference" value="REF-88213" />
<NativeLabelValue label="Date" value="Jun 27, 2026" />
</NativeDisclosureGroup>Example
Hides the fee breakdown on a payment receipt until the user asks to see it, keeping the default view to just the total.
Amount$250.00
Network fee$0.40
Service fee$1.10
disclosure-group-example.tsx
<NativeLabelValue label="Amount" value="$250.00" />
<NativeDisclosureGroup label="Fee breakdown">
<NativeLabelValue label="Network fee" value="$0.40" />
<NativeLabelValue label="Service fee" value="$1.10" />
</NativeDisclosureGroup>Capabilities
| Prop | Type | Description |
|---|---|---|
| labelrequired | string | — |
| icon | React.ReactNode | — |
| defaultOpen | boolean | — |
| childrenrequired | React.ReactNode | — |
| className | string | — |