Accordion

Das Accordion blendet Content-Bereiche ein und aus und spart so Platz.

import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion>
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Best Practices

Verberge keine essenziellen Inhalte im Accordion. Eingeklappte Inhalte werden standardmäßig nicht direkt wahrgenommen.
Formuliere die Titel klar und prägnant.
Stelle die relevantesten Informationen in das zuerst geöffnete Element.

Outline Variant

Verwende die outline-Variante, wenn das Accordion klar vom umgebenden Inhalt abgehoben oder inhaltlich stärker strukturiert werden soll.

import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion variant="outline">
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Default Expanded

Über defaultExpanded werden ein oder mehrere Accordion-Elemente beim Laden der Seite standardmäßig geöffnet dargestellt.

Inhalt des Accordions

import {
  Accordion,
  Content,
  Heading,
} from "@mittwald/flow-react-components";

<Accordion defaultExpanded>
  <Heading>Accordion Titel</Heading>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Mit Label

Statt einer Heading‍ kann auch ein Label‍ verwendet werden. Ein Label eignet sich, wenn der Inhalt ergänzend oder sekundär ist und nicht im Fokus der Seite steht – zum Beispiel bei Filtern, Formularfeldern oder optionalen Einstellungen.

import {
  Accordion,
  Content,
  Label,
} from "@mittwald/flow-react-components";

<Accordion>
  <Label>Accordion Titel</Label>
  <Content>Inhalt des Accordions</Content>
</Accordion>

Properties

Property	Type	Default	Description
`defaultExpanded`	`boolean`	-	Whether the accordion should be initially expanded.
`variant`	`"default" \| "outline"`	"default"	The visual variant of the accordion.

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components

Integrations