Stepper

Stepper shows the steps of a process and which one a person is on. Press Next and Back, or a step itself:

1. ✓Step 1 of 4: Cart, completed. Two itemsCartTwo items
2. 2Step 2 of 4: Address, currentAddress
3. 3Step 3 of 4: Payment, not startedPayment
4. 4Step 4 of 4: Review, not startedReview

BackNext

StepperDemo.tsx

import { View } from '@hozo/core'
import { Button, Stack, Stepper } from '@hozo/ui'
import { useState } from 'react'

const STEPS = [
  { label: 'Cart', description: 'Two items' },
  { label: 'Address' },
  { label: 'Payment' },
  { label: 'Review' },
]

export function StepperDemo() {
  const [active, setActive] = useState(1)
  return (
    <View className="items-start gap-4">
      <Stepper steps={STEPS} activeStep={active} onStepPress={setActive} />
      <Stack direction="row" gap="tight">
        <Button tone="quiet" disabled={active === 0} onPress={() => setActive((step) => step - 1)}>
          Back
        </Button>
        <Button
          tone="accent"
          disabled={active === STEPS.length - 1}
          onPress={() => setActive((step) => step + 1)}
        >
          Next
        </Button>
      </Stack>
    </View>
  )
}

• steps: { label, description?, status? } for each step.
• activeStep is the index of the current step. The steps before it are completed and the ones after are upcoming, unless a step’s status says otherwise, such as error.
• The status is said in words, not only in colour. It is an ordered list, the current step is aria-current="step", and a reader hears “Step 2 of 4: Address, current”. The number or check mark is hidden, because the words already say it.
• onStepPress makes the steps buttons. Without it they are text, which suits a process that has to be done in order.