TextField

Playground

Verwende <TextField />, um ein TextField anzuzeigen. Nutze ein <Label />, um Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen erleichtern. Weiterführende Informationen (z. B. Formatierungshinweise) können über die <FieldDescription /> ergänzt werden.

import {
  FieldDescription,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<TextField>
  <Label>URL</Label>
  <FieldDescription>Beginnt mit https://</FieldDescription>
</TextField>

Disabled

Wenn das TextField disabled ist, kann nicht mit ihm interagiert werden. Sobald die Ursache für die Deaktivierung behoben ist, kann das TextField wieder normal verwendet werden.

Validierung

Um das textField zu validieren, stehen folgende Properties zur Verfügung:

• isRequired für Pflichtfelder.
• validate für eigene Validierungen.
• HTML Input Properties wie type="email", minLength.

Wenn die Benutzereingabe nicht den Anforderungen entspricht, wird das TextField invalidiert. Mittels <FieldError /> kann eine Fehlermeldung angezeigt werden.

Value

Standardmäßig ist der Value eines TextFields leer. Es ist möglich dem TextField eine uncontrolled defaultValue mitzugeben. Es kann auch ein controlled value für das TextField gesetzt werden, um dieses über onChange zu updaten.

Input Properties

Das TextField unterstützt die Standard-Properties eines HTML <input /> Feldes. (s. MDN)

Character Count

Über das showCharacterCount Property wird eine FieldDescription hinzugefügt, die aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl anzeigt.

Kombiniere mit ...

Align

Benutze die Align Komponente, um einem Button neben deinem TextField zu platzieren.

ContextualHelp

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

React Hook Form