Progressive disclosure
A button that shows and hides a panel of secondary content, such as advanced options. Keeps the default view short.
Code
demo.tsx
import {Button, ProgressiveDisclosure, Text} from '@earendil-works/elanor-react';
export default function ProgressiveDisclosureDemo() {
return (
<ProgressiveDisclosure.Root>
<ProgressiveDisclosure.Trigger render={<Button hierarchy="secondary" />}>
Show billing details
</ProgressiveDisclosure.Trigger>
<ProgressiveDisclosure.Panel>
<Text>Invoices are sent on the first day of each month to the billing contact.</Text>
</ProgressiveDisclosure.Panel>
</ProgressiveDisclosure.Root>
);
}Usage
import {ProgressiveDisclosure} from '@earendil-works/elanor-react';
<ProgressiveDisclosure.Root>
<ProgressiveDisclosure.Trigger />
<ProgressiveDisclosure.Panel />
</ProgressiveDisclosure.Root>;defaultOpen starts the panel open; open and onOpenChange control it.
Keep content mounted
A closed panel unmounts its content, so unsaved input is lost. keepMounted keeps it: edit the field, close the panel, and reopen it.
Code
keep-mounted.tsx
import {Button, Field, Input, ProgressiveDisclosure} from '@earendil-works/elanor-react';
export default function ProgressiveDisclosureKeepMounted() {
return (
<ProgressiveDisclosure.Root defaultOpen>
<ProgressiveDisclosure.Trigger render={<Button hierarchy="secondary" />}>
Advanced options
</ProgressiveDisclosure.Trigger>
<ProgressiveDisclosure.Panel keepMounted>
<Field.Root name="deployment-region">
<Field.Label>Deployment region</Field.Label>
<Input defaultValue="eu-central-1" />
</Field.Root>
</ProgressiveDisclosure.Panel>
</ProgressiveDisclosure.Root>
);
}API
ProgressiveDisclosure.Root
Accepts Base UI Collapsible.Root props.
ProgressiveDisclosure.Trigger
Accepts Base UI Collapsible.Trigger props.
ProgressiveDisclosure.Panel
Accepts Base UI Collapsible.Panel props.