Aksel

Meny

Accordion

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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

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.

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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ørAccordion 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ørTo 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ørInnhold 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:

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

variant?

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

Accordion.Item

children

  • Type:
    ReactNode
  • Description:

open?

  • Type:
    boolean
  • Description:

defaultOpen?

  • Type:
    boolean
  • Default:
    false
  • Description:

onOpenChange?

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

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Accordion.Header

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Accordion.Content

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

Tokens

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