Components Stepper

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Stepper

Stepper components visually guide users through a sequence of steps in a defined process, such as completing a form or onboarding flow.
Default stepper
heex 
            <.stepper
      steps={[
        %{
          name: "Account Details",
          description: "Basic information",
          complete?: true,
          active?: true,
          on_click: JS.push("navigate", value: %{target_index: 0})
        },
        %{
          name: "Preferences",
          description: "Set preferences",
          complete?: false,
          active?: false,
          on_click: JS.push("navigate", value: %{target_index: 1})
        },
        %{
          name: "Confirmation",
          description: "Review and confirm",
          complete?: false,
          active?: false,
          on_click: JS.push("navigate", value: %{target_index: 2})
        }
      ]}
      size="sm"
    />
Log in to view
Orientations
heex 
            <.stepper
      steps={[
        %{
          name: "Account Details",
          description: "Basic information",
          complete?: true,
          active?: true,
          on_click: JS.push("navigate", value: %{target_index: 0})
        },
        %{
          name: "Preferences",
          description: "Set preferences",
          complete?: false,
          active?: false,
          on_click: JS.push("navigate", value: %{target_index: 1})
        },
        %{
          name: "Confirmation",
          description: "Review and confirm",
          complete?: false,
          active?: false,
          on_click: JS.push("navigate", value: %{target_index: 2})
        }
      ]}
      size="sm"
      orientation="vertical"
    />
      <.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="sm"
  orientation="horizontal"
  class="mt-12"
/>
Log in to view
Sizes
heex 
          <.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="sm"
/>
<.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: false,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="md"
  class="mt-12"
/>
<.stepper
  steps={[
    %{
      name: "Account Details",
      description: "Basic information",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 0})
    },
    %{
      name: "Preferences",
      description: "Set preferences",
      complete?: true,
      active?: false,
      on_click: JS.push("navigate", value: %{target_index: 1})
    },
    %{
      name: "Confirmation",
      description: "Review and confirm",
      complete?: true,
      active?: true,
      on_click: JS.push("navigate", value: %{target_index: 2})
    }
  ]}
  size="lg"
  class="mt-12"
/>
Log in to view
Properties
elixir 
          attr :steps, :list, required: true
attr :orientation, :string, default: "horizontal", values: ["horizontal", "vertical"]
attr :size, :string, default: "md", values: ["sm", "md", "lg"]
attr :class, :string, default: ""