# Select
Ein Select ermöglicht es Usern, eine einzelne Option aus einer vordefinierten Liste auszuwählen.
Verwendung mit dynamisch erstellten Options
Wenn die `Select`-Component ohne ein `key` Prop und mit dynamisch erstellten
`Options` betrieben wird, kann dies dazu führen, dass die Component
einfriert oder nicht mehr reagiert. Verwende ein `key` Prop auf der
`Select`-Component, welches sich mit den dynamischen `Options` ändert.
```tsx
import {
Label,
Option,
Select,
} from "@mittwald/flow-react-components";
```
---
# Best Practices
- Formuliere das [Label](/04-components/content/label) kurz und deutlich.
- Nutze einen Placeholder mit klarer Handlungsaufforderung, wenn kein sinnvoller
Default existiert. Ein Beispiel ist „Sprache wählen".
- Benenne die Optionen verständlich und konsistent.
- Halte die Zahl der Optionen überschaubar. Bei sehr vielen Einträgen eignet
sich eher eine [ComboBox](/04-components/form-controls/combo-box).
- Ordne die Optionen nachvollziehbar. Möglich sind alphabetische, thematische
oder Relevanz-Sortierung.
---
# 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";
```
---
# Multiple
Über `selectionMode` kann zwischen den Modi `single` und `multiple` gewechselt
werden.
```tsx
import {
Label,
Option,
Select,
} from "@mittwald/flow-react-components";
```
---
# 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";
```
---
# Kombiniere mit ...
## Combine
Benutze die [Combine](/04-components/structure/combine) Component, um
beispielsweise einen Button neben dem Select zu platzieren.
```tsx
import {
Combine,
Button,
Select,
Label,
Option,
} from "@mittwald/flow-react-components";
```
## ContextualHelp
Benutze das [ContextualHelp](/04-components/overlays/contextual-help), um
weitere Informationen bereitstellen zu können.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Label,
Option,
Select,
Text,
} from "@mittwald/flow-react-components";
```
## React Hook Form
Weitere Details zur Formularlogik und -validierung findest du in der Component
[Form (React Hook Form)](/04-components/react-hook-form/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 (
);
}
```
---
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `isReadOnly` | `boolean` | - | Whether the component is read only. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `isOpen` | `boolean` | - | Sets the open state of the menu. |
| `defaultOpen` | `boolean` | - | Sets the default open state of the menu. |
| `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 `