Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Radio

Radio viser brukeren en liste med alternativer der bare ett kan velges om gangen. Et valg kan ikke fjernes, kun byttes med et annet alternativ.

StabilOppdatert 26. mai 2025
Github FigmaEndringslogg

Egnet til:

  • Å velge ett alternativ

Uegnet til:

  • Å velge flere alternativer (se Checkbox)
  • Veldig mange alternativer (vurder Select eller Combobox)
  • Som valgfritt felt (siden du ikke kan fjerne et valg)

Eksempler

Skjule legend visuelt

RadioGroup skal alltid ha en legend. I spesielle tilfeller kan legend skjules visuelt med propen hideLegend, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om legend skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.

Retningslinjer

Antall alternativer

Hvis det er veldig mange alternativer kan det overvelde brukeren. Vurder da om du heller bør bruke Select eller Combobox.

Husk at brukere ikke kan fjerne et valg, bare bytte til et annet. Vurder derfor om du trenger et nøytralt alternativ som "Ingen", "Vet ikke" eller "Ikke relevant".

Orientering som liste

Alternativene skal som hovedregel stilles opp under hverandre i en liste for å gjøre det enkelt å skanne dem. Horisontal visning gjør det vanskelig å lese. Det kan også være problematisk for brukere som må forstørre websiden for å se godt nok (zoom).

Unntak

I noen tilfeller kan det likevel være hensiktsmessig å vise alternativene horisontalt, oftest for å spare plass vertikalt eller når man i et skjema har mange ja/nei-spørsmål etter hverandre. I så fall gjelder følgende:

  • Helst bare to alternativer. (Flere gjør det vanskeligere å se hvilken tekst som hører til hvilken radio-knapp.)
  • Svært kort tekst på hvert alternativ. (Lang tekst dytter alternativene lenger fra hverandre og kan gjøre at teksten wrapper.)
  • Ikke bruk description på <Radio>.
  • Sørg for at verken tekst eller radio wrapper. Vis derfor alternativene vertikalt på mobil.
  • 1.5rem avstand mellom alternativene når de vises horisontalt (gap="0 6").

Vi anbefaler å benytte Stack som vist her:

Rekkefølge

I de fleste tilfellene bør alternativene sorteres alfabetisk. I noen tilfeller kan det være hjelpsomt å ha de mest aktuelle alternativene først, men vær forsiktig så rekkefølgen ikke påvirker svaret eller gjør det vanskelig å finne ønsket alternativ.

Disabled

Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly, eller bare kan skrive ut informasjonen i ren tekst.

Interaksjon med tastatur

Komponenten implementerer HTML radio-input.

Props

Radio

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"
  • Default:
    "null"
  • 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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

RadioGroup

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)
  • Default:
    () => {}
  • 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 screenreaders only

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

size?

  • Type:
    "medium" | "small"
  • Default:
    "null"
  • 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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-radio-checkbox-bg--a-surface-default
--ac-radio-checkbox-border--a-border-default
--ac-radio-checkbox-action--a-surface-action-selected
--ac-radio-checkbox-action-hover-bg--a-surface-action-subtle
--ac-radio-checkbox-error-border--a-border-danger
--ac-radio-checkbox-error-hover-bg--a-surface-danger-subtle