Stepper
<ts-stepper> vv0.4.0
The ts-stepper component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-stepper active-step="0" orientation="horizontal">Content</ts-stepper>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
activeStep | active-step | number | 0 | The index of the currently active step (0-based). |
linear | linear | boolean | false | If true, steps must be completed in order. |
orientation | orientation | "horizontal" | "vertical" | 'horizontal' | The layout orientation. |
| Name | Description |
|---|---|
*(default)* | Default slot for ts-step children. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
container | The stepper container. |
ts-stepper::part(container) { /* your custom styles */}<ts-stepper active-step="0" orientation="horizontal">Content</ts-stepper>import { TsStepper } from '@tessera-ui/react';
<TsStepper activeStep="0" orientation="horizontal">Content</TsStepper>