Stepper · ui.voila.dev

Profile
2
Availability
3
Review

<Stepper.Root value={2}>
	<Stepper.Item step={1}>
		<Stepper.Indicator />
		<Stepper.Title>Profil</Stepper.Title>
		<Stepper.Separator />
	</Stepper.Item>
	<Stepper.Item step={2}>…</Stepper.Item>
</Stepper.Root>

value is the step the user is on; each item knows whether it is done, current or still ahead from its own step. Leave the separator off the last item.

orientation="vertical" stacks the steps, with Stepper.Description under each title.

API

Stepper.Root

Prop	Type	Default
`value`	`number`	required
`orientation`	`StepperOrientation`	`"horizontal"`

Plus every <ol> prop. Source: stepper/components/stepper-root.tsx.

Stepper.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: stepper/components/stepper-description.tsx.

Stepper.Indicator

Plus every <span> prop. Source: stepper/components/stepper-indicator.tsx.

Stepper.Item

Prop	Type	Default
`step`	`number`	required
`state`	`StepperStepState`	—	Overrides the state derived from the root's `value` — for flows whose progression is not a simple index (a failed step, a skipped one).

Plus every <li> prop. Source: stepper/components/stepper-item.tsx.

Stepper.Separator

Plus every <div> prop. Source: stepper/components/stepper-separator.tsx.

Stepper.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: stepper/components/stepper-title.tsx.