Sveltewind

Components

Stepper

A step list with current and completed indicators and optional navigation.

Props

Native attributes and event handlers are forwarded to the root Ol component. Common transitions apply to that root.

Theme entries: stepper,stepperDescription,stepperIndicator,stepperItem,stepperLabel.

PropTypeDefaultDescription
allowNavigation boolean false See usage notes and the component API.
children Snippet undefined Custom content; see the usage notes for its component-specific role.
class string '' Tailwind utilities merged after the component theme and variants.
current number $bindable(0) See usage notes and the component API.
element HTMLOListElement | null $bindable(null) Bindable reference to the composition root.
inTransition TransitionProps undefined Enter transition override.
isVisible boolean $bindable(true) Bindable visibility state.
onStepChange ((index: number) => void) | undefined undefined See usage notes and the component API.
outTransition TransitionProps undefined Exit transition override.
steps StepperItem[] [] See usage notes and the component API.
theme Theme globalTheme Local Theme instance; defaults to the global theme.
transition TransitionProps [noopTransition, {}] Shared transition function and options.
variants string[] [] Ordered component theme variants or cross-component references.

Default usage

Import Stepper from sveltewind/components. This example shows its default styling in a usable context.

  1. Account
  2. Profile
  3. Finish
+page.svelte 
Loading...

current is zero-based. Navigation is disabled by default so your application can validate each step. Set allowNavigation and mark unavailable steps disabled when appropriate.

Examples

Theme variants

Every variant available for Stepper in the built-in themes is shown below.

compact — Apply the compact variant.

  1. Account
  2. Profile
  3. Finish
+page.svelte 
Loading...

vertical — Apply the vertical variant.

  1. Account
  2. Profile
  3. Finish
+page.svelte 
Loading...

spacious — Apply the spacious variant.

  1. Account
  2. Profile
  3. Finish
+page.svelte 
Loading...

Class overrides

Apply rounded-xl border border-primary-500/40 p-4 locally.

  1. Account
  2. Profile
  3. Finish
+page.svelte 
Loading...

Props and behavior

Change allowNavigation while retaining the default component styling.

  1. 1
    Account
  2. 2
    Profile
  3. 3
    Finish
+page.svelte 
Loading...

Content and values

Provide different steps values.

  1. Discovery
  2. Build
  3. Launch
+page.svelte 
Loading...