stepper
A compact previous, current, and next frame for any consumer-owned sequence.
Example
Basic usage
<m-stepper role="group" aria-label="Choose date">
<button type="button" data-step="previous" aria-label="Previous day">←</button>
<time datetime="2026-08-21">Friday, August 21</time>
<button type="button" data-step="next" aria-label="Next day">→</button>
<button type="button" data-reset>Today</button>
</m-stepper>API
m-stepper supplies only the fused layout. Its native controls remain the event and state targets; the application supplies values, changes, routing, labels, and state.
Content/markup contract
| Part | Contract | Default | Description |
|---|---|---|---|
| Previous | button[data-step="previous"], first direct child | required | Moves toward the previous consumer-defined value. Give icon-only content an accessible name. |
| Current value | second direct child | required | Use the semantic element appropriate to the value, such as time, span, or output. Long text truncates rather than forcing the control wider. |
| Next | button[data-step="next"], third direct child | required | Moves toward the next consumer-defined value. Native disabled expresses an unavailable step. |
| Reset | button[data-reset], last direct child | omitted | Optional return action such as “Today” or “Latest.” Omit it when unnecessary, or disable it when already current. |
Native attributes and events
| Name | Target | Default | Description |
|---|---|---|---|
disabled | any direct button | false | Uses native disabled behavior and presentation for unavailable actions. |
aria-current | current-value child | — | Uses the token appropriate to the sequence, such as date, step, or page. |
click | any direct button | — | Handle the ordinary native event. The stepper emits no custom events. |
Styling
| Target | Value | Default | Description |
|---|---|---|---|
m-stepper | framed grid | available width | The current value takes remaining space between fixed controls. The frame follows --radius-md. |
| Second child | center track | raised surface | Uses a stronger label weight, internal separators, and ellipsis for constrained widths. |
Accessibility
Give the wrapper role="group" and an accessible name. Label icon-only previous and next buttons with the value they change, such as “Previous day” or “Next round.” Use semantic value markup where available—for example, keep a machine-readable date in time[datetime]. Apply the appropriate aria-current token only when useful, and prefer native disabled over an ARIA-only disabled state.
Notes
The arrow glyphs are authored content, so applications can use icons or direction-appropriate symbols without a Mica override. Keep the visible reset label short in narrow containers; its accessible name may be more descriptive. Without application code the markup still presents a readable current value and ordinary native controls; Mica adds no value-changing behavior.