Hopp til innhold
Aksel

Komponenter

Fieldset

Fieldset brukes til å semantisk gruppere felter i et skjema. Brukes sparsomt, se eksempler.

StabilOppdatert 20. mars 2026
GithubEndringslogg

Egnet til:

  • Sette en felles ledetekst for flere relaterte felter.

Uegnet til:

  • Tematisk inndeling av skjemafelter.
  • Gruppere relaterte felter uten at det er behov for felles ledetekst, f.eks. fornavn/etternavn eller adresse/postnr./sted.
  • Gruppering av sjekkbokser: Bruk CheckboxGroup.
  • Gruppering av radioknapper: Bruk RadioGroup.

Eksempler

Komponenten brukes i

Retningslinjer

Fieldset kan være fin å bruke når et spørsmål er delt opp i flere felter der du ellers måtte ha gjentatt informasjon ved hvert enkelt felt. Fieldset skal imidlertid ikke brukes unødvendig da det bare øker kompleksiteten i skjemaet.

  • Unngå flere nivåer med fieldsets.
  • Ikke bruk Fieldset til tematisk inndeling av skjemafelter. Del heller opp skjemaet i flere sider/steg eller bruk overskrifter.
  • For gruppering av sjekkbokser og radioknapper, bruk henholdsvis CheckboxGroup og RadioGroup.
  • Hvis du bare har behov for å knytte en enkelt feilmelding til flere felter, kan du gjøre som i dette eksempelet.

Ta gjerne kontakt hvis du er usikker på om Fieldset er egnet i ditt tilfelle.

Props

Fieldset

children

  • Type:
    ReactNode
  • Description:

    Form fields in Fieldset.

legend

  • Type:
    ReactNode
  • Description:

    Fieldset legend.

hideLegend?

  • Type:
    boolean
  • Description:

    If enabled, shows the legend and description for screen readers only.

errorPropagation?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Toggles error propagation to child-elements.

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

size?

  • Type:
    "medium" | "small"
  • Description:

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLFieldSetElement>
  • 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