# 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](https://flow.mittwald.de/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](https://flow.mittwald.de/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](https://flow.mittwald.de/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](https://flow.mittwald.de/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)](https://flow.mittwald.de/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 |
| --- | --- | --- | --- |
| `allowsEmptyCollection` | `boolean` | - | Whether the select should be allowed to be open when the collection is empty. |
| `autoComplete` | `string` | - | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). |
| `autoFocus` | `boolean` | - | Whether the element should receive focus on render. |
| `children` | `ReactNode` | - | - |
| `className` | `string` | - | The elements class name. |
| `defaultOpen` | `boolean` | - | Sets the default open state of the menu. |
| `defaultSelectedKey` _(deprecated)_ | `Key` | - | The initial selected key in the collection (uncontrolled). @deprecated |
| `defaultValue` | `TimeValue` | - | The default value (uncontrolled). |
| `dir` | `string` | - | - |
| `disabledKeys` | `Iterable` | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `excludeFromTabOrder` | `boolean` | - | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| `form` | `string` | - | The `