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#
<ProgressAccordion type="single">
<ProgressAccordion.Item value="general">
<ProgressAccordion.Header>
General
</ProgressAccordion.Header>
<ProgressAccordion.Content>
{/* Content */}
</ProgressAccordion.Content>
</ProgressAccordion.Item>
<ProgressAccordion.Item value="shipping">
<ProgressAccordion.Header>
Shipping
</ProgressAccordion.Header>
<ProgressAccordion.Content>
{/* Content */}
</ProgressAccordion.Content>
</ProgressAccordion.Item>
</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?