Stepper
A multi-step progress indicator where each step derives its own number and status — done, current, or upcoming — from its position in the sequence.
Preview
<script lang="ts">
import { Stepper, Step } from "fancy-ui-svelte";
let current = $state(1);
</script>
<Stepper bind:current>
<Step label="Account" />
<Step label="Profile" />
<Step label="Confirmation" />
</Stepper>Installation
Usage
<script lang="ts">
import { Stepper } from 'fancy-ui-svelte';
</script>
<Stepper />Examples
Basic Usage
<script lang="ts">
import { Stepper, Step } from "$lib/fancy-ui/stepper";
let current = $state(1);
</script>
<Stepper bind:current>
<Step label="Account" />
<Step label="Profile" />
<Step label="Confirmation" />
</Stepper>Vertical Stepper
Stacked in a column instead of a horizontal row.
<script lang="ts">
import { Stepper, Step } from "$lib/fancy-ui/stepper";
let current = $state(1);
</script>
<Stepper bind:current orientation="vertical" class="max-w-xs">
<Step label="Account" />
<Step label="Profile" />
<Step label="Confirmation" />
</Stepper>Clickable Steps
Steps render as buttons a reader can click to jump between them.
<script lang="ts">
import { Stepper, Step } from "$lib/fancy-ui/stepper";
let current = $state(0);
let lastClicked = $state<number | null>(null);
function onStepClick(index: number) {
lastClicked = index;
}
</script>
<div class="flex flex-col items-start gap-2">
<Stepper bind:current clickable {onStepClick}>
<Step label="Account" />
<Step label="Profile" />
<Step label="Confirmation" />
</Stepper>
{#if lastClicked !== null}
<p class="text-muted-foreground text-sm">Jumped to step {lastClicked + 1}.</p>
{/if}
</div>With Descriptions
A secondary line under each step's label.
<script lang="ts">
import { Stepper, Step } from "$lib/fancy-ui/stepper";
let current = $state(1);
</script>
<Stepper bind:current orientation="vertical" class="max-w-sm">
<Step label="Account" description="Create your login" />
<Step label="Profile" description="Tell us about yourself" />
<Step label="Confirmation" description="Review and finish" />
</Stepper>Props
| Prop | Type | Default | Description |
|---|---|---|---|
current | number | 0 | The active step's 0-based index. Bindable. |
onCurrentChange | (current: number) => void | - | Called with the new index whenever it changes, however the change happened. |
orientation | "horizontal" | "vertical" | "horizontal" | The rail's stacking axis. |
clickable | boolean | false | Whether steps render as buttons a reader can click to jump between them. |
onStepClick | (index: number) => void | - | Called with a step's index when it's activated by a click. Only fires when clickable. |
class | string | - | Additional CSS classes, merged onto the root. |
ref | HTMLOListElement | null | null | Bindable reference to the root element. |
Step.label * | string | - | The step's primary label. |
Step.description | string | - | Optional secondary line shown under the label. |
Step.class | string | - | Additional CSS classes, merged onto the step's li. |
Step.ref | HTMLLIElement | null | null | Bindable reference to the step's li element. |
Slots
| Slot | Description |
|---|---|
children | The Steps. |
Step.children | Overrides the bullet's default content (checkmark / number / outline). |
Links
Related components
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.