Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="midwest-steps" role="tablist" aria-label="Checkout progress">
  <div class="midwest-step current">
    <button class="step-button" role="tab" aria-selected="true" aria-current="step" type="button">
      <span class="copy">Account</span>
    </button></div>
  <div class="midwest-step">
    <button class="step-button" role="tab" aria-selected="false" type="button">
      <span class="copy">Details</span>
    </button></div>
  <div class="midwest-step">
    <button class="step-button" role="tab" aria-selected="false" type="button">
      <span class="copy">Review</span>
    </button></div>
  <div class="midwest-step">
    <button class="step-button" role="tab" aria-selected="false" type="button">
      <span class="copy">Confirm</span>
    </button></div>
</div>
1
2
3
4
5
6
7
8
9
<% steps = ["Account", "Details", "Review", "Confirm"] %>
<% current = (params[:current_step] || 1).to_i.clamp(1, steps.size) %>
<% aria_label = params[:label].presence || "Checkout progress" %>
<%= midwest_steps(label: aria_label) do |s| %>
  <% steps.each_with_index do |label, i| %>
    <% s.with_step(label, complete: i + 1 < current, current: i + 1 == current) %>
  <% end %>
<% end %>

Playground

Step through a 4-step flow by changing the current step. Steps before the current step are automatically shown as complete.

Param Description Input

The active step (1–4)

Accessible label for the step list (aria-label)

Orientation of the steps

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Steps/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."