# ComboBox
Die ComboBox kombiniert ein Texteingabefeld mit einem Auswahlmenü. Bei der Eingabe wird eine vordefinierte Liste dynamisch gefiltert, aus der eine Auswahl getroffen werden kann.
## Overview
# Playground
Verwende ``, um eine ComboBox darzustellen. Nutze ein ``,
um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen
erleichtern.
```tsx
import {
ComboBox,
Label,
Option,
} from "@mittwald/flow-react-components";
```
---
# Custom Value
Standardmäßig setzt eine ComboBox beim Verlassen des Inputfelds den Eingabewert
entweder auf den Wert der ausgewählten Option zurück oder leert das Feld, wenn
noch keine Option ausgewählt wurde. Mit dem Property `allowsCustomValue` kann
dieses Verhalten überschrieben werden, um auch freie Eingaben zu erlauben.
```tsx
import {
ComboBox,
Label,
Option,
} from "@mittwald/flow-react-components";
```
---
# Mit FieldDescription
Um wichtige Hinweise zur ComboBox bereitzustellen, kann unterhalb eine
`` eingebaut werden.
```tsx
import {
ComboBox,
FieldDescription,
Label,
Option,
} from "@mittwald/flow-react-components";
Weitere Informationen
```
---
# Kombiniere mit ...
## Align
Benutze [Align](/04-components/structure/align/overview), um einem
[Button](/04-components/actions/button/overview) neben deiner ComboBox zu
platzieren.
```tsx
import {
Align,
Button,
ComboBox,
Label,
Option,
} from "@mittwald/flow-react-components";
```
## ContextualHelp
Verwende ein [ContextualHelp](/04-components/overlays/contextual-help/overview),
wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die
FieldDescription sind.
```tsx
import {
Button,
ComboBox,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Label,
Option,
Text,
} from "@mittwald/flow-react-components";
```
## React Hook Form
Weitere Details zur Formularlogik und -validierung sind in der Component
[Form (React Hook Form)](/04-components/react-hook-form/form/overview) zu
finden.
```tsx
import {
ComboBox,
Label,
Option,
Section,
} 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<{ domain: string }>();
const Field = typedField(form);
return (
);
}
```
## CountryOptions
Verwende die `CountryOptions` um eine Länderauswahl anzubieten.
```tsx
import {
ComboBox,
CountryOptions,
Label,
} from "@mittwald/flow-react-components";
```
## 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-ComboBox'` | 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 `