Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

Accordion

Accordion lar brukeren vise og skjule innhold i seksjoner ved å klikke på overskriftene.

StabilOppdatert 1. juli 2025
Github FigmaEndringslogg

Egnet til:

  • Samling av innhold som gir mer informasjon om et emne.
  • En liste med ofte stilte spørsmål.

Uegnet til:

  • Innhold som er så viktig at det ikke bør skjules.
  • Forklaring av spørsmål i skjema.
  • Tilfeller med bare ett element.

Eksempler

Retningslinjer

Relatert innhold

Innholdet i Accordion burde høre sammen. Tenk på det som en liste. Hvis du bruker Accordion for å gruppere mye urelatert innhold blir det vanskeligere for brukeren å finne informasjonen de leter etter.

Antall Items

Gjør
Accordion med flere punkter
En Accordion brukes som en liste med relatert innhold.
Unngå
Accordion med ett Accordion.Item
Accordion egnes ikke for kun ett Item.
Gjør
To punkter i en accordion
Bruk minst to Items i en Accordion.
Unngå
To ulike Accordions med ett Item hver
Ikke lag to ulike Accordions med ett Item hver.

Unngå viktig innhold

Du må regne med at innholdet du putter i en Accordion blir oversett. Derfor burde innholdet ikke være avgjørende for at en bruker skjønner helheten i informasjonen du vil formidle.

Innholdsmengde

Hold innholdet kort for å sikre at det lett kan relateres til overskriften. Bryt innholdet opp i flere AccordionItems istedenfor å bruke flere overskrifter i én AccordionItem. Ved mye innhold kan du vurdere å lage en egen side i stedet. Dette gjør det dessuten enklere å finne tilbake til innholdet senere.

Gjør
Innhold som ikke går over flere skjermbilder
Innholdet i et Item skal være kort og konsist.
Pass på
Innhold som går over flere skjermbilder
Innhold som går over flere skjermbilder fjerner kontekst.

Innhold i Accordion.Header

Subkomponenten er kodet med <button /> og vil ikke være et heading-nivå som h2, h3 eller lignende. På grunn av dette må man være forsiktig med å bruke rikt innhold da skjermleser vil ignorere semantikken. Les mer om phrasing content på MDN.

Unngå
Accordion med lenker i headeren
Ikke legg inn rikt innhold i headeren.

Props

Accordion

headingSize?

  • Type:
    "large" | "medium" | "small" | "xsmall"
  • Default:
    ""small""

size?

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

indent?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Whether to indent content or not.

children

  • Type:
    ReactNode
  • Description:

    Instances of Accordion.Item.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

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

variant?

  • Deprecated:
    "default" will be the only variant.
  • Type:
    "default" | "neutral"
  • Default:
    "default"

Accordion.Item

children

  • Type:
    ReactNode
  • Description:

    Content in Accordion.Item Should include one Accordion.Header and one Accordion.Content

open?

  • Type:
    boolean
  • Description:

    Controlled open-state Using this removes automatic control of open-state

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Defaults the accordion to open if not controlled

onOpenChange?

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

    Callback for current open-state

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

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

Accordion.Header

children

  • Type:
    ReactNode
  • Description:

    Text inside Accordion.Header

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

Accordion.Content

children

  • Type:
    ReactNode
  • Description:

    Content inside Accordion.Content

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

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

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-accordion-header-bg--a-surface-transparent
--ac-accordion-header-bg-hover--a-surface-hover
--ac-accordion-header-text-hoverinherit
--ac-accordion-header-border--a-border-divider
--ac-accordion-item-bg-open--a-surface-action-subtle
--ac-accordion-neutral-item-bg-open--a-surface-neutral-subtle
--ac-accordion-header-icon-bg-hover--a-surface-neutral-subtle-hover