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.

Live demo

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

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

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

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

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

Event	Beskrivelse
`change`	Hendelse som utløses når radiobutton endres

Farger

Element	CSS Variabel
Border
Text