Egnet til:

• Filtrere data, for eksempel lister eller tabeller
• Vise valgte elementer i en gruppe

Uegnet til:

• Menyer, for eksempel sidemeny eller hovedmeny
• Statisk metadata (bruk Tag i stedet)
• Aksjons- eller innsendingsknapper i skjema

Komponenter som ligner:

• Button
• Tag

Teknisk dokumentasjon

Se Chips i Storybook for tekniske detaljer. 

Varianter

• Lukkbar variant med lukkekryss, til dynamiske filtre og visninger.
• Valgbar variant med utheving, til statiske filtre og visninger.
• To størrelser; medium (standard) og small. 

Hvordan bruke komponenten  

Chips er en gruppe

Chips er ment til å samle en gruppe av små knapper – det gir lite mening å bruke en enkelt chip på egenhånd. Da er vanlig knapp et bedre valg. Hvis du bruker den valgbare varianten uten ikon, må du ha minst tre for å kunne se hvilken chip som er valgt.

Statisk filter

Hvis du har data som kan filtreres ut ifra et bestemt sett med kriterier kan du bruke Chips til aktivere filteret eller veksle mellom ulike visninger.

Valgbare chips i et filter

Dynamisk filter

Du kan bruke lukkbare chips til å bygge opp et dynamisk filter.

Dynamisk filter med lukkbare chips

Oversikt over valg

Du kan bruke Chips til å tilby flere valg i en liste og samtidig gi en oversikt over alle tilgjengelige valg. Valgene må ha være korte, og være enklere å skanne eller sortere. Hvis du har lange eller sammensatte valg, bruk i stedet CheckboxGroup

 

Universell utforming    

• Når du navigerer med tastatur og fjerner en chip, settes fokus til neste chip. Når alle er fjernet, settes fokus til en skjult tekst: «Ingen flere filter». 
• Vurder å bruke ariaLabel for å navngi lista med chips hvis du har flere lister på samme side.