Skip to content
v0.2.7

Steps

Progress indicators for multi-stage flows. Use visible labels for task-heavy screens, compact numbered steps for tight layouts, and HTMX swaps when the server owns the current step.

Default Rendered example
  1. completedCreate an account
  2. 2Select a plan
  3. 3Checkout
  4. 4Get started
Usage Example 
@steps.Steps(steps.Config{
    ShowLabels: true,
    AriaLabel:  "registration progress",
    Steps: []steps.Step{
        {Label: "Create an account", Status: steps.StatusCompleted},
        {Label: "Select a plan", Status: steps.StatusCurrent},
        {Label: "Checkout", Status: steps.StatusUpcoming},
        {Label: "Get started", Status: steps.StatusUpcoming},
    },
})

Default Steps

Horizontal progress without visible labels. Matches PenguinUI default number-only flow.

Default Steps Rendered example
  1. completed
  2. 2
  3. 3
  4. 4
Default Steps 
@steps.Steps(steps.Config{
    AriaLabel: "registration progress",
    Steps: []steps.Step{
        {AriaLabel: "Create an account", Status: steps.StatusCompleted},
        {AriaLabel: "Select a plan", Status: steps.StatusCurrent},
        {AriaLabel: "Checkout", Status: steps.StatusUpcoming},
        {AriaLabel: "Get started", Status: steps.StatusUpcoming},
    },
})

HTMX State Swap

Server owns state. Buttons swap the whole progress block with prev/next states, so no Alpine local state gets stranded or reset incorrectly.

HTMX State Swap Rendered example
  1. completedCreate an account
  2. 2Select a plan
  3. 3Checkout
  4. 4Get started

Current server state: step 2 of 4.

HTMX State Swap 
<div id="steps-demo-shell">
    @components.StepsHTMXFlow(2)
</div>

// Server handler returns @components.StepsHTMXFlow(step)
// Buttons use hx-get + hx-target="#steps-demo-shell" + hx-swap="outerHTML"

Vertical Steps

Vertical flow for tighter sidebars, setup assistants, or stacked onboarding guides.

Vertical Steps Rendered example
  1. completed
    Create an account
  2. 2
    Select a plan
  3. 3
    Checkout
  4. 4
    Get started
Vertical Steps 
@steps.Steps(steps.Config{
    Orientation: steps.OrientationVertical,
    ShowLabels:  true,
    AriaLabel:   "registration progress",
    Steps: []steps.Step{
        {Label: "Create an account", Status: steps.StatusCompleted},
        {Label: "Select a plan", Status: steps.StatusCurrent},
        {Label: "Checkout", Status: steps.StatusUpcoming},
        {Label: "Get started", Status: steps.StatusUpcoming},
    },
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/steps
Open v0.2.7 API
Spinner Tooltip