Komponenter
FormProgress
FormProgress viser hvilket steg brukeren er på i en søknadsdialog.
Egnet til:
- Søknadsdialoger
Eksempler
FormProgress.Step
<FormProgress.Step>
har samme API som <Stepper.Step>
. Se dokumentasjonen for Stepper for mer informasjon.
Retningslinjer
Denne komponenten er laget spesifikt for bruk i søknadsdialoger. Bruk ProgressBar hvis du har behov for å lage en mer skreddersydd framdriftsindikator.
Hvilke steg skal være med?
Introside og kvitteringsside skal ikke være med som egne steg i denne komponenten. Siste steg skal som regel være en oppsummeringsside.
Props
FormProgress
totalSteps
- Type:
number
- Description:
Total number of steps.
activeStep
- Type:
number
- Description:
Current active step.
Index starts at 1, not 0.
open?
- Type:
boolean
- Description:
Shows Stepper if
true
, hides iffalse
. Using this prop removes automatic control of open-state.
onOpenChange?
- Type:
((open: boolean) => void)
- Description:
Callback for current open-state
children
- Type:
ReactNode
- Description:
Should contain <FormProgress.Step> elements.
onStepChange?
- Type:
((step: number) => void)
- Description:
Callback for next
activeStep
.Index starts at 1, not 0.
interactiveSteps?
- Type:
boolean
- Default:
true
- Description:
Makes Stepper non-interactive if false.
translations?
- Type:
RecursivePartial<{ step: string; showAllSteps: string; hideAllSteps: string; }>
- Description:
i18n API for customizing texts and labels.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs
FormProgress.Step
children
- Type:
string
- Description:
Text content by indicator.
completed?
- Type:
boolean
- Default:
false
- Description:
Makes step-indicator a checkmark.
interactive?
- Type:
boolean
- Default:
true
- Description:
Makes step non-interactive if false. Step will be set to a
<div>
, overridingas
-prop.
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLAnchorElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.current
tonull
(or call the ref withnull
if you passed a callback ref). React Docs