Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe Advanced options disclosure at the foot of a form that says how many hidden settings were changed and can start open to reveal an error.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this at the bottom of forms with a few rarely changed settings: timeouts, headers, retries.
Do not hide settings most people need, and do not use it for settings that depend on each other across the fold.
It builds on collapsible, which the CLI installs for you.
import { CollapsibleAdvancedOptions } from "@/components/collapsible-advanced-options"<CollapsibleAdvancedOptions changedCount={changed}>
<Input aria-label="Timeout" />
</CollapsibleAdvancedOptions>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The advanced fields. |
changedCount | number | 0 | Fields changed from their defaults. |
label | string | Advanced options | Button label. |
defaultOpen | boolean | false | Start open. |
defaultOpen lets you start open when an advanced field has an error.prefers-reduced-motion.| Key | Action |
|---|---|
| Enter or Space | opens or closes the options |
The pattern ships a Testing Library test (collapsible-advanced-options.test.tsx) that covers closed start and keyboard opening, the changed count and starting open.