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.

Kom i gang

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

<RadioChipGroup legend="Velg periode" name="periode" defaultValue="3m">
  <RadioChip value="1m" label="1 måned" />
  <RadioChip value="3m" label="3 måneder" />
  <RadioChip value="12m" label="12 måneder" />
</RadioChipGroup>

Eksempler

Liten størrelse

Result

Loading...

Kode

Live Editor

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

Result

Loading...

Kode

Live Editor

<RadioChipGroup legend="Velg periode" name="periode-liten" size="sm" defaultValue="3m">
  <RadioChip value="1m" label="1 måned" />
  <RadioChip value="3m" label="3 måneder" />
  <RadioChip value="12m" label="12 måneder" />
</RadioChipGroup>

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.

Result

Loading...

Kode

Live Editor

<ix-radio-group data-variant="chip" name="nyhetsbrev">
  <span data-field="legend">Ønsker du nyhetsbrev?</span>
  <div data-field="items">
    <div class="ix-radio-button">
      <input type="radio" id="nyhetsbrev-ja" value="ja" />
      <label for="nyhetsbrev-ja">Ja</label>
    </div>
    <div class="ix-radio-button">
      <input type="radio" id="nyhetsbrev-nei" value="nei" />
      <label for="nyhetsbrev-nei">Nei</label>
    </div>
  </div>
  <span data-field="error" aria-live="polite"></span>
</ix-radio-group>

Result

Loading...

Kode

Live Editor

<RadioChipGroup legend="Ønsker du nyhetsbrev?" name="nyhetsbrev">
  <RadioChip value="ja" label="Ja" />
  <RadioChip value="nei" label="Nei" />
</RadioChipGroup>

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 — ikke overstyr stylingen slik at kun 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 kommuniseres med fylt sirkel-indikator, aksent-kant og fyll — ikke farge alene — og 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-kriterier8 ditt ansvar · 16 håndtert · 39 ikke relevant · 0 ikke på plass

Ditt ansvar (8)

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 RadioChip 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 RadioChip 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 RadioChip 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 RadioChip 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.

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.
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.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator og indikator-kant oppfyller 3:1 kontrastkrav.
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.
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. md-størrelsen gir mål godt over 24×24px. sm-størrelsen (padding-block spacing-2xs + font-size-sm) er nær 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.

Ikke relevant (39)

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.1 Identifikasjon av feil	A
3.3.3 Forslag ved feil	AA
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.

Props / API

RadioChipGroup

Prop	Type	Standard	Beskrivelse
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	(value: string) => void		Kalles med valgt verdi når brukeren bytter
size	'sm' | 'md'	'md'	Størrelse
description	string		Hjelpetekst over alternativene
errorMessage	string		Feilmelding — setter aria-invalid på gruppen
disabled	boolean		Deaktiverer hele gruppen
hideLegend	boolean		Skjuler legend visuelt, men beholder den for skjermlesere

RadioChip

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 attributter

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"]

Eksempel: ren HTML

<ix-radio-group data-variant="chip" name="periode">
  <span data-field="legend">Velg periode</span>
  <div data-field="items">
    <div class="ix-radio-button">
      <input type="radio" id="periode-1m" value="1m" />
      <label for="periode-1m">1 måned</label>
    </div>
    <div class="ix-radio-button">
      <input type="radio" id="periode-3m" value="3m" checked />
      <label for="periode-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