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.

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#

Examples#

Set Status Indicator#

Controlled Active Tab#

Disabled Tab#