Navigation

Stepper

Multi-step wizard navigation with completed, active and pending states.

<script>
  import { Stepper } from "@codeatlasdev/ui";
  let step = $state(0);
  const steps = [{ label: "Account" }, { label: "Profile" }, { label: "Review" }];
</script>

<Stepper {steps} bind:current={step} />

The Stepper shows progress and each step bubble is a button that sets current when clicked. It does not render the step content or the Back and Next buttons. Drive current from your own form state, as in the demo.

#162

Horizontal stepper

Four steps with Back and Next controls.

Step 1: Account

Reference #162 · Pick in the gallery

Code

<script lang="ts">
  import { Stepper, Button, Card, Stack, Flex } from '@codeatlasdev/ui';

  let step = $state(0);
  const steps = [{ label: 'Account' }, { label: 'Profile' }, { label: 'Billing' }, { label: 'Review' }];
</script>

<Card material="glass" p="6" full>
  <Stack gap="6">
    <Stepper {steps} bind:current={step} />
    <div class="body">
      <p>Step {step + 1}: {steps[step].label}</p>
    </div>
    <Flex gap="2" justify="end">
      <Button variant="ghost" disabled={step <= 0} onclick={() => step--}>Back</Button>
      <Button variant="filled" disabled={step >= steps.length - 1} onclick={() => step++}>
        {step < steps.length - 1 ? 'Next' : 'Finish'}
      </Button>
    </Flex>
  </Stack>
</Card>

<style>
  .body { min-height: 80px; display: flex; align-items: center; padding: 0 4px; }
  .body p { margin: 0; font-size: var(--ca-font-size-body1); color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`steps`	`StepItem[]`	–	Array of { label, description? }.
`current`	`number`	`0`	Bindable, zero-indexed active step. Earlier steps render as completed.
`class`	`string`	`''`	Extra CSS classes.