Checkbox chip

En checkbox chip er en gruppe chips der brukeren kan velge ett eller flere alternativer samtidig — som kompakte filter- eller preferansevalg. Hvert valg er uavhengig av de andre.

Hver chip har en indikator til venstre for teksten: en tom firkant når den ikke er valgt, og en fylt firkant med hake 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.

Checkbox chip gjenbruker checkbox-gruppe-semantikken: gruppen får role="group", og hver chip er et eget tab-stopp som toggles med Space. Gi alltid gruppen en beskrivende legend.

Kom i gang

Result

Kode

Live Editor

<ix-checkbox-group data-variant="chip" name="interesser">
  <span data-field="legend">Velg interesser</span>
  <div data-field="items">
    <div class="ix-checkbox">
      <input type="checkbox" id="int-sport" value="sport" checked />
      <label for="int-sport">Sport</label>
    </div>
    <div class="ix-checkbox">
      <input type="checkbox" id="int-musikk" value="musikk" />
      <label for="int-musikk">Musikk</label>
    </div>
    <div class="ix-checkbox">
      <input type="checkbox" id="int-reise" value="reise" />
      <label for="int-reise">Reise</label>
    </div>
  </div>
  <span data-field="error" aria-live="polite"></span>
</ix-checkbox-group>

Result

Kode

Live Editor

<CheckboxChipGroup legend="Velg interesser" name="interesser" defaultValue={['sport']}>
  <CheckboxChip value="sport" label="Sport" />
  <CheckboxChip value="musikk" label="Musikk" />
  <CheckboxChip value="reise" label="Reise" />
</CheckboxChipGroup>

Eksempler

Liten størrelse

Result

Kode

Live Editor

<ix-checkbox-group data-variant="chip" data-size="sm" name="interesser-liten">
  <span data-field="legend">Velg interesser</span>
  <div data-field="items">
    <div class="ix-checkbox">
      <input type="checkbox" id="liten-sport" value="sport" checked />
      <label for="liten-sport">Sport</label>
    </div>
    <div class="ix-checkbox">
      <input type="checkbox" id="liten-musikk" value="musikk" />
      <label for="liten-musikk">Musikk</label>
    </div>
    <div class="ix-checkbox">
      <input type="checkbox" id="liten-reise" value="reise" />
      <label for="liten-reise">Reise</label>
    </div>
  </div>
  <span data-field="error" aria-live="polite"></span>
</ix-checkbox-group>

Result

Kode

Live Editor

<CheckboxChipGroup legend="Velg interesser" name="interesser-liten" size="sm" defaultValue={['sport']}>
  <CheckboxChip value="sport" label="Sport" />
  <CheckboxChip value="musikk" label="Musikk" />
  <CheckboxChip value="reise" label="Reise" />
</CheckboxChipGroup>

Universell utforming

Hva du selv må sørge for

Gi checkbox chip-gruppen en beskrivende legend — det er gruppens tilgjengelige navn. Bruk riktig språk; ingen hardkodet fallback.
Bruk checkbox chip når flere valg kan kombineres — skal brukeren kun velge ett alternativ, er det feil semantikk. Bruk radio 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

Gruppe-semantikk — checkbox chip bygger på <ix-checkbox-group>, som setter role="group", kobler legend som tilgjengelig navn, propagerer name til alle valg og kobler hver label til sin input. Hver chip er et eget tab-stopp.
Valgt tilstand kommuniseres med fylt firkant-indikator (hake), 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 til neste chip i gruppen
`Shift+Tab`	Flytter fokus til forrige chip
`Space`	Toggler valgt tilstand på chipen som har fokus

Skjermleser

