Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • Primitives
    • BleedBeta
    • Box Beta
    • HGridBeta
    • HideBeta
    • HStackBeta
    • PageBeta
    • ShowBeta
    • VStackBeta
  • Core
    • Alpha-komponenter
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • ComboboxBeta
    • ConfirmationPanel
    • CopyButtonBeta
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCardBeta
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • ModalBeta
    • MonthPicker
    • Pagination
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • CopyToClipboardAvviklet
    • PanelAvviklet
    • StepIndicatorAvviklet
Komponenter / Core

Stepper

Oppdatert 11. oktober 2023Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Varianter
    • Vertikal/horisontal
    • Interactive
    • Completed
  • Retningslinjer
    • Som lenke eller knapp
    • activeStep og onStepChange
  • Props
    • Stepper
    • Stepper.Step
  • Tokens

Intro

Stepper kan brukes for å indikere hvor brukeren er i en prosess. Kan brukes om navigasjons mønster mellom steg, eller for en visuell guide på progresjon. Selve komponenten bør være et supplement til andre mønstre eller indikatorer, og bør ikke være eneste måte å navigere en løsning på.

Egnet til:

  • Vise brukeren hvor langt de har kommet i en brukerreise
  • Spørreundersøkelser
  • Søknadsprosess med flere steg

Uegnet til:

  • Eneste måte å navigere på

Har du innspill til komponenten?

Send forslag

Eksempler

Sandbox
Åpne eksempel i nytt vindu

Vi anbefaler å ikke bruke horisontal stepper, spesielt på eksterne flater. Dette er for å bedre støtte mobilenheter.

Med hjelp av interactive og completed kan man bygge opp wizard-lignende løsninger.

Varianter

Vertikal/horisontal

Komponenten kan orienteres horisontalt eller vertikalt ettersom hvordan siden er bygd opp. Vi anbefaler sterkt å bruke vertikal variant da den passer bedre på mindre flater, eks på mobil.

Interactive

Man kan sette hele stepper til å ikke være interaktiv, eller steg for seg selv. Dette gir muligheten til å bygge opp en wizard-lignende flyt der fremtidige steg kan være "låst", mens tidligere steg er interaktive.

Completed

Alle steg har en prop `completed` som setter et checkmark der det tidligere var et tall. Dette kan brukes for å visuelt lettere la brukeren se hvilken steg de har fullført, og da hvilken de bør fullføre. Dette bør bare brukes som en visuell støtte-indikator.

Retningslinjer

Som lenke eller knapp

Stepper.Step er default en a-tag og brukes som lenke. Men basert på hvordan applikasjonen din er satt opp, eks typisk SPA kan en knapp funke bedre. Da kan man bruke `as`-proppen på steget for å overskrive taggen.

activeStep og onStepChange

Vi har valgt å 1-indeksere denne komponenten. Det vil si at activeStep forventer at første step er 1, og onStepChange vil returnere 1 når aktivert. Dette følger samme prinsipp som Pagination der stegene man ser visuelt er de samme man jobber med i kode. Dette aviker litt fra hvordan gamle StepIndicator/Stegindikator fungerte, så greit å dobbelsjekke koden når man migrerer.

Props

Stepper

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>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Stepper extends HTMLOListElement

Stepper.Step

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>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Stepper.Step extends HTMLAnchorElement

Tokens

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-completed-bg--a-surface-subtle
--ac-stepper-non-interactive-line-completed--a-border-strong
--ac-stepper-non-interactive-active--a-text-default
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

© 2023 NAV

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack