TextArea

Die Textarea dient zur Eingabe längerer Texte und stellt diese mehrzeilig dar.GitHub

Public Key (optional)Beginnt mit ssh-rsa

Beispiel

Public Key (optional)Beginnt mit ssh-rsa

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

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

Disabled

Public Key (optional)

import Label from "@mittwald/flow-react-components/Label";
import TextArea from "@mittwald/flow-react-components/TextArea";

<TextArea isDisabled>
  <Label>Public Key</Label>
</TextArea>

Required

Public Key

import Label from "@mittwald/flow-react-components/Label";
import TextArea from "@mittwald/flow-react-components/TextArea";

<TextArea isRequired>
  <Label>Public Key</Label>
</TextArea>

Invalid

Public Key (optional)Ungültiger Key

import Label from "@mittwald/flow-react-components/Label";
import TextArea from "@mittwald/flow-react-components/TextArea";
import FieldError from "@mittwald/flow-react-components/FieldError";

<TextArea isInvalid defaultValue="hello">
  <Label>Public Key</Label>
  <FieldError>Ungültiger Key</FieldError>
</TextArea>

Character Count

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

Nachricht (optional)0/100 characters

import Label from "@mittwald/flow-react-components/Label";
import TextArea from "@mittwald/flow-react-components/TextArea";

<TextArea showCharacterCount maxLength={100}>
  <Label>Nachricht</Label>
</TextArea>

Resizeable

Gib der TextArea das property autoResizeMaxRows mit, um eine maximale Größe festzulegen, bis zu der die TextArea mit ihrem Content mitwächst.

Nachricht (optional)

import Label from "@mittwald/flow-react-components/Label";
import TextArea from "@mittwald/flow-react-components/TextArea";

<TextArea rows={1} autoResizeMaxRows={5}>
  <Label>Nachricht</Label>
</TextArea>

Feedback geben

Flow