Gruppe ved fokus: "[legend], gruppe"
Hvert valg: "[label], avkryssingsboks, avkrysset/ikke avkrysset"
Deaktivert valg: "[label], avkryssingsboks, 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 checkbox chip-gruppen en beskrivende legend. Checkbox 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 valgene 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 checkbox chip-gruppen en beskrivende legend. Checkbox 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 valgene 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 checkbox chip-gruppen en beskrivende legend. Checkbox 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 valgene 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 checkbox chip når flere valg kan kombineres. Checkbox chip er for uavhengige valg der null, ett eller flere kan være aktive samtidig. Skal brukeren kun kunne velge ett alternativ, er det feil semantikk — bruk radio chip i stedet. Hver CheckboxChip må ha en kort, beskrivende label.
1.3.1 Informasjon og relasjoner	A	Bruk checkbox chip når flere valg kan kombineres. Checkbox chip er for uavhengige valg der null, ett eller flere kan være aktive samtidig. Skal brukeren kun kunne velge ett alternativ, er det feil semantikk — bruk radio chip i stedet. Hver CheckboxChip må ha en kort, beskrivende label.
2.4.6 Overskrifter og ledetekster	AA	Gi hvert valg en kort og tydelig label. Label-teksten på hver CheckboxChip er det tilgjengelige navnet for valget. Den skal være kort og enkel å skanne — f.eks. «Sport». i18n: komponenten har ingen hardkodet fallback.
1.3.1 Informasjon og relasjoner	A	Gi hvert valg en kort og tydelig label. Label-teksten på hver CheckboxChip er det tilgjengelige navnet for valget. Den skal være kort og enkel å skanne — f.eks. «Sport». 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 firkant-indikator med hake, 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=group og navn fra legend via aria-labelledby. Hvert valg er native <input type=checkbox> 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 firkant-indikator (hake), 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=checkbox> er fullt opererbart med tastatur: Tab flytter fokus til hver chip, Space toggler valgt tilstand.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut av gruppen med Tab og Shift+Tab. Ingen tastaturfelle.
2.4.3 Fokusrekkefølge	A	Hver chip er et eget tab-stopp i naturlig DOM-rekkefølge (ingen piltast-mutex — i motsetning til radio chip).
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	Å toggle 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 valgene.
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-checkbox-group> setter role=group på gruppen (navn fra legend via aria-labelledby), og native <input type=checkbox> 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	Firkant-/hake-indikatoren er rent dekorativ CSS uten egen markup; tilstanden formidles av native checkbox-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 checkbox-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	Checkbox chip genererer ingen statusmeldinger selv; en ev. feilmelding settes av konsumenten via errorMessage.

Props / API

`CheckboxChipGroup`

Prop	Type	Standard	Beskrivelse
`legend`	`string`		Påkrevd. Tilgjengelig navn for gruppen. i18n — ingen fallback
`name`	`string`		Felles `name` for alle checkboxene. Propageres når satt
`value`	`string[]`		Valgte verdier (kontrollert)
`defaultValue`	`string[]`		Valgte verdier (ukontrollert)
`onChange`	`(values: string[]) => void`		Kalles med hele det oppdaterte arrayet når brukeren toggler
`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

`CheckboxChip`

Prop	Type	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

Checkbox chip gjenbruker ix-checkbox-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
Checkbox chip (gruppe)	`ix-checkbox-group[data-variant="chip"]` — styler hver `<label>` som pill
Liten størrelse	`ix-checkbox-group[data-variant="chip"][data-size="sm"]`
Legend	`[data-field="legend"]`
Alternativer	`[data-field="items"]`
Enkeltvalg	`.ix-checkbox` med `<input type="checkbox">` + `<label>`
Valgt tilstand	`input:checked + label` (automatisk)
Fokus	`input:focus-visible + label` (automatisk)
Feilmelding	`[data-field="error"]`

Eksempel: ren HTML

<ix-checkbox-group data-variant="chip" name="interesser">
  <span data-field="legend">Velg interesser</span>
  <div data-field="items">
    <div class="ix-checkbox">
      <input type="checkbox" id="int-sport" value="sport" checked />
      <label for="int-sport">Sport</label>
    </div>
    <div class="ix-checkbox">
      <input type="checkbox" id="int-musikk" value="musikk" />
      <label for="int-musikk">Musikk</label>
    </div>
  </div>
  <span data-field="error" aria-live="polite"></span>
</ix-checkbox-group>

Relatert

Chip — oversikt over chip-familien og felles retningslinjer
Radio chip — chip-gruppe der brukeren velger nøyaktig ett alternativ
Button chip — chip som trigger en handling
CheckboxGroup — standard checkbox-gruppe uten chip-styling

Kom i gang​

Eksempler​

Liten størrelse​

Universell utforming​

Hva du selv må sørge for​

Hva komponenten gjør automatisk​

Tastaturnavigasjon

Skjermleser

WCAG-kriterier​

Props / API​

CheckboxChipGroup​

CheckboxChip​

Tilpasning med CSS​

Tilgjengelige klasser og attributter​

Eksempel: ren HTML​

Relatert​

Kom i gang

Eksempler

Liten størrelse

Universell utforming

Hva du selv må sørge for

Hva komponenten gjør automatisk

WCAG-kriterier

Props / API

`CheckboxChipGroup`

`CheckboxChip`

Tilpasning med CSS

Tilgjengelige klasser og attributter

Eksempel: ren HTML

Relatert