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.
Standalone
disclosure group.tsx
<NativeDisclosureGroup label="Order details" icon={<Receipt size={18} />}>
<NativeLabelValue label="Reference" value="REF-88213" />
<NativeLabelValue label="Date" value="Jun 15, 2025" />
</NativeDisclosureGroup>Example
Hides secondary details until the user asks to see them, keeping the default view to just the summary.
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 | - |