Conditional Section Reveal
Picking an option unfolds the extra fields it requires, the section easing its height open.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Conditional Section Reveal
*
* Choosing an option unfolds the fields that option requires. The section
* eases its height open and the fields inside arrive just behind theAbout this pattern
Forms that ask everything up front feel twice as long as they are, so the fields only one kind of customer needs stay out of sight until that customer is identified. The section eases its height open on a short curve — never a spring, because a panel that overshoots its own height flashes clipped text on the way back — and the fields inside rise into place just behind the growing edge, staggered barely enough to read as one movement. Choosing the other option folds the section away and the form closes the gap rather than leaving a hole where it was.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Business billing adds company and tax fields without a page change.
Related patterns
- Textarea AutogrowThe field takes one line-height more as the text wraps, easing into it rather than snapping.
- Form Reset ClearA wash crosses each row in turn and the value is dropped while the row is covered.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.