Steps
Used to guide users through a series of steps in a process
First - Contact Info
Second - Date & Time
Third - Select Rooms
Steps Complete - Thank you for filling out the form!
Usage
The Steps component is used to guide users through a series of steps in a process.
- Supports horizontal and vertical orientations.
- Support for changing the active step with the keyboard and pointer.
- Support for linear and non-linear steps.
import { Steps } from '@ark-ui/react/steps'
Examples
Basic
Here's a basic example of the Steps component.
import { Steps } from '@ark-ui/react/steps'
const items = [
{ value: 'first', title: 'First', description: 'Contact Info' },
{ value: 'second', title: 'Second', description: 'Date & Time' },
{ value: 'third', title: 'Third', description: 'Select Rooms' },
]
export const Basic = () => {
return (
<Steps.Root count={items.length}>
<Steps.List>
{items.map((item, index) => (
<Steps.Item key={index} index={index}>
<Steps.Trigger>
<Steps.Indicator>{index + 1}</Steps.Indicator>
<span>{item.title}</span>
</Steps.Trigger>
<Steps.Separator />
</Steps.Item>
))}
</Steps.List>
{items.map((item, index) => (
<Steps.Content key={index} index={index}>
{item.title} - {item.description}
</Steps.Content>
))}
<Steps.CompletedContent>
Steps Complete - Thank you for filling out the form!
</Steps.CompletedContent>
<div>
<Steps.PrevTrigger>Back</Steps.PrevTrigger>
<Steps.NextTrigger>Next</Steps.NextTrigger>
</div>
</Steps.Root>
)
}
import { Steps } from '@ark-ui/solid/steps'
import { For } from 'solid-js'
const items = [
{ value: 'first', title: 'First', description: 'Contact Info' },
{ value: 'second', title: 'Second', description: 'Date & Time' },
{ value: 'third', title: 'Third', description: 'Select Rooms' },
]
export const Basic = () => {
return (
<Steps.Root count={items.length}>
<Steps.List>
<For each={items}>
{(item, index) => (
<Steps.Item index={index()}>
<Steps.Trigger>
<Steps.Indicator>{index() + 1}</Steps.Indicator>
<span>{item.title}</span>
</Steps.Trigger>
<Steps.Separator />
</Steps.Item>
)}
</For>
</Steps.List>
<For each={items}>
{(item, index) => (
<Steps.Content index={index()}>
{item.title} - {item.description}
</Steps.Content>
)}
</For>
<Steps.CompletedContent>
Steps Complete - Thank you for filling out the form!
</Steps.CompletedContent>
<div>
<Steps.PrevTrigger>Back</Steps.PrevTrigger>
<Steps.NextTrigger>Next</Steps.NextTrigger>
</div>
</Steps.Root>
)
}
Example not found