TextArea

Playground

Verwende <TextArea />, um eine TextArea darzustellen. Platziere innerhalb davon ein <Label />, um die Eingabeanforderung kurz in einem Label zu beschreiben. Zusätzliche Hinweise, etwa zur Formatierung, können über die <FieldDescription /> ergänzt werden.

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

<TextArea>
  <Label>Public Key</Label>
  <FieldDescription>Beginnt mit ssh-rsa</FieldDescription>
</TextArea>

Disabled

Ist die TextArea disabled, ist keine Interaktion möglich. Sobald die Ursache behoben ist, kann sie wieder wie gewohnt verwendet werden.

Validierung

Um die TextArea zu validieren, stehen folgende Properties zur Verfügung:

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

Bei ungültiger Eingabe wird die TextArea invalidiert. Über <FieldError /> kann eine entsprechende Fehlermeldung ausgegeben werden.

Required

Invalid

Character Count

Mit der Property showCharacterCount wird automatisch eine <FieldDescription /> ergänzt, die die aktuelle Zeichenanzahl und – sofern angegeben – die maximale Zeichenanzahl anzeigt.

Resize

Automatisch

Mit der Property autoResizeMaxRows lässt sich eine maximale Höhe definieren, bis zu der sich die TextArea automatisch an den Inhalt anpasst.

Manuell

Über die Properties allowResize, allowVerticalResize oder allowHorizontalResize kann die Größe der TextArea manuell verändert werden.

Kombiniert

Beide Resize-Varianten lassen sich auch miteinander kombinieren. In diesem Fall passt sich die TextArea zunächst automatisch an, bis die Größe einmal manuell geändert wird. Danach bleibt er in der eingestellten Größe bestehen.

Kombiniere mit ...

Align

Benutze die Align-Component, um andere Components, wie einen Button, neben der TextArea auszurichten.

ContextualHelp

Verwende ContextualHelp, um zusätzliche Informationen bereitzustellen, die über den Umfang der FieldDescription hinausgehen.

React Hook Form