mittwald Flow Logo

Components

ComboBox

Die ComboBox Komponente verbindet ein Textfield mit einer Auswahl an Optionen, die durch Eingabe in das Textfield gefiltert wird.GitHub

Playground

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

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 die Align Komponente, 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

Benutze die ContextualHelp Komponente, 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

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>
  );
}
Feedback geben