# Tabs
Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.
## Overview
# Playground
Verwende ``, um Tabs darzustellen. Jeder einzelne Tab wird mit ``
definiert und erhält seine Bezeichnung über ``.
```tsx
import {
Header,
Heading,
Label,
LabeledValue,
LayoutCard,
Section,
Switch,
Tab,
Tabs,
TabTitle,
Text,
TextField,
} from "@mittwald/flow-react-components";
AllgemeinAllgemeinSpeicherplatzSpeicherplatz2.4 GBSpamschutzSpamschutzSpamfilter
Der Spamfilter schützt dich vor ungewollten
E-Mails. Niemand will Müll in seinem Postfach,
daher empfehlen wir den Spamschutz immer aktiviert
zu lassen.
```
---
# Kollabierte Ansicht
Wenn die verfügbare Breite nicht ausreicht, wechseln die Tabs automatisch in
eine kollabierte Ansicht.
```tsx
import {
LayoutCard,
Tab,
Tabs,
TabTitle,
} from "@mittwald/flow-react-components";
Allgemein
Allgemeiner Inhalt
Speicherplatz
Speicherplatz Inhalt
Spamschutz
Spamschutz Inhalt
```
---
# Mit Status-Icon
Wenn der Inhalt eines Tabs eine wichtige Information oder Warnung enthält (z. B.
in Form eines [Alerts](/04-components/status/alert/overview)), muss der
entsprechende Tab ein Status-Icon erhalten.
```tsx
import {
Alert,
AlertIcon,
Heading,
LayoutCard,
Tab,
Tabs,
TabTitle,
} from "@mittwald/flow-react-components";
Allgemein
Allgemeiner Inhalt
Speicherplatz
Dein Speicherplatz ist vollSpamschutz
Spamschutz Inhalt
```
---
# Mit vorausgewähltem Tab
Standardmäßig sollte der erste Tab vorausgewählt sein. Falls ein anderer Tab
initial aktiv sein soll, kann dies über `defaultSelectedKey` festgelegt werden.
```tsx
import {
LayoutCard,
Tab,
Tabs,
TabTitle,
} from "@mittwald/flow-react-components";
Allgemein
Allgemeiner Inhalt
Speicherplatz
Speicherplatz Inhalt
Spamschutz
Spamschutz Inhalt
```
## Develop
# Reihenfolge der Tabs
Es kann vorkommen, dass sich durch Rerendering die Reihenfolge der Tabs ändert,
wenn innerhalb des Tabs Inhalte nachgeladen werden. Um das zu verhindern, sollte
der Tab-Inhalt in eine eigene Komponente ausgelagert werden und um diese ein
Suspense gelegt werden.
```
Tab 1Tab 2
```
---
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `tabNotFoundView` | `ReactNode` | - | - |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-Tabs'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `