Komponenter

Accordion

Accordion er en liste der du kan vise og skjule innhold.

StabilOppdatert 27. februar 2026

Github Figma Endringslogg

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 (bruk ReadMore).
Tilfeller med bare ett element (bruk f.eks. ReadMore eller ExpansionCard).

Eksempler

TSX
<Accordion>
  <Accordion.Item>
    <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
    <Accordion.Content>
      Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha hatt
      en pensjonsgivende inntekt som tilsvarer x G, året før du fikk nedsatt
      arbeidsevnen. Nav kan gjøre <Link href="#">unntak</Link>.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>
      Til deg som har yrkesskade eller yrkessykdom
    </Accordion.Header>
    <Accordion.Content>
      Med yrkesskade mener vi at du har fått en skade som følge av en
      arbeidsulykke. Vi kan godkjenne en sykdom som yrkessykdom hvis den kommer
      av skadelig påvirkning fra arbeidsmiljøet.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item>
    <Accordion.Header>Til deg som er helt frisk</Accordion.Header>
    <Accordion.Content>Da er det lite som trengs å gjøres.</Accordion.Content>
  </Accordion.Item>
</Accordion>

Retningslinjer

Relatert innhold

Innholdet i Accordion bør 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

Accordion med flere punkter — En Accordion brukes som en liste med relatert innhold.

Accordion med ett Accordion.Item — Ikke bruk Accordion med bare ett Item.

Unngå viktig innhold

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

Innhold i Accordion.Header

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

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
as?: Type:
"div" | "section"
Default:
"div"
Description:
Changes the HTML element used for the root element.

When using section, provide either aria-label or aria-labelledby for better accessibility. axe-core might warn about unique landmarks if you have multiple Accordions on page with the same label. In those cases consider updating to unique aria-label or aria-labelledby props. @see 📝 Landmarks unique
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

Gammel dokumentasjon for disse finner du på JsDelivery

Accordion

Egnet til:

Uegnet til:

Eksempler

Retningslinjer

Relatert innhold

Antall Items

Unngå viktig innhold

Innhold i Accordion.Header

Props

Accordion

size?

indent?

children

data-color?

as?

className?

ref?

variant?

headingSize?

Accordion.Item

children

open?

defaultOpen?

onOpenChange?

className?

ref?

Accordion.Header

children

className?

ref?

Accordion.Content

children

className?

ref?

Tokens

Komponent-tokens er fjernet i versjon 8