Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • ConfirmationPanel
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • LinkPanelAvviklet
      • PanelAvviklet

Chips

Oppdatert 9. mai 2025Stabil
GithubYarn FigmaEndringslogg

Innhold på siden

  • Intro
  • Eksempler
  • Retningslinjer
    • Antall valg
    • Filtrere innhold
    • Chips-grupper
  • Tilgjengelighet
  • Se også
  • Props
    • Chips
    • Chips.Toggle
    • Chips.Removable
  • Tokens

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

Hvis du slår av checkmark må det være minst 3 chips, slik at det er mulig å se hvilken som er valgt.

Removable chips viser valgte verdier som brukeren kan fjerne, for eksempel valgte filter eller verdier som brukeren har skrevet i tekstfelt.

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å

LenkerRelaterte komponenter

  • Tag
  • Radio
  • Checkbox

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:

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

  • Checkbox thumbnail
    Checkbox
  • Radio thumbnail
    Radio
  • Tag thumbnail
    Tag

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