## Anatomy
The Stepper consists of four primary elements that work together to show a user's progress through multiple steps.
1. Completed step
2. Current step
3. Not started step
4. Step label
## Options
The Stepper supports horizontal orientation and configurable step count to accommodate various progress tracking scenarios.
#### Horizontal
```tsx lines theme={null}
import { Stepper } from "@servicetitan/anvil2";
function App() {
return (
Step Label
Step Label
Step Label
Step Label
);
}
export default App;
```
Steppers are horizontal by default.
#### Step Count
```tsx lines theme={null}
import { Stepper, Flex } from "@servicetitan/anvil2";
function App() {
return (
Step Label
Step Label
Step Label
Step Label
Step Label
Step Label
Step Label
Step Label
Step Label
);
}
export default App;
```
Steppers support 2–6 steps.
## Behavior
The Stepper responds to different screen sizes with responsive behaviors while handling label overflow.
### Visual States
#### Default
```tsx lines theme={null}
import { Stepper } from "@servicetitan/anvil2";
function App() {
return (
Default
Selected
In Progress
Complete
Focus Visible (false)
);
}
export default App;
```
#### Overflow
Labels wrap when they exceed available space.
```tsx lines theme={null}
import { Stepper, Flex } from "@servicetitan/anvil2";
function App() {
return (
Step Label that is very long and will overflow
Step LabelStep LabelStep LabelStep LabelStep Label
Add vertical example here
);
}
export default App;
```
#### Responsive
```tsx lines theme={null}
import { Stepper } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Smaller screens use the mobile variant.
## Usage Guidelines
Use the Stepper when users need to be guided through a linear series of steps to complete a task.
### When not to use
* For navigation, use a navigation-focused component instead of a Stepper
* Non-linear progression, i.e., steps that can be completed in any order
### Alternatives
#### Stepper vs Edit Card
Steppers move through a linear progression of steps. Edit Cards can be used for both linear and unrelated blocks of content.
Steppers are typically scoped to the whole view, e.g., a fullscreen Dialog, while an Edit Card can be scoped within smaller sections of a view, e.g., part of a Drawer screen.
Steppers can only give summaries of the flow indirectly, typically on the final step of a flow, while an Edit Card can show a summary in most of its states.
Steppers and Edit Cards may be used together if a particular flow is complex enough.
#### Stepper vs Tab
Tabs help organize information about a subject on the page, while a Stepper helps complete a flow. They can't substitute for each other, although both could be used on the same page.
### How to Use
#### Always have one Step active in incomplete Steppers
The active step is always the step the user is specifically on. By default this is the first step.
```tsx lines theme={null}
import { Stepper } from "@servicetitan/anvil2";
function App() {
return (
Step 1
Step 2
Step 3
);
}
export default App;
```
**Do**
Example on step 2. In this scenario, step 1 will always be completed.
#### Always use Buttons to navigate the Stepper
The Stepper alone should never be the only means of navigating between steps. Actions to go forward and back should be provided somewhere in the experience.
```tsx lines theme={null}
import { Stepper, Flex } from "@servicetitan/anvil2";
function App() {
const stepData = [
{
id: "s1",
controls: "p1",
title: "Step 1",
content: "Step 1",
},
{
id: "s2",
controls: "p2",
title: "Step 2",
content: "Step 2",
},
{
id: "s3",
controls: "p3",
title: "Step 3",
content: "Step 3",
},
{
id: "s4",
controls: "p4",
title: "Step 4",
content: "Step 4",
},
];
return (
{stepData.map((step) => (
{step.title}
))}
{stepData.map((step) => (
{step.content}
))}
);
}
export default App;
```
**Do**
#### Linear steps
Steppers should follow a linear sequence, meaning a user must complete the steps in a specific order.
#### Returning to, and editing previous steps
When users return to previous steps in an incomplete flow, the Stepper itself will prevent users from returning back. The component does not alter user responses, the consequences of users editing prior steps is on the implementor. Some options to consider include:
* Clearing all subsequent steps when a user edits a previous step
* Identifying which changes impact downstream inputs, and warning users about the changes. No impact changes do not influence future steps.
#### Number of steps
Steppers support 2–6 steps. If a flow requires more than 6 steps, consider breaking it up into smaller chunks.
```tsx lines theme={null}
import { Stepper, Flex } from "@servicetitan/anvil2";
function App() {
return (
One step Stepper
Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
);
}
export default App;
```
**Don't**
Avoid having too few or too many steps.
#### Avoid conditionally generated steps
Within an established Stepper, user decisions within the flow should not change the number of steps, i.e., if a flow starts with 5 steps, it should always end with 5 steps.
## Keyboard Interaction
Users can navigate the Stepper using standard keyboard controls.
| Key | Interaction |
| ----- | ------------------------------------------ |
| Tab | Navigates linked steps in normal Tab order |
| Enter | Selects the focused linked step |
