Skip to content
Pinky UI

forms

Progressive Disclosure Field

A field-level choice reveals only the dependent inputs required by the selected intent.

  • forms
  • disclosure
  • dependent-fields
  • choice
  • form
Related pattern

Field-level dependent disclosure; Progressive Form owns ordered multi-section workflows.

Live preview

Delivery

Pickup keeps the extra address fields closed.

Quick usage

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

<ProgressiveDisclosureField label="Delivery" defaultMode="ship" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

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

Props

PropTypeDefaultDescription
defaultMode"pickup" | "ship""pickup"The initial choice that determines whether dependent fields are visible.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Native radios communicate the primary choice and dependent content is announced as it appears.
  • The dependent address region remains in document flow and stacks on small screens.

Performance

  • Dependent inputs mount only for the selected branch; reduced motion resolves the same region immediately.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Checkout, setup and settings fields with one clear dependent branch

When not to use

  • Multi-step workflows or arbitrary branching form graphs

Skill

Purpose

Use Progressive Disclosure Field when one field choice determines a small, local set of dependent inputs.

Interaction

Start with the primary choice. When the user chooses a branch such as Ship, reveal only its address fields in the same document flow; switching back closes them without changing unrelated fields.

Usage

tsx
<ProgressiveDisclosureField label="Delivery" defaultMode="ship" />

Accessibility

Use native radio semantics for the primary choice and a labelled dependent region. Do not hide required fields only behind colour or an unexplained animation.

Reduced motion

Resolve the dependent region immediately while preserving the same ordering, labels and live state message.

Open this skill on its own page