# Step Indicator
# Basic Usage
A step indicator updates users on their progress through a multi-step process.
- completed not completed
- completed not completed
- completed not completed
Step 2 of 5 Household status
Test it!
<us-step-indicator
:step="step"
:steps="[
'Personal information',
'Household status',
'Supporting documents',
'Signature',
'Review and submit']"
/>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Labels
You can opt to display the page labels.
- Personal information
- Household status
- Supporting documents completed not completed
- Signature completed not completed
- Review and submit completed not completed
Step 2 of 5 Household status
<us-step-indicator :step="step" :steps="steps" :show-labels="true"/>
1
# Step Numbers
Display the the step numbers.
- Personal information
- Household status
- Supporting documents completed not completed
- Signature completed not completed
- Review and submit completed not completed
Step 2 of 5 Household status
- completed not completed
- completed not completed
- completed not completed
Step 2 of 5 Household status
<us-step-indicator :step="step" :steps="steps" :show-labels="true" :show-step-numbers="true"/>
<us-step-indicator :step="step" :steps="steps" :show-labels="false" :show-step-numbers="true"/>
1
2
2
# Sizes
Change the step number sizes with the size prop.
- completed not completed
- completed not completed
- completed not completed
Step 2 of 5 Household status
- completed not completed
- completed not completed
- completed not completed
Step 2 of 5 Household status
<us-step-indicator size="sm" :step="step" :steps="steps" :show-step-numbers="true" :show-labels="false"/>
<us-step-indicator size="lg" :step="step" :steps="steps" :show-step-numbers="true" :show-labels="false"/>
1
2
2
# Center Labels
Center the step labels with a center-labels prop.
- Personal information
- Household status
- Supporting documents completed not completed
- Signature completed not completed
- Review and submit completed not completed
Step 2 of 5 Household status
<us-step-indicator :step="step" :steps="steps" :center-labels="true" :show-labels="true" />
1
# Component Reference
# <us-step-indicator>
# Properties
| Property | Type | Default | Description |
|---|---|---|---|
| show-labels | boolean | false | Show page title labels |
| center-labels | boolean | false | Center page title labels |
| show-step-numbers | boolean | false | Show the page step numbers |
| size | string | 'sm' | The size of the page step numbers, can be 'sm' or 'lg' |
| step | number | 0 | The current step (0 referenced) |
| steps | array | null | An array of step titles, can be a simple array of strings or array of objects with a title key |