Skip to content
Iryx UI

Navigation

IStepper ​

Progress through a task with a known number of stages, for when seeing how much is left helps the reader.

Step 2 of 0

The model is the current step number, starting at 1. A string item is expanded to { title }.

Titles only ​

Step 2 of 0

Linear ​

By default any step can be clicked. linear restricts the reader to steps already reached, for when a later step depends on an earlier one.

Step 1 of 0

Vertical ​

Step 2 of 0

Props ​

PropTypeDefaultDescription
items(StepperItemOption | string)[][]The steps
orientation'horizontal' | 'vertical''horizontal'Layout and arrow-key axis
linearbooleanfalseOnly allow steps already reached
unstyledboolean—Drop built-in classes
classstring—Merged with the built-in classes
ui{ root?, item?, trigger?, indicator?, content?, title?, description?, separator? }—Per-slot class overrides
ts
interface StepperItemOption {
  title: string
  description?: string
  disabled?: boolean
}

Slots ​

SlotWhen to use it
indicatorReplaces the number in the circle, receiving the step

A stepper shows where you are, not what has been filled in. Validation belongs to IForm.