Hopp til innhold
Aksel

Komponenter

RadioCard

RadioCard er en radioknapp som er stylet som et kort. Det gir større klikkflate, tydeligere interaksjon, og tydeligere gruppering av hvilken informasjon som hører til hvert alternativ.

Preview

Komponenten er klar for bruk, men det kan komme endringer basert på tilbakemeldinger. Ta den i bruk og fortell oss hva du synes på Slack eller GitHub.

Vi er litt usikre på om det bør være støtte for rikt innhold, ta kontakt hvis du har behov for dette.

Egnet til:

  • Velge ett alternativ
  • Valg som er tydelige veiskiller
  • Valg med ekstra informasjon knyttet til hvert alternativ

Uegnet til:

  • Velge flere enn ett alternativ
  • Veldig mange alternativer (vurder Combobox)

Eksempler

Retningslinjer

RadioCardGroup

RadioCard brukes i en RadioCardGroup sammen med flere RadioCards.

Horisontal visning

Ved horisontal visning bør det bare være 2 valg, som for eksempel Ja/Nei. Hvis du velger å ha flere rader med alternativer, må du sørge for at det er like mange på hver rad. Når det ikke er plass i bredden vises alle alternativene under hverandre.

Radio vs. RadioCard

Det er ingen sterke føringer for når du skal bruke Radio vs. RadioCard. Ved bruk av begge deler i samme flyt, vær konsekvent med hva som brukes når. For eksempel kan RadioCard forbeholdes større veivalg i flyten.

Props

RadioCard

children

  • Type:
    ReactNode
  • Description:

    Radio label.

value

  • Type:
    any
  • Description:

    Radio value.

description?

  • Type:
    string
  • Description:

    Adds a description to extend the labeling.

size?

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

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

id?

  • Type:
    string
  • Description:

    Override internal id.

className?

  • Type:
    string

ref?

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

RadioCardGroup

children

  • Type:
    ReactNode
  • Description:

    Collection of <Radio />-elements

name?

  • Type:
    string
  • Description:

    Override internal name

defaultValue?

  • Type:
    any
  • Description:

    Default checked Radio

value?

  • Type:
    any
  • Description:

    Controlled state for Radio

onChange?

  • Type:
    ((value: any) => void)
  • Description:

    Returns current checked Radio in group

required?

  • Type:
    boolean
  • Description:

    Tells Fieldset if group is required

legend

  • Type:
    ReactNode
  • Description:

    Fieldset legend.

hideLegend?

  • Type:
    boolean
  • Description:

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

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

Forvalter

Team
Aksel
Artikkel oppdatert 5. oktober 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack