Aksel

Meny

Radio

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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.

Egnet til:

  • Å velge ett alternativ

Uegnet til:

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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:

SandboxSandbox
Åpne eksempel i nytt vindu

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:

value

  • Type:
    any
  • Description:

description?

  • Type:
    string
  • Description:

size?

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

disabled?

  • Type:
    boolean
  • Description:

id?

  • Type:
    string
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

RadioGroup

children

  • Type:
    ReactNode
  • Description:

name?

  • Type:
    string
  • Description:

defaultValue?

  • Type:
    any
  • Description:

value?

  • Type:
    any
  • Description:

onChange?

  • Type:
    ((value: any) => void)
  • Default:
    () => {}
  • Description:

required?

  • Type:
    boolean
  • Description:

legend

  • Type:
    ReactNode
  • Description:

hideLegend?

  • Type:
    boolean
  • Description:

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

size?

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

disabled?

  • Type:
    boolean
  • Description:

description?

  • Type:
    ReactNode
  • Description:

id?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLFieldSetElement>
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter