Skip to content
Pinky UI

onboarding

Progressive Disclosure

A small pattern for revealing advanced controls only when requested.

  • onboarding
  • disclosure
  • settings
  • forms

Live preview

Cache duration · 30 days

Quick usage

usage
import { ProgressiveDisclosure } from "@pinky-ui/systems";

<ProgressiveDisclosure>{advancedOptions}</ProgressiveDisclosure>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use to keep advanced options out of the primary path until the user requests them.

Use when

Settings have a clear basic workflow and a smaller expert layer.

Avoid

Hiding essential errors, permissions, or required controls behind an unlabeled toggle.

Accessibility

Use a labeled button with aria-expanded and keep revealed controls in the DOM order.

Keyboard and touch

The reveal control is a native button with a generous touch target.

Reduced motion and performance

Collapse/expand immediately when requested and mount expensive detail only when open.

Composition and anti-patterns

Use ExpandableListRow for row details; this pattern is about product complexity, not a generic accordion.

Open this skill on its own page