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 fylt aksentfarge og et kryss til høyre.

Hele chipen er fjern-knappen. Et klikk hvor som helst på chipen — eller Enter/Mellomrom når den har fokus — fjerner den. 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.

Kom i gang

Result

Loading...

Kode

Live Editor

<button class="ix-chip" data-removable aria-label="Sparing fjern">
  Sparing
</button>

Result

Loading...

Kode

Live Editor

<RemovableChip removeLabel="fjern" onRemove={() => {}}>
  Sparing
</RemovableChip>

Eksempler

Gruppe av removable chips

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ix-spacing-sm)' }}>
  <button class="ix-chip" data-removable aria-label="Sparing fjern">Sparing</button>
  <button class="ix-chip" data-removable aria-label="Lån fjern">Lån</button>
  <button class="ix-chip" data-removable aria-label="Forsikring fjern">Forsikring</button>
</div>

Result

Loading...

Kode

Live Editor

<div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--ix-spacing-sm)' }}>
  <RemovableChip removeLabel="fjern" onRemove={() => {}}>Sparing</RemovableChip>
  <RemovableChip removeLabel="fjern" onRemove={() => {}}>Lån</RemovableChip>
  <RemovableChip removeLabel="fjern" onRemove={() => {}}>Forsikring</RemovableChip>
</div>

Liten størrelse

Result

Loading...

Kode

Live Editor

<button class="ix-chip" data-size="sm" data-removable aria-label="Sparing fjern">
  Sparing
</button>

Result

Loading...

Kode

Live Editor

<RemovableChip size="sm" removeLabel="fjern" onRemove={() => {}}>
  Sparing
</RemovableChip>

Universell utforming

Hva du selv må sørge for

• Gi removable chip et tilgjengelig fjern-navn — 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 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-kriterier7 ditt ansvar · 15 håndtert · 40 ikke relevant · 0 ikke på plass

Ditt ansvar (7)

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.

Håndtert av komponenten (15)

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	Tilstand (hover/active) kommuniseres med fyll og kant i tillegg til farge — ikke farge alene.
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.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Fokusindikator oppfyller 3:1 kontrastkrav.
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-tokens i alle interaksjonstilstander. Disabled-tilstand (opacity: 0.4) er unntatt fra kravet per WCAG.
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. md-størrelsen gir klikkflate godt over 24×24px. sm-størrelsen (padding-block spacing-2xs + font-size-sm) er nær 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 (40)

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.1 Identifikasjon av feil	A
3.3.2 Ledetekster eller instruksjoner	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	Removable chip genererer ingen statusmeldinger selv; konsumenten varsler ev. om at et valg er fjernet.

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)

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 attributter

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"

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