Stepper macrolite

Wizard progress: numbered steps, finished ones ticked.

Built from: Box Icon Text
Children: none

Preview

Loading the renderer…

stepsrequired

current

orientation

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Stepper",
          "steps": [
            {
              "label": "Account"
            },
            {
              "label": "Team"
            },
            {
              "label": "Done"
            }
          ],
          "current": 1
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Stepper rendered by the React renderer on Web — **Web** React

Stepper rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Stepper rendered by the Compose renderer on Android — **Android** Compose

Stepper rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-stepper, painted by each native renderer.

Variants

orientation · horizontal

orientation · vertical

Props

Prop	Type	Default	Description
`steps`required	`[step]`	–	The steps in order.
`current`bind	`number`	`0`	The 0-based index of the active step.
`orientation`	`horizontal \| vertical`	`"horizontal"`	In a row or stacked.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: list
Semantics: list; the current step aria-current=step. Each step a listitem labelled stepDone/stepCurrent/stepUpcoming; the current one aria-current=step ($a11y).

Not focusable; no keys.

Theming

Recipe parts: Stepper/rootStepper/stepStepper/markerStepper/checkStepper/numberStepper/bodyStepper/labelStepper/description
Keyed by: orientationstatus:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme