Steps · Skeleton

First do this.

tsx

import { Steps } from '@skeletonlabs/skeleton-react';

const steps = [
	{ title: 'First', content: 'First do this.' },
	{ title: 'Then', content: 'Then do that.' },
	{ title: 'Finally', content: 'Almost done...' },
];

export default function Default() {
	return (
		<Steps count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

First do this.

svelte

<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];
</script>

<Steps count={steps.length} class="w-full">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	{#each steps as item, index}
		<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
			{item.content}
		</Steps.Content>
	{/each}
	<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
		>All done!</Steps.Content
	>
	<div class="flex justify-between items-center gap-2">
		<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
		<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
	</div>
</Steps>

Controlled

Use the step and onStepChange props to control state programmatically.

First do this.

tsx

import { Steps } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

const steps = [
	{ title: 'First', content: 'First do this.' },
	{ title: 'Then', content: 'Then do that.' },
	{ title: 'Finally', content: 'Almost done...' },
];

export default function Default() {
	const [step, setStep] = useState(0);
	return (
		<Steps step={step} onStepChange={(details) => setStep(details.step)} count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

First do this.

svelte

<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];

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

<Steps {step} onStepChange={(details) => (step = details.step)} count={steps.length} class="w-full">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	{#each steps as item, index}
		<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
			{item.content}
		</Steps.Content>
	{/each}
	<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
		>All done!</Steps.Content
	>
	<div class="flex justify-between items-center gap-2">
		<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
		<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
	</div>
</Steps>

Orientation

Using the orientation prop to control the layout.

First do this.

tsx

import { Steps } from '@skeletonlabs/skeleton-react';

const steps = [
	{ title: 'First', content: 'First do this.' },
	{ title: 'Then', content: 'Then do that.' },
	{ title: 'Finally', content: 'Almost done...' },
];

export default function Default() {
	return (
		<Steps orientation="vertical" count={steps.length} className="w-full h-48">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			<div className="flex flex-col grow gap-4">
				{steps.map((item, index) => (
					<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
						{item.content}
					</Steps.Content>
				))}
				<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
					All done!
				</Steps.Content>
				<div className="flex justify-between items-center gap-2">
					<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
					<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
				</div>
			</div>
		</Steps>
	);
}

First do this.

svelte

<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];
</script>

<Steps orientation="vertical" count={steps.length} class="w-full h-48">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	<div class="flex flex-col grow gap-4">
		{#each steps as item, index}
			<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow">
				{item.content}
			</Steps.Content>
		{/each}
		<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center grow"
			>All done!</Steps.Content
		>
		<div class="flex justify-between items-center gap-2">
			<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
			<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
		</div>
	</div>
</Steps>

Direction

Set the text direction (ltr or rtl) using the dir prop.

First do this.

tsx

import { Steps } from '@skeletonlabs/skeleton-react';

const steps = [
	{ title: 'First', content: 'First do this.' },
	{ title: 'Then', content: 'Then do that.' },
	{ title: 'Finally', content: 'Almost done...' },
];

export default function Default() {
	return (
		<Steps dir="rtl" count={steps.length} className="w-full">
			<Steps.List>
				{steps.map((item, index) => (
					<Steps.Item key={index} index={index}>
						<Steps.Trigger>
							<Steps.Indicator>{index + 1}</Steps.Indicator> {item.title}
						</Steps.Trigger>
						{index < steps.length - 1 && <Steps.Separator />}
					</Steps.Item>
				))}
			</Steps.List>
			{steps.map((item, index) => (
				<Steps.Content key={index} index={index} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length} className="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
				All done!
			</Steps.Content>
			<div className="flex justify-between items-center gap-2">
				<Steps.PrevTrigger className="btn preset-filled">Back</Steps.PrevTrigger>
				<Steps.NextTrigger className="btn preset-filled">Next</Steps.NextTrigger>
			</div>
		</Steps>
	);
}

First do this.

svelte

<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';

	const steps = [
		{ title: 'First', content: 'First do this.' },
		{ title: 'Then', content: 'Then do that.' },
		{ title: 'Finally', content: 'Almost done...' },
	];
</script>

<Steps dir="rtl" count={steps.length} class="w-full">
	<Steps.List>
		{#each steps as item, index}
			<Steps.Item {index}>
				<Steps.Trigger>
					<Steps.Indicator>{index + 1}</Steps.Indicator>
					{item.title}
				</Steps.Trigger>
				{#if index < steps.length - 1}
					<Steps.Separator />
				{/if}
			</Steps.Item>
		{/each}
	</Steps.List>
	{#each steps as item, index}
		<Steps.Content {index} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center">
			{item.content}
		</Steps.Content>
	{/each}
	<Steps.Content index={steps.length} class="card preset-filled-surface-100-900 p-4 flex justify-center items-center"
		>All done!</Steps.Content
	>
	<div class="flex justify-between items-center gap-2">
		<Steps.PrevTrigger class="btn preset-filled">Back</Steps.PrevTrigger>
		<Steps.NextTrigger class="btn preset-filled">Next</Steps.NextTrigger>
	</div>
</Steps>

Anatomy

Here’s an overview of how the Steps component is structured in code:

tsx

import { Steps } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Steps>
			<Steps.List>
				<Steps.Item>
					<Steps.Trigger>
						<Steps.Indicator />
					</Steps.Trigger>
					<Steps.Separator />
				</Steps.Item>
			</Steps.List>
			<Steps.Content />
			<Steps.PrevTrigger />
			<Steps.NextTrigger />
		</Steps>
	);
}

svelte

<script lang="ts">
	import { Steps } from '@skeletonlabs/skeleton-svelte';
</script>

<Steps>
	<Steps.List>
		<Steps.Item>
			<Steps.Trigger>
				<Steps.Indicator />
			</Steps.Trigger>
			<Steps.Separator />
		</Steps.Item>
	</Steps.List>
	<Steps.Content />
	<Steps.PrevTrigger />
	<Steps.NextTrigger />
</Steps>

API Reference

Root

Prop	Default	Type
`ids`	—	ElementIds \| undefined The custom ids for the stepper elements
`step`	—	number \| undefined The controlled value of the stepper
`defaultStep`	—	number \| undefined The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
`onStepChange`	—	((details: StepChangeDetails) => void) \| undefined Callback to be called when the value changes
`onStepComplete`	—	VoidFunction \| undefined Callback to be called when a step is completed
`linear`	—	boolean \| undefined If `true`, the stepper requires the user to complete the steps in order
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the stepper
`count`	—	number \| undefined The total number of steps
`isStepValid`	() => true	((index: number) => boolean) \| undefined Whether a step is valid. Invalid steps block forward navigation in linear mode.
`isStepSkippable`	() => false	((index: number) => boolean) \| undefined Whether a step can be skipped during navigation. Skippable steps are bypassed when using next/prev.
`onStepInvalid`	—	((details: StepInvalidDetails) => void) \| undefined Called when navigation is blocked due to an invalid step.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	StepsApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(steps: StepsApi<PropTypes>) => ReactNode

List

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Item

Prop	Default	Type
`index`	—	number
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Trigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Indicator

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Separator

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Content

Prop	Default	Type
`index`	—	number
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

PrevTrigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

NextTrigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Root

Prop	Default	Type
`ids`	—	ElementIds \| undefined The custom ids for the stepper elements
`step`	—	number \| undefined The controlled value of the stepper
`defaultStep`	—	number \| undefined The initial value of the stepper when rendered. Use when you don't need to control the value of the stepper.
`onStepChange`	—	((details: StepChangeDetails) => void) \| undefined Callback to be called when the value changes
`onStepComplete`	—	VoidFunction \| undefined Callback to be called when a step is completed
`linear`	—	boolean \| undefined If `true`, the stepper requires the user to complete the steps in order
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the stepper
`count`	—	number \| undefined The total number of steps
`isStepValid`	() => true	((index: number) => boolean) \| undefined Whether a step is valid. Invalid steps block forward navigation in linear mode.
`isStepSkippable`	() => false	((index: number) => boolean) \| undefined Whether a step can be skipped during navigation. Skippable steps are bypassed when using next/prev.
`onStepInvalid`	—	((details: StepInvalidDetails) => void) \| undefined Called when navigation is blocked due to an invalid step.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => StepsApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => StepsApi<PropTypes>]>

List

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Item

Prop	Default	Type
`index`	—	number
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Trigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Indicator

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Separator

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

Prop	Default	Type
`index`	—	number
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

PrevTrigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

NextTrigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself