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

Varianter Beskrivelse
Standard Viser ett eller flere valg som radio buttons
Med ramme Radio button plassert i “tile”-layout for tydelig gruppering
Standard radio button har ikke rammeTile radio button med grÄ ramme

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

Skriv kort og tydelig tekst i etikett og alternativer

UnngÄ

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

Bruk checkbox dersom brukeren skal ha mulighet til Ă„ krysse av flere alternativer

UnngÄ

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

Bruk select dersom du har mange alternativer

UnngÄ

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
Eksempel pÄ radio button pÄ mobil

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

Element Beskrivelse
1. Etikett Overskrift for gruppen
2. Valgfritt-/obligatorisk Tilleggsinfo om feltets krav
3. Hjelpetekst Utfyllende forklaring
4. Ekspanderende hjelpetekst For mye info eller lenker
5. Radio buttons Alternativene brukeren kan velge mellom
6. Radio button hjelpetekst Hjelpetekst under en enkelt radio button
Anatomi gruppe med radioknapper.
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");

Egenskaper

PktRadioButton

Props

Prop:
id
Type:
string
Beskrivelse:
Unik ID for radiobutton
Prop:
name
Type:
string
Beskrivelse:
Navn for radiobutton
Prop:
label
Type:
string
Beskrivelse:
Tekst i label for radiobutton
Prop:
checked?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Er radiobutton valgt?
Prop:
defaultChecked?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Skal radiobutton vĂŠre valgt som standard?
Prop:
hasTile?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Boks (tile)
Prop:
disabled?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Er radiobutton deaktivert?
Prop:
checkHelptext?
Type:
string
Beskrivelse:
Hjelpetekst som vises under radiobutton
Prop:
value?
Type:
string
Beskrivelse:
Verdien som sendes nÄr radiobutton er valgt
Prop:
hasError?
Type:
boolean
Standardverdi:
false
Beskrivelse:
Indikerer om radiobutton har en feil
Prop:
requiredTag?
Type:
Boolean
Standardverdi:
false
Beskrivelse:
Viser en merking som indikerer at feltet er pÄkrevd
Prop:
requiredText?
Type:
string
Beskrivelse:
Tekst som vises i pÄkrevd-merkingen
Prop:
optionalTag?
Type:
boolean
Beskrivelse:
Viser en merking som indikerer at feltet er valgfritt
Prop:
optionalText?
Type:
string
Beskrivelse:
Tekst som vises i valgfritt-merkingen
Prop:
tagText?
Type:
string
Beskrivelse:
Tekst som vises i en tag ved siden av label

Events

Event:
change
Type:
—
Beskrivelse:
Hendelse som utlÞses nÄr radiobutton endres