Steps

A stepper for multi-step flows. Steps does not own your flow — it reflects whatever step your app says is active.

Installation

Steps ships with the library — no separate install.

import { Steps } from 'panelui-native';

Usage

<Steps value={step} onValueChange={setStep}>
  {items.map((item, index) => (
    <Steps.Item key={item.title} step={index} className="flex-1">
      <Steps.Trigger>
        <Steps.Indicator />
        <Steps.Title>{item.title}</Steps.Title>
      </Steps.Trigger>
      {index < items.length - 1 ? <Steps.Separator /> : null}
    </Steps.Item>
  ))}
</Steps>

Composition

<Steps>
  <Steps.Item step={0}>
    <Steps.Trigger>
      <Steps.Indicator />
      <Steps.Title>…</Steps.Title>
      <Steps.Description>…</Steps.Description>
    </Steps.Trigger>
    <Steps.Separator />
  </Steps.Item>
</Steps>

• Steps.Item — One step. step is its zero-based position.
• Steps.Trigger — Makes the item selectable. Omit it for a read-only stepper.
• Steps.Indicator — The circle — step number, a check once complete, a spinner while loading.
• Steps.Title — Step heading.
• Steps.Description — Supporting line.
• Steps.Separator — Connector to the next step. Place it inside the item so it can read that item's state.

Variants

orientation

• horizontal (default)
• vertical

state

• inactive (default)
• active
• completed
• loading

API Reference

Steps

Steps.Item

Steps.Trigger

Steps.Indicator

Steps.Separator

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

Steps are zero-based internally but the indicator renders them as 1, 2, 3.