Progress Tabs
A component that renders tabbed content, specifically designed for implementing multi-step tasks.
In this guide, you'll learn how to use the Progress Tabs component.
Was this example helpful?
Usage#
<ProgressTabs defaultValue="general">
<ProgressTabs.List>
<ProgressTabs.Trigger value="general">
General
</ProgressTabs.Trigger>
<ProgressTabs.Trigger value="shipping">
Shipping
</ProgressTabs.Trigger>
<ProgressTabs.Trigger value="payment">
Payment
</ProgressTabs.Trigger>
</ProgressTabs.List>
<ProgressTabs.Content value="general">
{/* Content */}
</ProgressTabs.Content>
<ProgressTabs.Content value="shipping">
{/* Content */}
</ProgressTabs.Content>
<ProgressTabs.Content value="payment">
{/* Content */}
</ProgressTabs.Content>
</ProgressTabs>
API Reference#
Examples#
Set Status Indicator#
Was this example helpful?
Controlled Active Tab#
Was this example helpful?
Disabled Tab#
Was this guide helpful?