AvenUI.Components.Steps (AvenUI v1.0.0)

Multi-step wizard component for guided workflows.

Features

Visual progress indicator
Linear and non-linear navigation
Step validation
Customizable steps
Responsive design
Keyboard navigation

Examples

<%!-- Basic steps --%>
<.steps current={@current_step}>
  <:step id="1" title="Personal Info" description="Basic information">
    <:content>
      <.input field={@form[:name]} label="Full name" />
      <.input field={@form[:email]} label="Email address" />
    </:content>
  </:step>

  <:step id="2" title="Address" description="Contact information">
    <:content>
      <.input field={@form[:address]} label="Address" />
      <.input field={@form[:city]} label="City" />
    </:content>
  </:step>

  <:step id="3" title="Review" description="Confirm your details">
    <:content>
      <div class="space-y-4">
        <p><strong>Name:</strong> <%= @form[:name].value %></p>
        <p><strong>Email:</strong> <%= @form[:email].value %></p>
      </div>
    </:content>
  </:step>
</.steps>

<%!-- With navigation --%>
<.steps current={@current_step} on_change="step_changed">
  <:step id="1" title="Step 1">...</:step>
  <:step id="2" title="Step 2">...</:step>
  <:step id="3" title="Step 3">...</:step>
</.steps>

LiveView handlers

def handle_event("step_changed", %{"step" => step_id}, socket) do
  {:noreply, assign(socket, :current_step, step_id)}
end

Summary

Functions

step_navigation(assigns)

Step navigation controls.

steps(assigns)

Functions

step_navigation(assigns)

Step navigation controls.

Attributes

current (:string) (required)
total (:integer) (required)
on_previous (:string) - Defaults to "previous_step".
on_next (:string) - Defaults to "next_step".
on_complete (:string) - Defaults to "complete_wizard".
disable_previous (:boolean) - Defaults to false.
disable_next (:boolean) - Defaults to false.
show_complete (:boolean) - Defaults to false.
class (:string) - Defaults to nil.

steps(assigns)

Attributes

id (:string) (required)
current (:string) (required) - Current step ID.
on_change (:string) - Event name when step changes. Defaults to nil.
orientation (:string) - Defaults to "horizontal". Must be one of "horizontal", or "vertical".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

step (required) - Accepts attributes:
- id (:string) (required)
- title (:string) (required)
- description (:string)
- disabled (:boolean)
- completed (:boolean)