Stepper
Step-by-step progress indicator
- Step 1
- Step 2
- Step 3
Accessibility
- Use concise, descriptive labels so navigation items are understandable when announced out of context.
- Preserve the expected keyboard model and expose current or selected state where relevant.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { Stepper } from '@dryui/ui';
</script>
<Stepper.Root bind:activeStep={activeStep}>
<Stepper.List>
<Stepper.Step step={0}>Account</Stepper.Step>
<Stepper.Separator step={0} />
<Stepper.Step step={1}>Profile</Stepper.Step>
<Stepper.Separator step={1} />
<Stepper.Step step={2}>Review</Stepper.Step>
</Stepper.List>
</Stepper.Root>Import options
Root package
ts
import { Stepper } from '@dryui/ui'Per-component subpath
ts
import { Stepper } from '@dryui/ui/stepper'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
Stepper.Root | |||||
| activeStep | number Bindable current step index for controlled multi-step flows. | Current step index for a controlled multi-step flow. | 0 | — | ✓ |
| orientation | horizontalvertical | Horizontal or vertical layout direction. | 'horizontal' | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Stepper.List | |||||
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Stepper.Step | |||||
| step | number | Step interval used when incrementing numeric values. | — | ✓ | — |
| clickable | boolean | — | — | — | — |
| error | boolean | — | — | — | — |
| onclick | (index: number) => void | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
Stepper.Separator | |||||
| step | number | Step interval used when incrementing numeric values. | — | ✓ | — |