Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Chips

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

StabilOppdatert 9. mai 2025
Github FigmaEndringslogg

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.

Eksempler

Retningslinjer

Antall valg

Ved bruk av ToggleChips uten Checkmark må det være minst 3 valg, slik at det er mulig å se hvilken som er valgt.

Filtrere innhold

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

Gjør
Toggle chips brukt til filtrering
Toggle chips viser tydelig hva som er valgt og hva som er mulig å velge fra.
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 å grupperes i en rad eller som en sky. Som sky vil gruppen med chips tilpasse seg plassen den får.

Gjør
Chips gruppert som sky
Denne grupperingen gjør chips veldig fleksibel og "lett" å plassere i layout.
Unngå
Chips gruppert loddrett
Chips funker dårlig gruppert loddrett. Spesielt toggle chips, da bør du heller bruke checkbox- eller radio-grupper.

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.

Se også

Relaterte komponenter

Props

Chips

size?

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

    Changes padding and font-sizes.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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.Toggle

selected?

  • Type:
    boolean
  • Description:

    Toggles aria-pressed and visual changes

variant?

  • Type:
    "action" | "neutral"
  • Default:
    ""action""
  • Description:

    Chip-variants

checkmark?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Toggles display of checkmark on selected

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Chips.Removable

variant?

  • Type:
    "action" | "neutral"
  • Default:
    ""action""
  • Description:

    Chip-variants

onDelete?

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

    Click callback

className?

  • Type:
    string

data-color?

  • Type:
    AkselColor | (string & {})

ref?

  • Type:
    LegacyRef<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

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-chip-toggle-border--a-border-subtle
--ac-chip-toggle-bg--a-surface-action-subtle
--ac-chip-toggle-text--a-text-default
--ac-chip-toggle-hover-border--a-border-subtle-hover
--ac-chip-toggle-hover-bg--a-surface-action-subtle-hover
--ac-chip-toggle-pressed-bg--a-surface-action-selected
--ac-chip-toggle-pressed-text--a-text-on-action
--ac-chip-toggle-pressed-hover-bg--a-surface-action-selected-hover
--ac-chip-toggle-neutral-border--a-border-subtle
--ac-chip-toggle-neutral-bg--a-surface-neutral-subtle
--ac-chip-toggle-neutral-text--a-text-default
--ac-chip-toggle-neutral-hover-border--a-border-subtle-hover
--ac-chip-toggle-neutral-hover-bg--a-surface-neutral-subtle-hover
--ac-chip-toggle-neutral-pressed-bg--a-surface-neutral-selected
--ac-chip-toggle-neutral-pressed-text--a-text-on-neutral
--ac-chip-toggle-neutral-pressed-hover-bg--a-surface-neutral-selected
--ac-chip-toggle-circle-border--a-border-default
--ac-chip-toggle-focus--a-border-focus
--ac-chip-removable-action-bg--a-surface-action-selected
--ac-chip-removable-action-text--a-text-on-action
--ac-chip-removable-neutral-bg--a-surface-neutral-subtle
--ac-chip-removable-neutral-text--a-text-default
--ac-chip-removable-neutral-border--a-border-default
--ac-chip-removable-action-hover-bg--a-surface-action-selected-hover
--ac-chip-removable-neutral-hover-bg--a-surface-neutral-subtle-hover
--ac-chip-removable-neutral-hover-border--a-border-strong