mittwald Flow Logo

Components

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.GitHub

Playground

Verwende <ComboBox />, um eine ComboBox darzustellen. Nutze ein <Label />, um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen erleichtern.

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>

Mit FieldDescription

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

Weitere Informationen
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, um einem Button neben deiner ComboBox zu platzieren.

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, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

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) zu finden.

import {
  Button,
  ComboBox,
  Label,
  Option,
  Section,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-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>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

CountryOptions

Verwende die CountryOptions um eine Länderauswahl anzubieten.

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

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

Overview