Hopp til innhold
Aksel

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

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.

data-color?

  • Type:
    AkselMainColorRole | AkselBrandColorRole | AkselMetaColorRole
  • Description:

    Overrides inherited color.

    We recommend only using accent and neutral. We have disallowed status-colors. @see 🏷️ {@link AkselColor } @see 📝 Documentation

className?

  • Type:
    string

ref?

  • Type:
    Ref<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:
    Will be removed in a future major version. Use `data-color` instead.
  • Type:
    "default" | "neutral"

headingSize?

  • Deprecated:
    No longer has any effect.
  • Type:
    "large" | "medium" | "small" | "xsmall"

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:

    The open state when initially rendered. Use when you do not need to control the open state.

onOpenChange?

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

    Callback for current open-state.

className?

  • Type:
    string

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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

ref?

  • Type:
    Ref<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

Komponent-tokens er fjernet i versjon 8

Gammel dokumentasjon for disse finner du på JsDelivery