# SegmentedControl
Ein SegmentedControl bietet dem User eine Einfachauswahl von 2 bis 5 kurzen Optionen. Je nach Einsatzzweck kann die Auswahl des Users den Inhalt unter dem Segmented Control verändern.
## Overview
# Playground
Verwende ``, um ein SegmentedControl anzuzeigen.
```tsx
import {
Label,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
SSH-KeyPasswort
```
---
# Mit Inhaltsänderung
Unterhalb des SegmentedControls kann sich der Inhalt je nach Bedarf ändern.
```tsx
import {
ColumnLayout,
FieldDescription,
Label,
Section,
Segment,
SegmentedControl,
TextField,
} from "@mittwald/flow-react-components";
import { useState } from "react";
export default () => {
const [showContent, setShowContent] =
useState(false);
return (
setShowContent(!showContent)}
>
LastschriftRechnung
{showContent && (
Wähle bitte eine Bankverbindung für die
Bezahlung mit SEPA-Lastschrift aus.
)}
{showContent && (
)}
);
}
```
---
# Mit FieldDescription
Innerhalb der `` kann eine hilfreiche ``
eingebaut werden.
```tsx
import {
FieldDescription,
Label,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
CloudLokal
Speicherplatz kann jederzeit geändert werden
```
---
# Disbaled
Einzelne Optionen oder die gesamte SegmentedControl können über `isDisabled`
disabled werden.
```tsx
import {
Label,
Section,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
Entwickler
Designer
Geschäftsführer
AndereEntwicklerDesigner
Geschäftsführer
Andere
```
---
# Container Breakpoint Size
Das SegmentedControl springt in eine kompakte Variante um, sobald der Container
kleiner als der gesetzte Breakpoint ist. Im Default passiert das bei 550px, was
der `containerBreakpointSize="m"` entspricht. Über diese Property kann die Größe
mit Werten zwischen `xs` und `xl` überschrieben werden.
```tsx
import {
ColumnLayout,
Label,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
Entwickler
Geschäftsführer
AndereEntwickler
Geschäftsführer
Andere
```
---
# Kombiniere mit ...
## ContextualHelp
Benutze die [ContextualHelp](/04-components/overlays/contextual-help/overview)
Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu
lang für die FieldDescription sind.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Label,
Segment,
SegmentedControl,
Text,
} from "@mittwald/flow-react-components";
LastschriftRechnung
```
## React Hook Form
```tsx
import {
Label,
Section,
Segment,
SegmentedControl,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
Form,
SubmitButton,
typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";
export default () => {
const form = useForm<{ payment: "debit" | "invoice" }>({
defaultValues: { payment: "debit" },
});
const Field = typedField(form);
return (
);
}
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `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-RadioGroup'` | 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 `