• Filtrere data, f.eks. lister og tabeller
  • Vise filter som er aktivt
  • Navigasjon mellom tab-paneler
  • Menyer, f.eks. sidemeny eller hovedmeny
  • Statisk metadata (vurder Tag-komponenten)
Installer
Toggle chips brukt til filtrering
Toggle chips viser tydelig hva som er valgt og hva som er mulig å velge fra.
Select brukt som filter input
En Select vil ikke vise tydelig hva som er valgt om flere kan velges, eller hva som er alternativene å velge mellom.
Chips gruppert som sky
Denne grupperingen gjør chips veldig fleksibel og "lett" å plassere i layout.
Chips gruppert loddrett
Chips funker dårlig gruppert loddrett. Spesielt toggle chips, da bør du heller bruke checkbox- eller radio-grupper.
Minimum avstand mellom chips
Nullstille en gruppe toggle chips
En knapp som nullstiller alle valgte toggle chips.
Nullstille en gruppe removable chips
En knapp som fjerner alle removable chips.
Tag
Radio
Checkbox
KommandoInteraksjon
MellomromFjern/toggle verdi
EnterFjern/toggle verdi
TabFlytt fokus til neste chip
Shift+TabFlytt fokus til forrige chip
size?"medium" | "small"
Changes padding and font-sizes
className? string
ref? Ref<HTMLUListElement>
Chips extends HTMLUListElement
as? React.ElementType
OverridableComponent-api
selected? boolean
Toggles aria-pressed and visual-changes
className? string
ref? Ref<HTMLButtonElement>
Chips.Toggle extends HTMLButtonElement
as? React.ElementType
OverridableComponent-api
variant?"action" | "neutral"
Chip-variants
removeLabel?string
Replaces label read for screen-readers
onDelete? (() => void)
Click callback
className? string
ref? Ref<HTMLButtonElement>
Chips.Removable extends HTMLButtonElement
TokenFallback
--ac-chip-toggle-border--a-border-default
--ac-chip-toggle-bg--a-surface-neutral-subtle
--ac-chip-toggle-hover-border--a-border-strong
--ac-chip-toggle-hover-bg--a-surface-neutral-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-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