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.

At ACME, we're dedicated to providing you with an exceptional shopping experience. Our wide selection of products caters to your every need, from fashion to electronics and beyond. We take pride in our commitment to quality, customer satisfaction, and timely delivery. Our friendly customer support team is here to assist you with any inquiries or concerns you may have. Thank you for choosing ACME as your trusted online shopping destination.

Was this example helpful?

Usage#

Code
import { ProgressTabs } from "@medusajs/ui"
Code
1<ProgressTabs defaultValue="general">2  <ProgressTabs.List>3    <ProgressTabs.Trigger value="general">4      General5    </ProgressTabs.Trigger>6    <ProgressTabs.Trigger value="shipping">7      Shipping8    </ProgressTabs.Trigger>9    <ProgressTabs.Trigger value="payment">10      Payment11    </ProgressTabs.Trigger>12  </ProgressTabs.List>13  <ProgressTabs.Content value="general">14    {/* Content */}15  </ProgressTabs.Content>16  <ProgressTabs.Content value="shipping">17    {/* Content */}18  </ProgressTabs.Content>19  <ProgressTabs.Content value="payment">20    {/* Content */}21  </ProgressTabs.Content>22</ProgressTabs>

API Reference#

ProgressTabs#

This component is based on the Radix UI Tabs primitves.

PropTypeDefault
activationMode
"manual"
|"automatic"
-
defaultValue
string
-
dir
Direction
-
onValueChange
function
-
orientation
"horizontal"
|"vertical"
-
value
string
-
Was this helpful?

ProgressTabs.Trigger#

PropTypeDefault
status
"not-started"
|"in-progress"
|"completed"
"not-started"
Was this helpful?

Examples#

Set Status Indicator#

General step is completed.

Was this example helpful?

Controlled Active Tab#

This is the General step.

Was this example helpful?

Disabled Tab#

This is the General step.

Was this guide helpful?
Ask Anything
FAQ
What is Medusa?
How can I create a module?
How can I create a data model?
How do I create a workflow?
How can I extend a data model in the Product Module?
Recipes
How do I build a marketplace with Medusa?
How do I build digital products with Medusa?
How do I build subscription-based purchases with Medusa?
What other recipes are available in the Medusa documentation?
Chat is cleared on refresh
Line break