Expandable

Expandable is progressive disclosure for a small amount of detail: the sub-fields of a parameter, an optional note, an aside a reader can open in place. Like Accordion it is built on the native <details> element, so it is keyboard-operable and screen-reader-correct with zero JavaScript. Where an accordion is a bordered card, an expandable is a light hairline, sized to nest.

Basic

Advanced options

These settings are optional. Most sites never touch them, which is why they start collapsed.

<Expandable title="Advanced options">
These settings are optional...
</Expandable>

Open by default

Pass defaultOpen to start expanded:

Shown by default

Readers can still collapse it. The state is the native element's, not a script's.

<Expandable title="Shown by default" defaultOpen>
...
</Expandable>

Nesting

Because it is light, Expandable nests cleanly, for example under a field to reveal its sub-properties:

user

An expandable reads as part of the surrounding text, not as a separate panel, so a tree of them stays legible.

address

Nested detail, one level deeper.

Props

Prop	Type	Default	Effect
`title`	string	`Show more`	The always-visible summary line
`defaultOpen`	boolean	`false`	Start expanded (`open` is accepted too)