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>

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.

Mit FieldDescription

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

Weitere Informationen

Kombiniere mit ...

Align

Benutze Align, um einem Button neben deiner ComboBox zu platzieren.

ContextualHelp

Verwende ein ContextualHelp, wenn du weitere Informationen bereitstellen möchtest, und diese zu lang für die FieldDescription sind.

React Hook Form

Weitere Details zur Formularlogik und -validierung sind in der Component Form (React Hook Form) zu finden.

CountryOptions

Verwende die CountryOptions um eine Länderauswahl anzubieten.

Overview