Radio chip

En radio chip er en gruppe chips der brukeren velger nøyaktig ett alternativ — som en kompakt segment-velger eller filtervalg. Å velge én chip fjerner automatisk valget på den forrige.

Hver chip har en indikator til venstre for teksten: en tom sirkel når den ikke er valgt, og en fylt sirkel med prikk når den er valgt. I tillegg fylles den valgte pillen med en lys aksentfarge og får aksent-kant, slik at valgt tilstand kommuniseres med mer enn farge.

Radio chip gjenbruker radiogruppe-semantikken: gruppen får role="radiogroup", og pil-tastene flytter valget mellom alternativene. Gi alltid gruppen en beskrivende legend.

Bruk

Laster...

Laster...

Eksempler

Liten størrelse

Laster...

Laster...

Ja/nei: alternativ til checkbox

Når et valg er et bevisst ja/nei-spørsmål, kan to radio chips være bedre enn én checkbox. En checkbox har en implisitt standardtilstand (av), mens to radio chips tvinger brukeren til å ta et eksplisitt valg — ingen av dem er forhåndsvalgt. Bruk dette når du vil unngå at «ingen handling» tolkes som et svar, for eksempel ved samtykke.

Laster...

Laster...

Feilmelding og skrivebeskyttet

errorMessage gir de uvalgte chipene rød kant på gjennomsiktig flate, og en valgt chip mørkerødt fyll med lys tekst og indikator. Selve feilmeldingen vises under alternativene. Kanten alene forteller ikke brukeren hva som er galt, så teksten er den som bærer informasjonen.

readOnly gir alle chipene samme nedtonede grå flate, valgt eller ikke. Ringen på de uvalgte står uten fyll, så den grå flaten går helt inn til kanten av sirkelen. Valget kan ikke endres, men det valgte alternativet er fortsatt eksponert programmatisk, så en skjermleser leser opp hva som er valgt.

Laster...

Laster...

Laster...

Laster...

Universell utforming

Hva du selv må sørge for

• Gi radio chip-gruppen en beskrivende legend. Det er gruppens tilgjengelige navn. Bruk riktig språk; ingen hardkodet fallback.
• Bruk radio chip kun når brukeren skal velge nøyaktig ett alternativ. Skal flere kunne velges samtidig, er det feil semantikk. Bruk checkbox-chip i stedet.
• Gi hvert valg en kort og tydelig label. Label-teksten er det tilgjengelige navnet for valget.
• Ikke stol på farge alene. Overstyr ikke stylingen slik at bare fargen skiller valgt fra ikke-valgt.

Hva komponenten gjør automatisk

• Radiogruppe-semantikk: radio chip bygger på <ix-radio-group>, som setter role="radiogroup", kobler legend som tilgjengelig navn, synkroniserer name på alle valg og lar piltastene flytte valget. Gruppen er ett tab-stopp.
• Valgt tilstand vises med fylt sirkel-indikator, aksent-kant og fyll, ikke med farge alene. Tilstanden eksponeres programmatisk via native aria-checked.
• Fokusindikator via :focus-visible som følger pill-formen.

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus inn i gruppen (til valgt chip, ev. første chip)
Shift+Tab	Flytter fokus ut av gruppen til forrige fokuserbare element
Pil ned / høyre	Flytter valget til neste alternativ i gruppen
Pil opp / venstre	Flytter valget til forrige alternativ i gruppen
Space	Velger fokusert chip

Skjermleser

• Gruppe ved fokus: "[legend], radiogruppe"
• Hvert valg: "[label], radioknapp, valgt/ikke valgt, x av y"
• Deaktivert valg: "[label], radioknapp, deaktivert"

WCAG-kriterier

Sist gjennomgått: 2026-06-29 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier9 ditt ansvar · 16 håndtert · 37 ikke relevant · 2 ikke på plass

Ditt ansvar (9)

