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 foundUsing the Root Provider
The RootProvider component provides a context for the steps. It accepts the value of the useSteps hook.
You can leverage it to access the component state and methods from outside the steps.
import { Steps, useSteps } 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 RootProvider = () => {
const steps = useSteps({ count: items.length })
return (
<>
<button onClick={() => steps.resetStep()}>Reset</button>
<Steps.RootProvider value={steps}>
<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.RootProvider>
</>
)
}
import { Steps, useSteps } 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 RootProvider = () => {
const steps = useSteps({ count: items.length })
return (
<>
<button onClick={() => steps().resetStep()}>Reset</button>
<Steps.RootProvider value={steps}>
<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.RootProvider>
</>
)
}
Example not foundIf you're using the
RootProvidercomponent, you don't need to use theRootcomponent.