Steps

New

A step indicator component for guiding users through multi-step flows such as wizards, checkout processes, and onboarding sequences. Built on DaisyUI's steps utilities.

API Reference

c-steps (container)

Attribute	Description	Type	Default
`direction`	Layout orientation of the step list	string	`horizontal`

c-steps.item (individual step)

Attribute	Description	Type	Default
`color`	Fills the step indicator bubble with a semantic colour	string	`""`
`data_content`	Overrides the auto-incrementing step counter displayed inside the indicator bubble. Common values: `✓`, `✕`, `!`, or any single character.	string	`""`

direction

horizontal vertical

color

neutral primary secondary accent info success warning error

Semantic role: <ul> / <li> — the component renders a list of items. Steps are purely presentational; they do not expose progress information to assistive technologies by default.

Progress context: when the steps indicate a user's position in a multi-step flow, add aria-label="Step X of Y" or aria-current="step" on the active <c-steps.item> so screen readers can announce the current position.

Colour alone: never rely on colour alone to communicate completion state. Always include descriptive text inside each step item.

Examples

Basic Horizontal Steps

Register
Choose Plan
Purchase
Receive Product

<c-steps>
  <c-steps.item color="primary">Register</c-steps.item>
  <c-steps.item color="primary">Choose Plan</c-steps.item>
  <c-steps.item>Purchase</c-steps.item>
  <c-steps.item>Receive Product</c-steps.item>
</c-steps>

Custom Step Content

Use data_content to replace the auto-incrementing counter with a custom character such as a checkmark or error indicator.

Account
Verified
Payment
Confirm

<c-steps>
  <c-steps.item color="success" data_content="✓">Account</c-steps.item>
  <c-steps.item color="success" data_content="✓">Verified</c-steps.item>
  <c-steps.item color="error" data_content="✗">Payment</c-steps.item>
  <c-steps.item>Confirm</c-steps.item>
</c-steps>

Vertical Steps

Create account
Add team members
Configure integrations
Go live

<c-steps direction="vertical">
  <c-steps.item color="primary">Create account</c-steps.item>
  <c-steps.item color="primary">Add team members</c-steps.item>
  <c-steps.item color="primary">Configure integrations</c-steps.item>
  <c-steps.item>Go live</c-steps.item>
</c-steps>