Kriterium	Nivå	Hva du må gjøre
1.3.1 Informasjon og relasjoner	A	Gi radiogruppen en beskrivende legend. Radio chip-gruppen får sitt tilgjengelige navn fra legend (React: legend-prop; HTML: [data-field="legend"]). Uten legend annonseres gruppen uten navn, og brukeren vet ikke hva valget gjelder. Legend er påkrevd og må være på brukerens språk — komponenten har ingen hardkodet fallback.
3.3.2 Ledetekster eller instruksjoner	A	Gi radiogruppen en beskrivende legend. Radio chip-gruppen får sitt tilgjengelige navn fra legend (React: legend-prop; HTML: [data-field="legend"]). Uten legend annonseres gruppen uten navn, og brukeren vet ikke hva valget gjelder. Legend er påkrevd og må være på brukerens språk — komponenten har ingen hardkodet fallback.
4.1.2 Navn, rolle, verdi	A	Gi radiogruppen en beskrivende legend. Radio chip-gruppen får sitt tilgjengelige navn fra legend (React: legend-prop; HTML: [data-field="legend"]). Uten legend annonseres gruppen uten navn, og brukeren vet ikke hva valget gjelder. Legend er påkrevd og må være på brukerens språk — komponenten har ingen hardkodet fallback.
4.1.2 Navn, rolle, verdi	A	Bruk radio chip kun når nøyaktig ett valg er gyldig. Radio chip er for gjensidig utelukkende valg (én-av-mange). Skal brukeren kunne velge flere samtidig, er det feil semantikk — bruk checkbox-chip i stedet. Hvert valg må ha en kort, beskrivende label.
1.3.1 Informasjon og relasjoner	A	Bruk radio chip kun når nøyaktig ett valg er gyldig. Radio chip er for gjensidig utelukkende valg (én-av-mange). Skal brukeren kunne velge flere samtidig, er det feil semantikk — bruk checkbox-chip i stedet. Hvert valg må ha en kort, beskrivende label.
2.4.6 Overskrifter og ledetekster	AA	Gi hvert valg en kort og tydelig label. Label-teksten på hvert valg er det tilgjengelige navnet for valget. Den skal være kort og enkel å skanne — f.eks. «1 måned». i18n: komponenten har ingen hardkodet fallback.
1.3.1 Informasjon og relasjoner	A	Gi hvert valg en kort og tydelig label. Label-teksten på hvert valg er det tilgjengelige navnet for valget. Den skal være kort og enkel å skanne — f.eks. «1 måned». i18n: komponenten har ingen hardkodet fallback.
1.4.1 Bruk av farge	A	Ikke stol på farge alene for valgt tilstand. Valgt tilstand kommuniseres med tre samtidige signaler (fylt sirkel-indikator med prikk, aksent-kant og lys fyll på pillen) — ikke kun farge. Ikke overstyr dette slik at kun fargen skiller valgt fra ikke-valgt.
3.3.3 Forslag ved feil	AA	Skriv en feilmelding som forklarer hva som må rettes. Chipene i feiltilstand får rød kant, og en valgt chip mørkerødt fyll — men fargen sier ikke hva som er galt. Send errorMessage (React) eller fyll [data-field="error"] (HTML) med tekst som beskriver feilen og hva brukeren skal gjøre — f.eks. «Du må velge minst to interesser», ikke «Ugyldig valg». Teksten må være på brukerens språk; komponenten har ingen hardkodet fallback.

