# Accordion

Das Accordion dient dazu Content-Bereiche ein- und auszublenden und so Informationen strukturiert und platzsparend darzustellen.

## Overview

# Playground

Verwende `<Accordion />`, um ein Accordion darzustellen. Nutze als Titel
entweder eine `<Heading />` oder ein `<Label />`.

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

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

---

# DefaultExpanded

`defaultExpanded` wird verwendet, um ein oder mehrere Accordion-Elemente beim
Laden der Seite standardmäßig geöffnet darzustellen.

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

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

---

# Outline Variant

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

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

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

---

# Mit Label

Statt einer [Heading](/04-components/content/heading/overview) kann auch ein
[Label](/04-components/content/label/overview) 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.

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

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