SutraUI.StepperWizard (Sutra UI v0.4.0)

A composable wizard shell for multi-step forms and flows.

Stepper Wizard composes SutraUI.Stepper for the progress navigation and renders only the active step body. The parent LiveView owns form state, validation, persistence, and step transitions.

Examples

<.form for={@form} phx-change="validate" phx-submit="submit_wizard">
  <.stepper_wizard id="checkout" current={@step} errors={@step_errors}>
    <:step id="shipping" label="Shipping">
      <.shipping_fields form={@form} />
    </:step>
    <:step id="payment" label="Payment">
      <.payment_fields form={@form} />
    </:step>
    <:step id="confirm" label="Confirm">
      <.order_review order={@order} />
    </:step>

    <:actions>
      <.button type="button" phx-click="previous_step">Back</.button>
      <.button type="submit">Continue</.button>
    </:actions>
  </.stepper_wizard>
</.form>

Summary

Functions

stepper_wizard(assigns)

Functions

stepper_wizard(assigns)

Attributes

id (:string) (required) - Unique DOM id for the wizard.
current (:string) - ID of the active step. Defaults to the first step. Defaults to nil.
errors (:map) - Map of step id to error message. Error steps are reflected in the navigation. Defaults to %{}.
orientation (:string) - Stepper orientation. Defaults to "horizontal". Must be one of "horizontal", "vertical", or "responsive".
variant (:string) - Stepper visual variant. Defaults to "default". Must be one of "default", or "outline".
class (:any) - Additional classes for the wizard root. Defaults to nil.
nav_class (:any) - Additional classes for the step navigation. Defaults to nil.
panel_class (:any) - Additional classes for the active panel. Defaults to nil.
actions_class (:any) - Additional classes for the actions wrapper. Defaults to nil.
Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["aria-label"].

Slots

step (required) - Accepts attributes:
- id (:string) (required) - Stable step id.
- label (:string) (required) - Navigation label.
- description (:string) - Optional navigation description.
- icon (:string) - Custom marker icon.
actions - Optional action row rendered below the active panel.