Håndtert av komponenten (16)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Gruppen får role=radiogroup og navn fra legend via aria-labelledby. Hvert valg er native <input type=radio> med label koblet via for/id.
1.3.2 Meningsfull rekkefølge	A	Innholdet følger naturlig lesrekkefølge i DOM.
1.4.1 Bruk av farge	A	Valgt tilstand kommuniseres med fylt sirkel-indikator, aksent-kant og fyll — ikke farge alene. Feiltilstand bæres av kant på uvalgte chips, mørkerødt fyll med invertert forgrunn og indikator på en valgt chip, rødt ikon i feilmeldingen og selve feilteksten — aldri av fargen alene. Skrivebeskyttet bæres av nedtonet fyll, nedtonet forgrunn og låsikon i legend.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Chips wrapper og reflower korrekt ned til 320px viewport.
2.1.1 Tastatur	A	Native <input type=radio> navigeres med piltaster og velges med pil/Space. Fullt opererbart med tastatur.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut av gruppen med Tab og Shift+Tab.
2.4.3 Fokusrekkefølge	A	<ix-radio-group> wirer alle inputs til samme name, slik at piltaster flytter valget i naturlig rekkefølge og gruppen utgjør ett tab-stopp.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator via :focus-visible som følger pill-formen.
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
3.2.2 Ved inndata	A	Å velge en chip endrer kun gruppens verdi, ikke kontekst — ingen uventet navigasjon eller innsending.
1.4.3 Kontrast (minimum)	AA	Tekstfarge mot fill-tokens i alle tilstander. Disabled-tilstand (opacity: 0.4) er unntatt fra kravet per WCAG. I feiltilstand står invertert forgrunn mot fill-danger-default (ca. 5,5:1), og skrivebeskyttet foreground-main-read-only mot fill-interactive-read-only (ca. 4,6:1) — begge over 4,5:1, men read-only har liten margin.
3.3.2 Ledetekster eller instruksjoner	A	Gruppens legend fungerer som instruksjon/etikett for valget.
2.5.8 Målstørrelse (minimum)	AA	Hele pillen er klikkflate for valget. Med standard tetthet er md-størrelsen 36px høy, godt over 24×24px, og sm 26px. Med kompakt tetthet faller sm til 22px, altså under minimumet; chips wrapper i en gruppe med gap mellom seg, slik at avstands-unntaket i SC 2.5.8 gjelder. Konsumenten må unngå å pakke sm-chips så tett at både mål og avstand kommer under 24px.
4.1.2 Navn, rolle, verdi	A	<ix-radio-group> setter role=radiogroup på gruppen (navn fra legend via aria-labelledby), og native <input type=radio> gir rolle og valgt/ikke-valgt-tilstand (aria-checked). Native disabled-attributt eksponeres til hjelpemidler.
3.3.1 Identifikasjon av feil	A	Gruppen setter aria-invalid="true" på seg selv og på alle inputs når errorMessage er satt, og feilmeldingen rendres i [data-field="error"] med ikon og aria-live="polite", koblet til gruppen via aria-describedby. Chipene får rød kant, og en valgt chip mørkerødt fyll med invertert forgrunn og indikator. Selve feilteksten er konsumentens ansvar.

Ikke relevant (37)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Sirkel-indikatoren er rent dekorativ CSS uten egen markup; tilstanden formidles av native radio-input.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Chipen formidler ikke instruksjoner utover label/legend.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Ikke et skjemafelt som ber om personlig informasjon.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.12 Tekstavstand	AA
1.4.13 Innhold ved hover eller fokus	AA
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	A
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native radio-input — nettleseren håndterer pekerinteraksjon.
2.5.3 Label i navn	A	Den synlige label-teksten er det tilgjengelige navnet på hvert valg.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Radio chip genererer ingen statusmeldinger selv; en ev. feilmelding settes av konsumenten via errorMessage.

Ikke på plass (2)

