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 chipen med en lys aksentfarge og får aksent-kant, slik at valgt tilstand kommuniseres med mer enn farge.
Checkbox chip er avrundet, ikke pilleformet. Den firkantede indikatoren hører sammen med en avrundet chip, og formen skiller den fra radio chip på et blikk.
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.
Bruk
Laster...
Eksempler
Liten størrelse
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 hvit hake-boks. 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. Boksen på de uvalgte står uten fyll, så den grå flaten går helt inn til kanten av boksen. Valgene kan ikke endres, men de valgte alternativene er fortsatt eksponert programmatisk, så en skjermleser leser opp hva som er valgt.
Laster...
Laster...
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. Overstyr ikke stylingen slik at bare fargen skiller valgt fra ikke-valgt.
Hva komponenten gjør automatisk
- Gruppe-semantikk: checkbox chip bygger på
<ix-checkbox-group>, som setterrole="group", koblerlegendsom tilgjengelig navn, propagerernametil alle valg og kobler hver label til sin input. Hver chip er et eget tab-stopp. - Valgt tilstand vises med hake i fylt firkant, aksent-kant og fyll, ikke med farge alene. Tilstanden eksponeres programmatisk via native
aria-checked. - Fokusindikator via
:focus-visiblesom følger chipens avrundede form.
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-kriterier9 ditt ansvar · 16 håndtert · 37 ikke relevant · 1 ikke på plass
Ditt ansvar (9)
| 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. Hvert valg 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. 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. «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å hvert valg 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å chipen) — 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=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. Feiltilstand bæres av kant på uvalgte chips, mørkerødt fyll med hvit hake-boks 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=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 chipens avrundede form. |
| 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. 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 valgene. |
| 2.5.8 Målstørrelse (minimum) | AA | Hele chipen 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-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. |
| 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 hvit hake-boks. Selve feilteksten er konsumentens ansvar. |
Ikke relevant (37)
| 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.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. |
Ikke på plass (1)
| 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. |
Props / API
Checkbox chip er CheckboxGroup med variant="chip". Se CheckboxGroup for full API — tabellene under viser propsene som er relevante for chip-varianten.
CheckboxGroup
| 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 checkboxene. Propageres når satt | |
value | string[] | Valgte verdier (kontrollert) | |
defaultValue | string[] | Valgte verdier (ukontrollert) | |
onChange | ChangeEventHandler<HTMLInputElement> | Event-basert — toggl-verdien i event.target.value, av/på i event.target.checked. Lar {...register()} spres rett på | |
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, valgene kan ikke endres. Låsikon i legend | |
hideLegend | boolean | Skjuler legend visuelt, men beholder den for skjermlesere |
CheckboxButton
| 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
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 selektorer
| Element/tilstand | Selektor / attributt |
|---|---|
| Checkbox chip (gruppe) | ix-checkbox-group[data-variant="chip"] — styler hver <label> som chip |
| 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"] |
| Feiltilstand | data-state="error" eller aria-invalid="true" på gruppen |
| Skrivebeskyttet | data-state="readonly" på gruppen |
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