Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

Chips

Oppdatert 4. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    Løsningene vi lager har ofte behov for handlinger som ikke er "primære" eller at det ikke passer å bruke Buttons. Chips er små interaktive komponenter som manipulerer data eller visning av data.

    Egnet til:

    • Filtrere data, f.eks. lister og tabeller
    • Vise filter som er aktivt

    Uegnet til:

    • Navigasjon mellom tab-paneler
    • Menyer, f.eks. sidemeny eller hovedmeny
    • Statisk metadata (se Tag-komponenten)

    Har du innspill til komponenten?

    Send forslag

    Eksempler

    Toggle chip brukes til filtrering av innhold og data.

    Åpne eksempel i nytt vindu

    Toggle chip brukes til filtrering av innhold og data.

    Removable chip viser valgte verdier som brukeren kan fjerne.

    Removable chip viser valgte verdier som brukeren kan fjerne.

    Varianter

    Toggle chip

    Toggle chip brukes til filtrering av innhold og data. Når en eller flere chips velges vil innholdet endres til å vise kun det som er valgt. Det betyr at du implementerer om brukeren selv skal kunne velge ett eller flere alternativer.

    Removable chip

    Removable chip viser valgte verdier som brukeren kan fjerne. For eksempel valgte filter eller verdier som brukeren har skrevet i tekstfelt.

    Retningslinjer

    Antall valg

    Om du bruker ToggleChips uten Checkmark blir det litt vanskeligere for brukerne å skjønne hva som er valgt. Antallet valg vil hjelpe. Det må minimum være 3 valg om du bruker ToggleChip uten Chackmark.

    Filtrere innhold

    Toggle chips gjør det veldig synlig for brukeren hva som er valgt. Disse kan være et bedre alternativ enn Select avhengig av antall valg du vil at brukeren skal kunne se på samme tid.

    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

    Måten chips kan organiseres på er en fordel når det ikke er masse plass til overs. Chips kan grupperes i en rad eller som en sky. Som sky vil gruppen med chips tilpasse seg plassen den får. Chips er ikke designet for å grupperes loddrett.

    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.

    Avstand

    Chips er ganske små. Derfor må vi ha god avstand mellom chips, og mellom andre interaktive elementer. Chips har en standard spacing mellom seg, men det du kan bruke større avstand om du ønsker det.

    Minimum avstand mellom chips

    Nullstille alt

    Du kan implementere både toggle chips og removable chips sånn at brukeren kan nullstille alt på en gang.

    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.

    Se også

    NyheterRelevante lenker

    • Tag
    • Radio
    • Checkbox

    Tilgjengelighet

    Interaksjon med tastatur

    KommandoInteraksjon
    MellomromFjern/toggle verdi
    EnterFjern/toggle verdi
    TabFlytt fokus til neste chip
    Shift+++TabFlytt fokus til forrige chip

    Interaksjon med skjermleser

    Dersom informasjonen på siden blir dynamisk oppdatert når brukeren interagerer med chips'ene, må du sikre at skjermleser- og leselistbrukere blir informert om endringene. Dette kan du gjøre med en ARIA live region som leser opp hvordan dataen som er filtrert endrer seg som et resultat av brukerens interaksjon, f.eks. "Viser 5 resultater".

    Props

    Chips

    size?"medium" | "small"
    Changes padding and font-sizes
    className? string
    ref? Ref<HTMLUListElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Chips extends HTMLUListElement

    Chips.Toggle

    as? React.ElementType
    OverridableComponent-api
    selected? boolean
    Toggles aria-pressed and visual-changes
    variant?"action" | "neutral"
    Chip-variants
    checkmark?boolean
    Toggles display of checkmark on selected
    className? string
    ref? Ref<HTMLButtonElement>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Chips.Toggle extends HTMLButtonElement

    Chips.Removable

    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>
    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). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    Chips.Removable extends HTMLButtonElement

    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-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

    Relaterte komponenter

    • Radio thumbnail
      Radio
    • Select thumbnail
      Select
    • Tag thumbnail
      Tag

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack