Steps
A flow of a few steps. Done steps link back; later ones never link ahead.
openvibe-shared/kitJSON
Build it
kit.steps({ current: 1, items: [{ label: 'Opt in', href: '/merchant' }, { label: 'Verify the domain' }, { label: 'Choose a plan' }, { label: 'Live' }] })Props
items- list?
label- string?
current- number?
Anatomy
- stepsA flow of a few steps. Done steps link back; later ones never link ahead.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Steps
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- current
Tokens
color.accent.basecolor.text.primary
Android · Jetpack Compose
Material 3 Steps
Use Steps in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Steps in SwiftUI with the shared tokens.
Markup
Default
<nav class="ovk-steps" aria-label="Steps" style="--ovk-steps:4"><p class="ovk-steps-now"><span>Step 2 of 4</span> <strong>Verify the domain</strong></p><ol><li class="is-done"><a href="/merchant"><span class="ovk-steps-n" aria-hidden="true"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span><span class="ovk-steps-l">Opt in</span><span class="ovk-sr"> (done)</span></a></li><li class="is-current" aria-current="step"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">2</span><span class="ovk-steps-l">Verify the domain</span></span></li><li class="is-next"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">3</span><span class="ovk-steps-l">Choose a plan</span></span></li><li class="is-next"><span class="ovk-steps-item"><span class="ovk-steps-n" aria-hidden="true">4</span><span class="ovk-steps-l">Live</span></span></li></ol></nav>