Stepper - Rails UI Components

Usage

<%= ui.stepper do %>
  <%= ui.stepper_step "Step 1", status: :completed %>
  <%= ui.stepper_step "Step 2", status: :current %>
  <%= ui.stepper_step "Step 3", status: :pending %>
<% end %>

<%= ui.stepper do %>
  <%= ui.stepper_step "Account", number: 1, status: :completed, description: "Enter details" %>
  <%= ui.stepper_step "Verification", number: 2, status: :current, description: "Verify email" %>
  <%= ui.stepper_step "Finish", number: 3, status: :pending, description: "Complete setup" %>
<% end %>

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`stepper_step`	`ui.stepper_step`	Individual step in the stepper.

Examples

Basic

<%= ui.stepper do %>
  <%= ui.stepper_step "Cart", status: :completed %>
  <%= ui.stepper_step "Shipping", status: :current %>
  <%= ui.stepper_step "Payment", status: :pending %>
<% end %>

With numbers

<%= ui.stepper do %>
  <%= ui.stepper_step "Account", number: 1, status: :completed %>
  <%= ui.stepper_step "Profile", number: 2, status: :current %>
  <%= ui.stepper_step "Review", number: 3, status: :pending %>
<% end %>

With descriptions

<%= ui.stepper do %>
  <%= ui.stepper_step "Account", number: 1, status: :completed, description: "Enter your details" %>
  <%= ui.stepper_step "Verification", number: 2, status: :current, description: "Verify your email" %>
  <%= ui.stepper_step "Finish", number: 3, status: :pending, description: "Complete your profile" %>
<% end %>

With icons

<%= ui.stepper do %>
  <%= ui.stepper_step "Cart", icon: "shopping-cart", status: :completed %>
  <%= ui.stepper_step "Shipping", icon: "truck", status: :current %>
  <%= ui.stepper_step "Payment", icon: "credit-card", status: :pending %>
  <%= ui.stepper_step "Confirmation", icon: "check-circle", status: :pending %>
<% end %>

All pending

<%= ui.stepper do %>
  <%= ui.stepper_step "Step 1", status: :pending %>
  <%= ui.stepper_step "Step 2", status: :pending %>
  <%= ui.stepper_step "Step 3", status: :pending %>
<% end %>

All completed

<%= ui.stepper do %>
  <%= ui.stepper_step "Step 1", status: :completed %>
  <%= ui.stepper_step "Step 2", status: :completed %>
  <%= ui.stepper_step "Step 3", status: :completed %>
<% end %>

With links

<%= ui.stepper do %>
  <%= ui.stepper_step "Cart", status: :completed, url: "#cart" %>
  <%= ui.stepper_step "Shipping", status: :current, url: "#shipping" %>
  <%= ui.stepper_step "Payment", status: :pending, url: "#payment" %>
<% end %>