Stepper

A stepper walks the user through a task one step at a time. RhombusKit's <rhombus-stepper>extends the CDK stepper, so linear gating, stepControl validation, and roving-focus keyboard come for free — themed entirely off the token contract, with no Angular Material and no new peer dependency.

Example

Review the items in your cart.

Where should we send it?

Enter your payment details and place the order.

When to use

  • For a sequential task — checkout, onboarding, a multi-part form — where progress moves step to step.
  • When later steps depend on earlier ones and you want to gate progress until each is valid (linear).

When not to use

  • For peer sections the user can visit in any order, use Tabs.
  • For independent collapsible panels (an FAQ, settings groups), use an Accordion.

Was this page helpful?