Progress Accordion
A component that renders a set of expandable content, specifically designed for implementing multi-step tasks.
In this guide, you'll learn how to use the Progress Accordion component.
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#
Examples#
Only One Accordion Open#
Was this example helpful?
Allow Multiple Accordions to Open#
Was this example helpful?
Set Status Indicator#
Was this example helpful?
Controlled Accordion Open State#
Was this example helpful?
Disabled Accordion Item#
Was this guide helpful?