Progress Tabs
A set of layered content panels, known as tabs, specifically designed for implementing multi-step tasks
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#
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.
| Prop | Type | Default |
|---|---|---|
activationMode | "manual"| "automatic" | - |
defaultValue | string | - |
dir | Direction | - |
onValueChange | function | - |
orientation | "horizontal"| "vertical" | - |
value | string | - |
Was this helpful?
ProgressTabs.ProgressIndicator#
| Prop | Type | Default |
|---|---|---|
status | "not-started"| "in-progress"| "completed" | - |
Was this helpful?