# Steps

Use steps to guide users through a multi-step process.

```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}>
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length}>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>
	);
}

```

## Controlled

Use the `step` and `onStepChange` props to control state programmatically.

```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}>
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length}>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>
	);
}

```

## Orientation

Using the `orientation` prop to control the layout.

```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">
				{steps.map((item, index) => (
					<Steps.Content key={index} index={index} className="grow">
						{item.content}
					</Steps.Content>
				))}
				<Steps.Content index={steps.length} className="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>
	);
}

```

## Direction

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

```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}>
					{item.content}
				</Steps.Content>
			))}
			<Steps.Content index={steps.length}>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>
	);
}

```

## 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>
	);
}
```

## API Reference

<ApiReference id="react/steps" />