Stepper

<Stepper steps={['Betaling', 'Kvittering', 'Billettering']} activeIndex={1} />

Bruk Stepper når

skjemaer krever trinnvis utfylling, og brukeren skal fylle inn stegene i rekkefølge
du vil vise brukerens fremgang gjennom et sett med trinn i en arbeidsflyt, slik at de raskt ser hvor de er og hva som gjenstår

Det skal i utgangspunktet ikke være mulig å hoppe framover i skjemaet uten å ha fylt inn de foregående stegene først. Vis trinnene i rekkefølge fra venstre mot høyre. Brukeren kan navigere seg bakover ved å klikke på overskriften på et fullført trinn.

Trinnstatus

Fullført: vises når trinnet er utført og brukeren oppnår det som kreves for å fortsette til neste trinn.
Aktiv: viser det nåværende trinnet, men ikke fullført enda.
Inaktiv: viser trinnene som ikke er nådd enda.

Eksempler

Interaktiv stepper
() => {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const steps = ['Betaling', 'Kvittering', 'Billettering'];
  return (
    <>
      <Stepper
        steps={steps}
        activeIndex={activeIndex}
        onStepClick={setActiveIndex}
        interactive
      />
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <IconButton
          onClick={() =>
            setActiveIndex(activeIndex > 0 ? activeIndex - 1 : 0)
          }
        >
          Tilbake
        </IconButton>
        <IconButton
          onClick={() =>
            setActiveIndex(activeIndex < 2 ? activeIndex + 1 : 2)
          }
        >
          Frem
        </IconButton>
      </div>
    </>
  );
}

Bruk Stepper når

Retningslinjer

Trinnstatus

Eksempler

Interaktiv stepper