Stepper

The steps of a process, marking the done ones and the current one.

Import

Copy code

import { Stepper } from '@k8ordo/ui';

Usage

value is the index of the current step (0-based). Done steps show a check and are read as completed; the current step carries aria-current="step".

PlanPick what fitscompleted
PaymentCard or invoice
ReviewCheck and send

tsx

Copy code

const steps = [
  { label: 'Plan', description: 'Pick what fits' },
  { label: 'Payment', description: 'Card or invoice' },
  { label: 'Review', description: 'Check and send' },
];

<Stepper aria-label="Sign-up" steps={steps} value={1} />

Going back to a done step

With interactive, done steps become buttons and onChange receives the index of the one pressed. Steps ahead cannot be jumped to.

ReviewCheck and send

tsx

Copy code

const [step, setStep] = useState(2);

<Stepper
  aria-label="Sign-up"
  interactive
  onChange={setStep}
  steps={steps}
  value={step}
/>

Vertical

PlanPick what fitscompleted
PaymentCard or invoice
ReviewCheck and send

tsx

Copy code

<Stepper
  aria-label="Sign-up"
  orientation="vertical"
  steps={steps}
  value={1}
/>

Props

steps: Type: readonly StepperStep[]; Default: -
defaultValue?: Type: number; Default: -
interactive?: Type: boolean; Default: false
onChange?: Type: (value: number) => void; Default: -
orientation?: Type: 'horizontal'|'vertical'; Default: 'horizontal'
ref?: Type: Ref<HTMLOListElement>; Default: -
value?: Type: number; Default: -

Prop	Type	Default
`steps`	`readonly StepperStep[]`	-
`defaultValue?`	`number`	-
`interactive?`	`boolean`	`false`
`onChange?`	`(value: number) => void`	-
`orientation?`	`'horizontal'`\|`'vertical'`	`'horizontal'`
`ref?`	`Ref<HTMLOListElement>`	-
`value?`	`number`	-

Type base (some attrs are managed internally): OlHTMLAttributes<HTMLOListElement>

Wording this component renders (labels, placeholders, and the like) comes from the message dictionary when no prop sets it. To change it, see: i18n