# Select
Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen.
## Overview
# Playground
Verwendung mit dynamisch erstellten Options
Wenn die `Select`-Komponente ohne ein `key` Prop und mit dynamisch
erstellten `Options` betrieben wird, kann dies dazu führen, dass die
Komponente einfriert oder nicht mehr reagiert. Verwende ein `key` Prop auf
der `Select`-Komponente, welches sich mit den dynamischen `Options` ändert.
Verwende ``, um einen Select darzustellen. Ein zugehöriges ``
sowie die gewünschte Anzahl an ``-Elementen werden innerhalb der
Component eingefügt.
```tsx
import {
Label,
Option,
Select,
} from "@mittwald/flow-react-components";
```
---
# Default-Wert
Mit `defaultSelectedKey` kann eine Default-Option angegeben werden, die dem User
standardmäßig zuerst angezeigt wird.
```tsx
import {
Label,
Option,
Select,
} from "@mittwald/flow-react-components";
```
---
# Kombiniere mit ...
## FieldDescription
Um wichtige Hinweise zu den Auswahloptionen des Select bereitzustellen, kann
unterhalb eine `` eingebaut werden.
```tsx
import {
FieldDescription,
Label,
Option,
Select,
} from "@mittwald/flow-react-components";
```
## Align
Benutze die [Align](/04-components/structure/align/overview) Component, um
beispielsweise einen Button neben dem Select zu platzieren.
```tsx
import {
Align,
Button,
Select,
Label,
Option,
} from "@mittwald/flow-react-components";
```
## ContextualHelp
Benutze das [ContextualHelp](/04-components/overlays/contextual-help/overview),
um weitere Informationen bereitstellen zu können.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Label,
Option,
Select,
Text,
} from "@mittwald/flow-react-components";
```
## React Hook Form
```tsx
import {
Label,
Option,
Section,
Select,
} 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<{ app: string }>();
const Field = typedField(form);
return (
);
}
```