Radio button

Release dato: 04.10.2023

Sist oppdatert: 07.07.2025

Du bruker radio button nÄr brukeren skal velge én av flere forhÄndsdefinerte alternativer. Radio button fungerer best nÄr det er fem eller fÊrre valg, og nÄr du Þnsker at alle alternativene skal vÊre synlige samtidig slik at brukeren enkelt kan sammenligne dem.

Radio buttons brukes ofte i skjemaer og spĂžrreskjemaer der valget er gjensidig utelukkende.

Test komponenten

Relaterte komponenter

Varianter

VarianterBeskrivelse
StandardViser ett eller flere valg som radio buttons
Med rammeRadio button plassert i “tile”-layout for tydelig gruppering

Radio button skal alltid brukes sammen i grupper, og helst med inputwrapper (kalt “radio button group” i Figma). Gruppen kan inneholde:

  • Label (etikett)
  • Valgfritt-/obligatorisk-tag
  • Hjelpetekst eller ekspanderende hjelpetekst
  • Feilmelding

Retningslinjer for bruk

Bruk radio button nÄr

  • brukeren skal velge Ă©n av flere alternativer
  • valgene utelukker hverandre
  • det er viktig at alle alternativene vises samtidig

UnngÄ radio button nÄr

  • brukeren kan velge flere alternativer (bruk da checkbox)
  • det er fĂ„ alternativer og kun Ă©n innstilling skal slĂ„s av/pĂ„ (bruk switch)
  • du har mange valg (bruk da select)

Skriv tydelige etiketter og hjelpetekst

Skriv klare og konkrete etiketter som beskriver hva valget innebĂŠrer, ikke bare “Ja” eller “Nei”. UnngĂ„ kolon etter label og store bokstaver i hele ordet, skriv slik at brukeren forstĂ„r hva du spĂžr etter.

Hjelpetekster skal vĂŠre hele setninger. Du kan legge hjelpetekst over gruppen eller under hvert valg. Bruk ekspanderende hjelpetekst ved behov for mer informasjon eller lenker.

GjĂžr slik

Eksempel pÄ en kort og tydelig tekst i etikett og alternativer
Skriv kort og tydelig tekst i etikett og alternativer

UnngÄ

Eksempel pÄ radio buttons med lange eller uklare tekster i etikett og alternativer
UnngÄ lange eller uklare tekster i etikett og alternativer

Ikke bruk radio button om brukeren skal kunne velge flere valg

Radio buttons skal kun brukes dersom det ene valget utelater det andre.

GjĂžr slik

Eksempel riktig bruk av komponeneter ved valg av flere alternativer
Bruk checkbox dersom brukeren skal ha mulighet til Ă„ krysse av flere alternativer

UnngÄ

Eksempel pÄ radio buttons som brukes for Ä la brukeren velge flere alternativer
UnngÄ Ä bruke radio button for Ä la brukeren velge flere alternativer

Antall valg

Radio button skal ha minst to alternativer. Har du mer enn fem valg, bĂžr du vurdere Ă„ bruke select for bedre oversikt og brukervennlighet.

GjĂžr slik

Eksempel riktig bruk av komponeneter ved mange alternativer
Bruk select dersom du har mange alternativer

UnngÄ

Eksempel pÄ radio buttons som brukes ved mange alternativer
UnngÄ radio button ved mange alternativer

Plassering

Plasser radio button vertikalt for best lesbarhet. Horisontal plassering kan brukes hvis det kun er to til tre korte valg. Hvis etikettene er lange eller bryter linjer, bruk vertikal plassering.

PĂ„ mobil skal radio buttons alltid ligge vertikalt.

Responsivitet

Radio button tilpasser seg skjermstĂžrrelse automatisk, men

  • bruk vertikal plassering pĂ„ smĂ„ skjermer
  • test linjebryting, lesbarhet og fokushĂ„ndtering

Universell utforming

Radio buttons skal kunne brukes med tastatur og skjermleser:

  • Bruk fieldset og legend for Ă„ gruppere radio buttons, eller aria-labelledby
  • Naviger mellom valg med “pil opp” og “pil ned”
  • Velg med “mellomrom”
  • SĂžrg for tydelig fokusring ved tabbing
  • UnngĂ„ disabled-tilstand. Hvis du mĂ„ deaktivere noe, forklar hvorfor og hva som kreves for Ă„ aktivere det

Anatomi

ElementBeskrivelse
1. EtikettOverskrift for gruppen
2. Valgfritt-/obligatoriskTilleggsinfo om feltets krav
3. HjelpetekstUtfyllende forklaring
4. Ekspanderende hjelpetekstFor mye info eller lenker
5. Radio buttonsAlternativene brukeren kan velge mellom
6. Radio button hjelpetekstHjelpetekst under en enkelt radio button
Gruppe med radioknapper

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-radiobutton");

Props og tokens

PropTypeBeskrivelse
idstringUnik ID for radiobutton
namestringNavn for radiobutton
labelstringTekst i label for radiobutton
checkedbooleanEr radiobutton valgt?
defaultCheckedbooleanSkal radiobutton vĂŠre valgt som standard?
hasTilebooleanBoks (tile)
disabledbooleanEr radiobutton deaktivert?
checkHelptextstringHjelpetekst som vises under radiobutton
valuestringVerdien som sendes nÄr radiobutton er valgt
hasErrorbooleanIndikerer om radiobutton har en feil
requiredTagBooleanViser en merking som indikerer at feltet er pÄkrevd
requiredTextstringTekst som vises i pÄkrevd-merkingen
optionalTagbooleanViser en merking som indikerer at feltet er valgfritt
optionalTextstringTekst som vises i valgfritt-merkingen
tagTextstringTekst som vises i en tag ved siden av label
EventBeskrivelse
changeHendelse som utlÞses nÄr radiobutton endres