Kriterium	Nivå	Hva som mangler
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Kanten på en uvalgt chip i feiltilstand har for lav kontrast. Feilkanten bruker --ix-color-border-danger-default (#f9807d), som gir ca. 2,5:1 mot en lys bakgrunn — under kravet på 3:1 for ikke-tekstlige indikatorer. En uvalgt chip i feiltilstand har ikke eget fyll, så kanten måles mot flaten chipen ligger på. Tokenet er hus-standard for feilkant i TextField, TextArea, Select og Checkbox, så avviket er felles for alle fem komponentene og gjennomgås separat. Det som oppfyller 3:1, er fokusindikatoren, indikator-kanten og fyllet på en valgt chip i feiltilstand. Feilen formidles heller aldri av kanten alene: en valgt chip får mørkerødt fyll med invertert forgrunn, og feilmeldingen vises som tekst med ikon.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Ringen på en skrivebeskyttet chip har for lav kontrast. Etter design-spec står ringen på en uvalgt skrivebeskyttet chip med --ix-color-border-main-default (#a0abbb) og uten fyll. Mot den grå read-only-flaten (#edeff2) gir det ca. 2,0:1, under kravet på 3:1. Verdien er den samme ringen har i alle andre tilstander, så alternativet ville vært en egen read-only-kant bare for chip. SC 1.4.11 gjør unntak for inaktive komponenter, og en skrivebeskyttet gruppe har pointer-events: none og kan ikke endres, men unntaket er skjønn og føres derfor opp her. Det valgte alternativet er uansett ikke avhengig av ringen: prikken bruker read-only-forgrunnen, som ligger på ca. 4,5:1, og valget er eksponert programmatisk.

Props / API

Radio chip er RadioGroup med variant="chip". Se RadioGroup for full API — tabellene under viser propsene som er relevante for chip-varianten.

RadioGroup

Prop	Type	Standard	Beskrivelse
variant	'chip'		Sett til 'chip' for chip-styling
legend	string		Påkrevd. Tilgjengelig navn for gruppen. i18n — ingen fallback
name	string		Felles name for alle radioknappene. Genereres automatisk hvis utelatt
value	string		Valgt verdi (kontrollert)
defaultValue	string		Valgt verdi (ukontrollert)
onChange	ChangeEventHandler<HTMLInputElement>		Event-basert — valgt verdi ligger i event.target.value
size	'sm' | 'md'	'md'	Størrelse — kun relevant for variant="chip"
description	string		Hjelpetekst over alternativene
errorMessage	string		Feilmelding — setter aria-invalid på gruppen
disabled	boolean		Deaktiverer hele gruppen
readOnly	boolean		Skrivebeskyttet: grå chips, valget kan ikke endres. Låsikon i legend
hideLegend	boolean		Skjuler legend visuelt, men beholder den for skjermlesere

RadioButton

Prop	Type	Standard	Beskrivelse
value	string		Påkrevd. Verdien dette valget representerer
label	string		Påkrevd. Synlig etikett. i18n — ingen fallback
disabled	boolean		Deaktiverer dette enkeltvalget

Tilpasning med CSS

Radio chip gjenbruker ix-radio-group-web componenten med chip-styling aktivert via data-variant="chip" på host-elementet. Trenger du stylingen på HTML du setter sammen selv, kan du bruke markupen under.

Tilgjengelige klasser og selektorer

Element/tilstand	Selektor / attributt
Radio chip (gruppe)	ix-radio-group[data-variant="chip"] — styler hver <label> som pill
Liten størrelse	ix-radio-group[data-variant="chip"][data-size="sm"]
Legend	[data-field="legend"]
Alternativer	[data-field="items"]
Enkeltvalg	.ix-radio-button med <input type="radio"> + <label>
Valgt tilstand	input:checked + label (automatisk)
Fokus	input:focus-visible + label (automatisk)
Feilmelding	[data-field="error"]
Feiltilstand	data-state="error" eller aria-invalid="true" på gruppen
Skrivebeskyttet	data-state="readonly" på gruppen

Eksempel: ren HTML

<ix-radio-group data-variant="chip" name="periode-css">
  <span data-field="legend">Velg periode</span>
  <div data-field="items">
    <div class="ix-radio-button">
      <input type="radio" id="periode-css-1m" value="1m" />
      <label for="periode-css-1m">1 måned</label>
    </div>
    <div class="ix-radio-button">
      <input type="radio" id="periode-css-3m" value="3m" checked />
      <label for="periode-css-3m">3 måneder</label>
    </div>
  </div>
  <span data-field="error" aria-live="polite"></span>
</ix-radio-group>

Relatert

• Chip — oversikt over chip-familien og felles retningslinjer
• Button chip — chip som trigger en handling
• Removable chip — chip som representerer et aktivt valg og kan fjernes
• RadioGroup — standard radiogruppe uten chip-styling