Uihub

Appearance

Stepper ​

Usage ​

See design usage guidelines

The Stepper component navigates users through complex workflows by breaking them down into simple steps.

Stepper ​

html
<x-steps active="2">
    <div name="x-step" title="1">Consumer Information</div>
    <div name="x-step" title="2">Contacts</div>
    <div name="x-step" title="3">Accounts</div>
    <div name="x-step" title="4">Settings</div>
</x-steps>

Rendered ​

html
<div>
    <div class="stepper-container">
        <div class="progressbar">
            <div class="step-item checked-item">
                <div class="progress-count">
                    <span>1</span>
                </div>
                <p class="progress-label">Consumer Information</p>
            </div>
            <div class="step-item checked-item">
                <div class="progress-count">
                    <span>2</span>
                </div>
                <p class="progress-label">Contacts</p>
            </div>
            <div class="step-item current-item">
                <div class="progress-count">
                    <span>3</span>
                </div>
                <p class="progress-label">Accounts</p>
            </div>
            <div class="step-item">
                <div class="progress-count">
                    <span>4</span>
                </div>
                <p class="progress-label">Settings</p>
            </div>
        </div>
    </div>
</div>

Examples ​

html
<x-steps active="0">
    <div name="x-step" title="1">Consumer Information</div>
    <div name="x-step" title="2">Contacts Information</div>
    <div name="x-step" title="3">Bill Information</div>
    <div name="x-step" title="4">Confirm Details</div>
</x-steps>

html
<x-steps active="1">
    <div name="x-step" title="1">Consumer Information</div>
    <div name="x-step" title="2">Contacts Information</div>
    <div name="x-step" title="3">Bill Information</div>
    <div name="x-step" title="4">Confirm Details</div>
</x-steps>

html
<x-steps active="2">
    <div name="x-step" title="1">Consumer Information</div>
    <div name="x-step" title="2">Contacts Information</div>
    <div name="x-step" title="3">Bill Information</div>
    <div name="x-step" title="4">Confirm Details</div>
</x-steps>

html
<x-steps active="3">
    <div name="x-step" title="1">Consumer Information</div>
    <div name="x-step" title="2">Contacts Information</div>
    <div name="x-step" title="3">Bill Information</div>
    <div name="x-step" title="4">Confirm Details</div>
</x-steps>

Usage Guidelines ​