Hopp til innhold
Aksel

Komponenter

Chips

Chips er små interaktive knapper som styrer visning av innhold.

Egnet til:

  • Filtrere data, f.eks. lister eller tabeller
  • Vise valgte filtre

Uegnet til:

  • Menyer, f.eks. sidemeny eller hovedmeny
  • Statisk metadata (se Tag)
  • Skjemakomponent (se Checkbox/Radio)

Eksempler

Retningslinjer

Uten checkmark

Ved bruk av Chips med toggle uten checkmark må du sørge for at det er mulig å se hvilken som er valgt, for eksempel ved å ha minst tre valg og single select.

Filtrere innhold

I en filtermeny er Chips med toggle godt egnet hvis du ønsker at alle valgene skal være synlig for brukeren.

Gjør
Chips med toggle brukt til filtrering
Chips med toggle viser tydelig hva man kan velge og hva som er valgt.
Pass på
Select brukt som filter input
En Select vil ikke vise tydelig hvilke alternativer man kan velge mellom.

Chips-grupper

Chips er laget for å vises horisontalt, med eller uten wrapping.

Gjør
Chips horisontalt med wrapping
Denne grupperingen gjør Chips veldig fleksibel å plassere i layout.
Unngå
Chips loddrett
Chips funker dårlig gruppert loddrett.

Tilgjengelighet

Hvis deler av siden oppdateres når brukeren interagerer med Chips, må du sikre at skjermleserbrukere informeres. Dette kan gjøres med en ARIA live region som viser antall treff eller andre endringer.

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

Chips

size?

  • Type:
    "medium" | "small"
  • Default:
    "medium"
  • Description:

    Changes padding and font-sizes.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLUListElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Chips.Removable

onDelete?

  • Type:
    (() => void)
  • Description:

    Click callback

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Overrides inherited color. @see 🏷️ {@link AkselColor } @see 📝 Documentation

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

variant?

  • Deprecated:
    Use `data-color` prop instead.
  • Type:
    "action" | "neutral"

Chips.Toggle

selected?

  • Type:
    boolean
  • Description:

    Toggles aria-pressed and visual changes

data-color?

  • Type:
    "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
  • Description:

    Overrides inherited color. @see 🏷️ {@link AkselColor } @see 📝 Documentation

checkmark?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Toggles display of checkmark on selected

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLButtonElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

variant?

  • Deprecated:
    Use `data-color` prop instead.
  • Type:
    "action" | "neutral"

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Forvalter

Team
Aksel
Artikkel oppdatert 4. september 2026
Send innspill
Om du har noen innspill eller tilbakemeldinger kan du sende dem inn på GitHub.
Send innspill
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack