Steps

A step indicator for multi-stage flows. It runs sideways by default; set orientation="vertical" to stack the steps top to bottom.

In the vertical layout, put the title and description in a Box with flex="1" and bottom padding, so the separator stretches to the next step.

Markdown

Import

tsx

import { Steps } from "@indoku/ui"

Examples

Horizontal

Account

Profile

Done

tsx

function StepsHorizontal() {  return (    <Steps.Root defaultStep={1} count={items.length}>      <Steps.List>        {items.map((s, i) => (          <Steps.Item key={s.title} index={i}>            <Steps.Indicator>              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />            </Steps.Indicator>            <Steps.Title>{s.title}</Steps.Title>            <Steps.Separator />          </Steps.Item>        ))}      </Steps.List>    </Steps.Root>  )}

Vertical

orientation="vertical" with a fixed height.

Account

Create your login

Profile

Tell us about you

Done

Review and finish

tsx

function StepsVertical() {  return (    <Steps.Root orientation="vertical" defaultStep={1} count={items.length} height="260px">      <Steps.List>        {items.map((s, i) => (          <Steps.Item key={s.title} index={i}>            <Steps.Indicator>              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />            </Steps.Indicator>            <Box flex="1" pb="8">              <Steps.Title>{s.title}</Steps.Title>              <Steps.Description>{s.description}</Steps.Description>            </Box>            <Steps.Separator />          </Steps.Item>        ))}      </Steps.List>    </Steps.Root>  )}

Content and triggers

Steps.Content, PrevTrigger and NextTrigger.

Account

Profile

Done

Create your login

tsx

function StepsControlled() {  return (    <Steps.Root defaultStep={0} count={items.length}>      <Steps.List>        {items.map((s, i) => (          <Steps.Item key={s.title} index={i}>            <Steps.Indicator>              <Steps.Status complete={<LuCheck />} incomplete={<Steps.Number />} current={<Steps.Number />} />            </Steps.Indicator>            <Steps.Title>{s.title}</Steps.Title>            <Steps.Separator />          </Steps.Item>        ))}      </Steps.List>      {items.map((s, i) => (        <Steps.Content key={s.title} index={i}>          {s.description}        </Steps.Content>      ))}      <Steps.CompletedContent>All steps are complete.</Steps.CompletedContent>      <HStack mt="4">        <Steps.PrevTrigger asChild>          <Button>Prev</Button>        </Steps.PrevTrigger>        <Steps.NextTrigger asChild>          <Button>Next</Button>        </Steps.NextTrigger>      </HStack>    </Steps.Root>  )}

Props

Steps.Root

Prop	Type	Default	Description
`count*`	`number`	–	Total number of steps.
`step / defaultStep`	`number`	–	Controlled or initial current step (0-based).
`onStepChange`	`(details: { step: number }) => void`	–	Called when the step changes.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`linear`	`boolean`	`false`	Block jumping ahead of the current step.

* required. Style props and HTML attributes are accepted as well.

← Breadcrumb Pagination →

Created by @indokudev