Progressive disclosure
Show the few things most people need, and keep the rest one press away, clearly labelled.
You earn 1.67 days of annual leave each month. Unused days above 10 expire on 31 March.
The problem
Screens that show every option at once are slow to scan and intimidating. But hiding things behind vague “More” buttons or icons means people never find them.
When to use it
Use it for
- FAQs and help content.
- Advanced settings most people never change.
- Detail that supports a decision but isn't needed for it.
Not for
- Anything needed to complete the task: show it.
- Error messages and warnings: never hide them.
- Content people compare side by side: collapsing it forces them to remember.
Anatomy
- SummaryAlways visible. Enough to decide whether to open.
- DisclosureAn AccordionItem heading, a “Show advanced settings” button, or an info icon with a Popover.
- DetailRevealed in place, so the reader keeps their position.
How to build it
- Sort content by how many people need it. Show the top; disclose the rest.
- Write disclosure labels that say what's inside: “Show advanced settings”, not “More”.
- Use AccordionItem for sections, Popover for a short explanation, Drawer for a whole panel.
- Open the item that matters by default when people arrive from a link to it.
- Never nest disclosures more than one level deep.
app.tsx
import { AccordionItem } from "@nexera-ui/react";
<AccordionItem title="How is my leave balance calculated?" defaultExpanded>
You earn 1.67 days of annual leave each month. Unused days above 10 expire on 31 March.
</AccordionItem>
<AccordionItem title="Can I take leave I haven't earned yet?">
Yes, up to 5 days, with your manager's approval.
</AccordionItem>Accessibility
| Key | Action |
|---|---|
| Enter / Space | Opens or closes the focused section. |
| Tab | Moves to the next section heading or into open content. |
- Each heading is a button with aria-expanded, inside a real heading element at the right level.
- Collapsed content is hidden from assistive technology, not just visually.
- Browser find-in-page can't search collapsed text, so don't hide what people search for.
Do and don't
DoLabel what's hidden: “Show 4 advanced settings”.
Don'tHide options behind a “…” with no label.
DoKeep required fields and errors visible.
Don'tCollapse a section that contains an error.
DoUse one level of disclosure.
Don'tPut an accordion inside a popover inside a drawer.