Aksel

Meny

Komponenter / Core

Chips

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

Chips er små interaktive komponenter 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.

Har du innspill til komponenten?

Send forslag

Eksempler

Toggle chip brukes til filtrering av innhold. Du velger selv om brukeren skal kunne velge én eller flere alternativer om gangen.

SandboxSandbox
Åpne eksempel i nytt vindu

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ørToggle 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ørChips 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:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLUListElement>
  • Description:

Chips.Toggle

as?

  • Type:
    React.ElementType
  • Description:

selected?

  • Type:
    boolean
  • Description:

variant?

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

checkmark?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Chips.Removable

as?

  • Type:
    React.ElementType
  • Description:

variant?

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

onDelete?

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

removeLabel?

  • Type:
    string
  • Default:
    "slett"
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter