Chip

Chip er små, interaktive komponenter som lar brukeren gjøre raske valg, filtrere innhold eller trigge handlinger. Chips brukes ofte i grupper og gir en kompakt og oversiktlig måte å presentere valg på.

Alle chips deler samme visuelle grunnmur: to størrelser (md/sm), fokusindikator og tilstandsfarger. Semantikk, oppførsel og form velger du ved å velge type. Button chip, removable chip og radio chip er pilleformet, mens checkbox chip er avrundet.

Egnet til

• Filtrering av innhold (f.eks. kategorier eller søkefilter)
• Hurtigvalg og enkle beslutninger
• Vise aktive valg som kan fjernes
• Handlinger med lav kompleksitet, presentert kompakt

Uegnet til

• Komplekse valg med mye informasjon — bruk Checkbox eller Select
• Kritiske eller irreversible handlinger — bruk en tydelig Button med bekreftelse
• Lange tekster eller forklaringer
• Situasjoner der brukeren må ta gjennomtenkte valg

De fire typene

Velg type ut fra hva brukeren skal gjøre. Hver type har egen dokumentasjon med eksempler, API og tilgjengelighet.

• Button chip: trigger en handling eller et hurtigvalg. Ingen vedvarende valgt tilstand.
• Removable chip: representerer et aktivt valg eller en verdi som kan fjernes (f.eks. et valgt filter).
• Radio chip: en gruppe der brukeren velger nøyaktig ett alternativ.
• Checkbox chip: en gruppe der brukeren kan velge flere alternativer samtidig.

Retningslinjer

Bruk chip til raske valg

Chips er til for å velge, filtrere eller utløse noe med ett trykk. De fungerer når valget kan leses i farten, og dårlig når det trenger en forklaring først.

Velg type etter hva valget gjør

Typen bestemmer både oppførsel og hva brukeren tror hen får: radio for ett valg, checkbox for flere, removable for aktive valg som kan fjernes, og button for en handling.

Hold labelen kort

Ett til tre ord. En chip med en hel setning i mister poenget: den skal kunne skannes på langs av en rad, ikke leses.

Bruk chips i grupper

En rad med chips viser hva som finnes å velge mellom. Alene fungerer stort sett bare button chip, som utløser en handling og ikke inngår i et valg.

Unngå for mange chips samtidig

Blir raden lang, tar den over skjermen og slutter å være rask. Del valgene i grupper med egne overskrifter, eller flytt dem til en liste med søk.

La ikonet støtte teksten

Et ikon kan gjøre valget raskere å kjenne igjen, men teksten bærer meningen. En chip med bare ikon sier ingenting til den som ikke kjenner symbolet.

Tilpasning med CSS

Button chip og removable chip bygger på .ix-chip-klassen. Den gir pill-form, størrelser, tilstandsfarger og fokusindikator. Trenger du stylingen på HTML du setter sammen selv, uten React-komponenten, kan du bruke klassen direkte på elementene dine.

Radio chip og checkbox chip får samme styling fra data-variant="chip" på gruppe-elementet, ikke fra klassen. Se Radio chip og Checkbox chip for markup.

Felles klasser og attributter

Element/tilstand	Selektor / attributt
Chip	.ix-chip
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"

Type-spesifikke kroker (f.eks. data-removable for removable chip og ix-radio-group[data-variant="chip"] for radio chip) er dokumentert på hver undertype-side.

En chip som ligger inne i et felt arver feltets tilstand: står data-state="error" eller data-state="readonly" på gruppen (ix-radio-group, ix-checkbox-group) eller på en multiselect-combobox, følger chipene etter uten at du setter noe på dem selv.

Eksempel: ren HTML

<button class="ix-chip" type="button">
  Chip label
</button>

<button class="ix-chip" data-size="sm" type="button">
  Liten chip
</button>

Relatert

• Button — for primære og sekundære handlinger i en visning
• RadioGroup — standard radiogruppe uten chip-styling
• Typografi — skriftstørrelser brukt i chips
• Spacing — padding-tokens for sm/md