Steps
Used to guide users through a series of steps in a process
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
API Reference
Root
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
count | number The total number of steps | |
defaultStep | number The initial value of the step | |
ids | ElementIds The custom ids for the stepper elements | |
linear | boolean If `true`, the stepper requires the user to complete the steps in order | |
onStepChange | (details: StepChangeDetails) => void Callback to be called when the value changes | |
onStepComplete | VoidFunction Callback to be called when a step is completed | |
orientation | 'horizontal' | 'vertical' The orientation of the stepper | |
step | number The current value of the stepper |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | root |
[data-orientation] | The orientation of the steps |
CompletedContent
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Content
Prop | Default | Type |
---|---|---|
index | number | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | content |
[data-state] | "open" | "closed" |
[data-orientation] | The orientation of the content |
Indicator
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | indicator |
[data-complete] | Present when the indicator value is complete |
[data-current] | Present when current |
[data-incomplete] |
Item
Prop | Default | Type |
---|---|---|
index | number | |
asChild | (props: ParentProps<'li'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | item |
[data-orientation] | The orientation of the item |
List
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'ol'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | list |
[data-orientation] | The orientation of the list |
NextTrigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
PrevTrigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Progress
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | progress |
[data-complete] | Present when the progress value is complete |
RootProvider
Prop | Default | Type |
---|---|---|
value | UseStepsReturn | |
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Separator
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'div'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | separator |
[data-orientation] | The orientation of the separator |
[data-complete] | Present when the separator value is complete |
[data-current] | Present when current |
[data-incomplete] |
Trigger
Prop | Default | Type |
---|---|---|
asChild | (props: ParentProps<'button'>) => Element Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |
Data Attribute | Value |
---|---|
[data-scope] | steps |
[data-part] | trigger |
[data-state] | "open" | "closed" |
[data-orientation] | The orientation of the trigger |
[data-complete] | Present when the trigger value is complete |
[data-current] | Present when current |
[data-incomplete] |