Svelte Wizard

A flexible and highly customizable stepper component for Svelte, perfect for building multi-step forms with progress indicators.

🔔 Now supports Svelte 5!

First Name

Last Name

Controls

Show title

Show check icon

Show step count

Clickable progress bar

Should animate

Show Progress Bar

Show One Title

Component

	
	<script>
		let options = $state({
			showTitles: true,
			showCheckIcon: false,
			showStepCount: true,
			clickableNavigation: false,
			shouldAnimate: true,
			showProgressBar: true,
			defaultStep: 0,
			showOneTitle: false
		});

		let customClassnames = {
			activeTitleClass: 'activeTitleClass',
			inactiveTitleClass: 'inactiveTitleClass',
			activeBgClass: 'activeBgClass',
			inactiveBgClass: 'inactiveBgClass',
			activeStepNumberClass: 'activeStepNumberClass',
			inactiveStepNumberClass: 'inactiveStepNumberClass'
		};

		let currentIndex = $state(0);
	</script>


	<WizardComponent
		stepsList={[
			{
				step: StepOne,
				title: 'Basic',
				icon: Icon
			},
		]}
		customClassnames={customClassnames}
		options={options}
		defaultFormState={{}}
		bind:currentIndex
	/>

Made by Sonia