Components Stepper

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: ""