• Vise brukeren hvor langt de har kommet i en brukerreise.
  • Spørreundersøkelser
  • Søknadsprosess med flere steg
  • Hvis stepper blir brukt som eneste måte å navigere på.
Installer
children ReactNode
<Stepper.Step /> elements
orientation?"horizontal" | "vertical"
The direction the component grows.
activeStep number
Current active step. @note Stepper index starts at 1, not 0
onStepChange? ((step: number) => void)
Callback for next activeStep @note Stepper index starts at 1, not 0
interactive?boolean
Makes stepper non-interactive if false
className? string
ref? Ref<HTMLOListElement>
Stepper extends HTMLOListElement
as? React.ElementType
OverridableComponent-api
children string
Text content by indicator
completed?boolean
Makes step-indicator a checkmark
interactive?boolean
Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
className? string
ref? Ref<HTMLAnchorElement>
Stepper.Step extends HTMLAnchorElement
TokenFallback
--ac-stepper-text--a-surface-action
--ac-stepper-line--a-border-default
--ac-stepper-line-completed--a-border-selected
--ac-stepper-non-interactive--a-text-subtle
--ac-stepper-active--a-text-action-selected
--ac-stepper-active-bg--a-surface-action-selected
--ac-stepper-active-border--a-border-action-selected
--ac-stepper-active-text--a-text-on-action
--ac-stepper-hover-bg--a-surface-action-subtle-hover
--ac-stepper-non-interactive-active--a-text-default
--ac-stepper-non-interactive-line-completed--a-border-strong
--ac-stepper-non-interactive-active-bg--a-surface-inverted
--ac-stepper-non-interactive-active-border--a-surface-inverted
--ac-stepper-non-interactive-active-text--a-text-on-inverted
--ac-stepper-active-completed--a-text-action-selected
--ac-stepper-non-interactive-active-completed--a-text-default