# Accordion

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

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

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

```tsx
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](https://flow.mittwald.de/04-components/content/heading) kann auch ein
[Label](https://flow.mittwald.de/04-components/content/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.

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