Multi-step form

Get Ritla UI

One step of an onboarding flow: numbered progress, the step's title and why you ask, its fields, and Back / Continue. Continue checks the required fields first.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the block
$ npx ritla add multi-step-form
Also works with shadcn: npx shadcn@latest add @ritla/multi-step-form

Pricing

Built from

The Ritla UI components this block is made of. Each is installed with it.

Button
Progress Steps

Arabic and RTL notes

Mirrors

The steps run from the right: step 1 is the rightmost.
Back sits on the right and Continue on the left, in reading order.

Does not mirror

The phone number field stays left to right, with its +962 prefix first.

Numerals: Step numbers follow the numerals setting.