Removable chip
En removable chip representerer et aktivt valg eller en verdi som brukeren kan fjerne — for eksempel et valgt filter. Den finnes kun i valgt tilstand (den eksisterer ikke før den er valgt) og vises med lyst aksent-fyll, aksent-kant og et kryss til høyre — samme valgt-uttrykk som radio chip og checkbox chip.
Hele chipen er fjern-knappen. Et klikk hvor som helst på chipen fjerner den, og Enter eller Mellomrom gjør det samme når den har fokus. Krysset er et dekorativt CSS-ikon uten eget fokus, så det blir kun ett tab-stopp per chip. Dette følger mønsteret i Aksel og Designsystemet.
Det tilgjengelige navnet settes sammen av label og et fjern-suffiks, f.eks. «Sparing fjern». I React sender du suffikset via removeLabel; i ren HTML setter du hele aria-label selv. Suffikset må være på brukerens språk — komponenten har ingen hardkodet fallback.
Bruk
Laster...
Eksempler
Gruppe av removable chips
Laster...
Liten størrelse
Laster...
Feilmelding og skrivebeskyttet
Removable chip finnes bare i valgt tilstand, så error gir den mørkerødt fyll med lys tekst, ikke bare rød kant. Krysset følger tekstfargen automatisk.
readOnly gir en nedtonet grå flate, og onRemove kalles ikke, heller ikke med Enter eller Mellomrom. Chipen beholder tab-fokus, så innholdet kan fortsatt leses opp. Er begge satt, vinner error.
Vis alltid en feilmelding i tekst ved siden av chipene. Fargen på chipen forteller ikke hva som er galt.
Laster...
Universell utforming
Hva du selv må sørge for
- Gi removable chip et tilgjengelig fjern-navn. Send
removeLabel(React) eller sett helearia-label(HTML), f.eks. «Sparing fjern». Uten det hører skjermleserbrukeren bare «Sparing, knapp» og vet ikke at klikk fjerner den. Bruk riktig språk (bokmål «fjern», nynorsk «fjern», engelsk «remove») — ingen hardkodet fallback. - Gi chipen en kort og tydelig label. Teksten beskriver verdien som kan fjernes og inngår i det tilgjengelige navnet.
- Bruk chips i grupper. Removable chips viser aktive valg og gir mest mening presentert sammen.
- Ikke stol på farge alene. Teksten må alltid være den primære informasjonsbæreren.
Hva komponenten gjør automatisk
- Tilgjengelig navn settes til «[label] [removeLabel]».
- Fjern-krysset er dekorativt: det rendres med CSS (
::after) og ligger ikke i tilgjengelighetstreet. Hele chipen er fjern-knappen, så det blir kun ett tab-stopp. type="button"settes som standard så chipen ikke sender inn skjema utilsiktet.- Fokusindikator via
:focus-visible— synlig for tastaturbrukere, ikke for mus.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til chipen |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Enter | Fjerner chipen |
| Space | Fjerner chipen |
Skjermleser
- Ved fokus: "[label] [removeLabel], knapp" (f.eks. «Sparing fjern, knapp»)
- Deaktivert: "[label] [removeLabel], knapp, deaktivert"
WCAG-kriterier
Sist gjennomgått: 2026-06-29 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier9 ditt ansvar · 14 håndtert · 38 ikke relevant · 1 ikke på plass
Ditt ansvar (9)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 4.1.2 Navn, rolle, verdi | A | Gi removable chip et tilgjengelig fjern-navn. Removable chip fjernes ved klikk på hele chipen, og krysset er kun et dekorativt CSS-ikon. Send removeLabel (React) eller sett hele aria-label (HTML), f.eks. «Sparing fjern». Uten det hører skjermleserbrukeren bare «Sparing, knapp» og vet ikke at aktivering fjerner chipen. Konsumenten er ansvarlig for riktig språk (bokmål «fjern», nynorsk «fjern», engelsk «remove») — komponenten har ingen hardkodet fallback. |
| 2.4.6 Overskrifter og ledetekster | AA | Gi removable chip et tilgjengelig fjern-navn. Removable chip fjernes ved klikk på hele chipen, og krysset er kun et dekorativt CSS-ikon. Send removeLabel (React) eller sett hele aria-label (HTML), f.eks. «Sparing fjern». Uten det hører skjermleserbrukeren bare «Sparing, knapp» og vet ikke at aktivering fjerner chipen. Konsumenten er ansvarlig for riktig språk (bokmål «fjern», nynorsk «fjern», engelsk «remove») — komponenten har ingen hardkodet fallback. |
| 2.5.3 Label i navn | A | Gi removable chip et tilgjengelig fjern-navn. Removable chip fjernes ved klikk på hele chipen, og krysset er kun et dekorativt CSS-ikon. Send removeLabel (React) eller sett hele aria-label (HTML), f.eks. «Sparing fjern». Uten det hører skjermleserbrukeren bare «Sparing, knapp» og vet ikke at aktivering fjerner chipen. Konsumenten er ansvarlig for riktig språk (bokmål «fjern», nynorsk «fjern», engelsk «remove») — komponenten har ingen hardkodet fallback. |
| 2.4.6 Overskrifter og ledetekster | AA | Gi chipen en kort og tydelig label. Label-teksten beskriver verdien chipen representerer — f.eks. «Sparing» eller et valgt filter. Den inngår i det tilgjengelige navnet sammen med fjern-suffikset. Unngå lange tekster. |
| 1.3.1 Informasjon og relasjoner | A | Gi chipen en kort og tydelig label. Label-teksten beskriver verdien chipen representerer — f.eks. «Sparing» eller et valgt filter. Den inngår i det tilgjengelige navnet sammen med fjern-suffikset. Unngå lange tekster. |
| 1.3.1 Informasjon og relasjoner | A | Bruk chips i grupper, ikke alene. Removable chips viser aktive valg eller filtre og gir mest mening presentert sammen i en gruppe. En enkeltstående removable chip gir lite kontekst. |
| 1.4.1 Bruk av farge | A | Ikke stol på farge alene for å skille chips. Forskjeller mellom chips må ikke kun kommuniseres med farge. Teksten må alltid være den primære informasjonsbæreren. Krysset (dekorativt) signaliserer at chipen kan fjernes. |
| 3.3.1 Identifikasjon av feil | A | Vis feiltilstand med tekst, ikke bare rød kant. error gir chipen rød kant (mørkerødt fyll på en removable chip), men chipen har ingen egen feilmelding. Du må selv vise en tekst ved siden av chipene som identifiserer feilen og forklarer hva brukeren skal gjøre, og koble den til chipene med aria-describedby. Uten det er fargen den eneste beskjeden, og en skjermleserbruker får ingen. |
| 3.3.3 Forslag ved feil | AA | Vis feiltilstand med tekst, ikke bare rød kant. error gir chipen rød kant (mørkerødt fyll på en removable chip), men chipen har ingen egen feilmelding. Du må selv vise en tekst ved siden av chipene som identifiserer feilen og forklarer hva brukeren skal gjøre, og koble den til chipene med aria-describedby. Uten det er fargen den eneste beskjeden, og en skjermleserbruker får ingen. |
Håndtert av komponenten (14)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Native <button>-element med implisitt rolle. Tekst-innhold gir tilgjengelig navn automatisk. |
| 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 fyll, kant og fjern-krysset — ikke farge alene. Feiltilstand bæres av mørkerødt fyll med invertert forgrunn (krysset følger tekstfargen), skrivebeskyttet av nedtonet fyll og forgrunn. En frittstående chip har ingen feilmelding, så konsumenten må vise feilen som tekst. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter — skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Reflower korrekt ned til 320px viewport. |
| 2.1.1 Tastatur | A | Native <button> aktiveres med Enter og Space. Fullt opererbart med tastatur. |
| 2.1.2 Ingen tastaturfelle | A | Fokus kan navigeres ut med Tab og Shift+Tab. |
| 2.4.3 Fokusrekkefølge | A | Følger naturlig tab-rekkefølge i DOM. Krysset er et dekorativt CSS-ikon uten eget fokus, så hver removable chip er ett tab-stopp. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator via :focus-visible med outline-token. |
| 3.2.1 Ved fokus | A | Fokus trigger ingen kontekstendring. |
| 1.4.3 Kontrast (minimum) | AA | Tekstfarge mot fill-main-subtle-tokens i alle interaksjonstilstander. 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. |
| 4.1.2 Navn, rolle, verdi | A | Native <button> med implisitt rolle=button og navn fra aria-label «[label] [removeLabel]». Native disabled-attributt eksponeres til hjelpemidler. |
| 2.5.3 Label i navn | A | Den synlige label-teksten inngår i det tilgjengelige navnet («[label] [removeLabel]»). |
| 2.5.8 Målstørrelse (minimum) | AA | Hele chipen er fjern-knappen. 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 presenteres i grupper 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. |
Ikke relevant (38)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | Krysset er et dekorativt CSS-ikon (::after) uten egen markup og ligger ikke i tilgjengelighetstreet. |
| 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 — den representerer et valg som kan fjernes. |
| 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 button-element — nettleseren håndterer pekerinteraksjon. |
| 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.2 Ved inndata | A | Chipen trigger ingen automatisk kontekstendring ved fokus. |
| 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.2 Ledetekster eller instruksjoner | A | |
| 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 | Removable chip genererer ingen statusmeldinger selv; konsumenten varsler ev. om at et valg er fjernet. |
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 hvit bakgrunn — under kravet på 3:1 for ikke-tekstlige indikatorer. 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
RemovableChip
| Prop | Type | Standard | Beskrivelse |
|---|---|---|---|
children | string | Etiketten på chipen. Inngår i det tilgjengelige navnet | |
removeLabel | string | Påkrevd. Suffiks i det tilgjengelige navnet, f.eks. "fjern" gir «Sparing fjern». i18n — ingen fallback | |
onRemove | () => void | Kalles når chipen fjernes (klikk / Enter / Mellomrom) | |
size | 'sm' | 'md' | 'md' | Størrelse |
disabled | boolean | Deaktiverer chipen (nativ HTML-attributt) | |
error | boolean | Viser chipen i feiltilstand med mørkerødt fyll. Slår readOnly | |
readOnly | boolean | Nedtonet grå flate, onRemove kalles ikke. Setter aria-disabled |
I tillegg støttes alle standard HTML-knapp-attributter (onClick, onFocus, type, name, value, tabIndex osv.) og settes direkte på elementet.
Tilpasning med CSS
Trenger du removable chip-stylingen på HTML du setter sammen selv, kan du bruke .ix-chip-klassen med data-removable direkte.
Tilgjengelige klasser og selektorer
| Element/tilstand | Selektor / attributt |
|---|---|
| Chip | .ix-chip |
| Removable chip (valgt) | data-removable |
| Fjern-kryss | .ix-chip[data-removable]::after (dekorativt, ingen markup) |
| Liten størrelse | data-size="sm" |
| Hover / active | :hover / :active (automatisk) |
| Fokus | :focus-visible (automatisk) |
| Deaktivert | disabled eller aria-disabled="true" |
| Feilmelding | data-state="error" eller aria-invalid="true" |
| Skrivebeskyttet | data-state="readonly" |
Eksempel: ren HTML
<button class="ix-chip" data-removable aria-label="Sparing fjern">
Sparing
</button>
<button class="ix-chip" data-size="sm" data-removable aria-label="Lån fjern">
Lån
</button>
Relatert
- Chip — oversikt over chip-familien og felles retningslinjer
- Button chip — chip som trigger en handling
- Radio chip — gruppe der brukeren velger nøyaktig ett alternativ