# 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 `<ComboBox />`, um eine ComboBox darzustellen. Nutze ein `<Label />`,
um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen
erleichtern.

```tsx
import {
  ComboBox,
  Label,
  Option,
} from "@mittwald/flow-react-components";

<ComboBox>
  <Label>Domain</Label>
  <Option>mydomain.de</Option>
  <Option>shop.mydomain.de</Option>
  <Option>anotherdomain.com</Option>
  <Option>www.anotherdomain.com</Option>
  <Option>anotherdomain.com/shop</Option>
  <Option>anotherdomain.com/blog</Option>
  <Option>onemoredomain.de</Option>
  <Option>www.onemoredomain.de</Option>
</ComboBox>
```

---

# 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";

<ComboBox allowsCustomValue>
  <Label>Domain</Label>
  <Option>mydomain.de</Option>
  <Option>shop.mydomain.de</Option>
  <Option>anotherdomain.com</Option>
  <Option>www.anotherdomain.com</Option>
  <Option>anotherdomain.com/shop</Option>
  <Option>anotherdomain.com/blog</Option>
  <Option>onemoredomain.de</Option>
  <Option>www.onemoredomain.de</Option>
</ComboBox>
```

---

# Mit FieldDescription

Um wichtige Hinweise zur ComboBox bereitzustellen, kann unterhalb eine
`<FieldDescription />` eingebaut werden.

```tsx
import {
  ComboBox,
  FieldDescription,
  Label,
  Option,
} from "@mittwald/flow-react-components";

<ComboBox>
  <Label>Domain</Label>
  <Option>mydomain.de</Option>
  <Option>shop.mydomain.de</Option>
  <Option>anotherdomain.com</Option>
  <Option>www.anotherdomain.com</Option>
  <Option>anotherdomain.com/shop</Option>
  <Option>anotherdomain.com/blog</Option>
  <Option>onemoredomain.de</Option>
  <Option>www.onemoredomain.de</Option>
  <FieldDescription>Weitere Informationen</FieldDescription>
</ComboBox>
```

---

# 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";

<Align>
  <ComboBox>
    <Label>Domain</Label>
    <Option>mydomain.de</Option>
    <Option>shop.mydomain.de</Option>
    <Option>anotherdomain.com</Option>
    <Option>www.anotherdomain.com</Option>
    <Option>anotherdomain.com/shop</Option>
    <Option>anotherdomain.com/blog</Option>
    <Option>onemoredomain.de</Option>
    <Option>www.onemoredomain.de</Option>
  </ComboBox>
  <Button>Hinzufügen</Button>
</Align>
```

## 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";

<ComboBox>
  <Label>
    Domain
    <ContextualHelpTrigger>
      <Button />
      <ContextualHelp>
        <Heading>Weitere Informationen</Heading>
        <Text>
          Hier gibt es weitere Informationen, die zu lang
          für die FieldDescription sind.
        </Text>
      </ContextualHelp>
    </ContextualHelpTrigger>
  </Label>
  <Option>mydomain.de</Option>
  <Option>shop.mydomain.de</Option>
  <Option>anotherdomain.com</Option>
  <Option>www.anotherdomain.com</Option>
  <Option>anotherdomain.com/shop</Option>
  <Option>anotherdomain.com/blog</Option>
  <Option>onemoredomain.de</Option>
  <Option>www.onemoredomain.de</Option>
</ComboBox>
```

## 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 (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="domain"
          rules={{
            required: "Bitte wähle eine Domain aus",
          }}
        >
          <ComboBox>
            <Label>Domain</Label>
            <Option>mydomain.de</Option>
            <Option>anotherdomain.com</Option>
          </ComboBox>
        </Field>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```

## CountryOptions

Verwende die `CountryOptions` um eine Länderauswahl anzubieten.

```tsx
import {
  ComboBox,
  CountryOptions,
  Label,
} from "@mittwald/flow-react-components";

<ComboBox>
  <Label>Land</Label>
  <CountryOptions />
</ComboBox>
```