Progress Accordion
A set of expandable content panels, specifically designed for implementing multi-step tasks
General
Shipping
Was this example helpful?
Usage#
1<ProgressAccordion type="single">2 <ProgressAccordion.Item value="general">3 <ProgressAccordion.Header>4 General5 </ProgressAccordion.Header>6 <ProgressAccordion.Content>7 {/* Content */}8 </ProgressAccordion.Content>9 </ProgressAccordion.Item>10 <ProgressAccordion.Item value="shipping">11 <ProgressAccordion.Header>12 Shipping13 </ProgressAccordion.Header>14 <ProgressAccordion.Content>15 {/* Content */}16 </ProgressAccordion.Content>17 </ProgressAccordion.Item>18</ProgressAccordion>
API Reference#
ProgressAccordion#
This component is based on the Radix UI Accordion primitves.
ProgressAccordion.Header#
| Prop | Type | Default |
|---|---|---|
status | "not-started"| "in-progress"| "completed" | "not-started" |
Was this helpful?
Examples#
Single#
General
Shipping
Was this example helpful?
Multiple#
General
Shipping
Was this example helpful?