Komponenter

FormSummary

FormSummary brukes til å vise en oppsummering av et utfylt skjema før brukeren sender det inn.

StabilOppdatert 2. juli 2025

Github Endringslogg

Egnet til:

Oppsummering av svar i et skjema
Søknadsskjemaer

Uegnet til:

Inline-redigering av skjemafelter

Eksempler

Retningslinjer

Bruk

Komponenten er tiltenkt skjemaer med flere steg.

Labels

Teksten i <FormSummary.Label> bør vanligvis samsvare med label på skjemafeltet det tilsvarer.

Spørsmål med flere svar

For å liste opp flere svar under samme spørsmål, kan du bruke flere instanser av <FormSummary.Value> etter hverandre. Vurder punktum etter hvert svar hvis svarene kan bli lange, slik at man enkelt ser hvor ett svar slutter og neste starter. Hvis svarene er veldig korte, kan du eventuelt ha alt på samme linje med kommaseparering.

TSX

<FormSummary.Answer>
  <FormSummary.Label>Hvordan vil du bli varslet?</FormSummary.Label>
  <FormSummary.Value>E-post</FormSummary.Value>
  <FormSummary.Value>SMS</FormSummary.Value>
</FormSummary.Answer>

Ikke bruk punktlister da det tiltrekker mye oppmerksomhet i forhold til svar uten punkt. Eventuelt bruk lister uten visuell markering.

Gruppering

I søknader der brukerne legger til data selv, f.eks. "Legg til barn" eller "Legg til arbeidsgiver", så kan du få frem dette ved å bruke <FormSummary.Answers> inni en <FormSummary.Value>, som vist i eksempelet.

Props

FormSummary

children: Type:
ReactNode
Description:
Must include:

<FormSummary.Header>

<FormSummary.Answers>

Example:
<FormSummary> <FormSummary.Header> <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading> <FormSummary.EditLink href="#" /> </FormSummary.Header> <FormSummary.Answers> <FormSummary.Answer> <FormSummary.Label>Navn</FormSummary.Label> <FormSummary.Value>Ola Nordmann</FormSummary.Value> </FormSummary.Answer> </FormSummary.Answers></FormSummary>
className?: Type:
string
data-color?: Type:
AkselColor | (string & {})
ref?: Type:
LegacyRef<HTMLDivElement>
Description:
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). React Docs

FormSummary.Header

children: Type:
ReactNode
Description:
Must include <FormSummary.Heading> and optionally <FormSummary.EditLink>.
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 to null (or call the ref with null if you passed a callback ref). React Docs

FormSummary.Heading

children: Type:
ReactNode
Description:
Heading text.
level: Type:
"2" | "3" | "4" | "5" | "6" | undefined
Default:
"null"
Description:
The heading level.
className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLHeadingElement>
Description:
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). React Docs

FormSummary.EditLink

href?: Type:
string
Description:
URL to the relevant part of the form, where the answers can be edited.
children?: Type:
ReactNode
Default:
"Endre svar"
Description:
Link text.

How to write good links.
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 to null (or call the ref with null if you passed a callback ref). React Docs
as?: Type:
React.ElementType
Description:
OverridableComponent-api

FormSummary.Answers

children: Type:
ReactNode
Description:
Must include one or more of <FormSummary.Answer>.
className?: Type:
string
data-color?: Type:
AkselColor | (string & {})
ref?: Type:
LegacyRef<HTMLDListElement>
Description:
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). React Docs

FormSummary.Answer

children: Type:
ReactNode
Description:
Must include:

<FormSummary.Label>

<FormSummary.Value>
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 to null (or call the ref with null if you passed a callback ref). React Docs

FormSummary.Label

className?: Type:
string
data-color?: Type:
(string & {}) | AkselColor
ref?: Type:
LegacyRef<HTMLElement>
Description:
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). React Docs

FormSummary.Value

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 to null (or call the ref with null if you passed a callback ref). React Docs

FormSummary

Egnet til:

Uegnet til:

Eksempler

Retningslinjer

Bruk

Labels

Spørsmål med flere svar

Gruppering

Props

FormSummary

children

className?

data-color?

ref?

FormSummary.Header

children

className?

data-color?

ref?

FormSummary.Heading

children

level

className?

data-color?

ref?

FormSummary.EditLink

href?

children?

className?

data-color?

ref?

as?

FormSummary.Answers

children

className?

data-color?

ref?

FormSummary.Answer

children

className?

data-color?

ref?

FormSummary.Label

className?

data-color?

ref?

FormSummary.Value

className?

data-color?

ref?