Svelte Wizard

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

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

	
    	<WizardComponent
			stepsList={[
				{
					step: StepOne,
					title: 'Basic',
                    icon: Icon
				},
			]}
			customClassnames={{
				activeTitleClass: 'activeTitleClass',
				inactiveTitleClass: 'inactiveTitleClass',
				activeBgClass: 'activeBgClass',
				inactiveBgClass: 'inactiveBgClass',
				activeStepNumberClass: 'activeStepNumberClass',
				inactiveStepNumberClass: 'inactiveStepNumberClass'
			}}
			options={{
				showTitles: true,
				showCheckIcon: false,
				showStepCount: true,
				clickableNavigation: false,
				shouldAnimate: true,
				showProgressBar: true,
				defaultStep: 0,
				showOneTitle: false
			}}
			defaultFormState={{}}
		/>