mittwald Flow Logo

Components

TextArea

Die TextArea ermöglicht es dem User, längere Texte über mehrere Zeilen hinweg einzugeben.GitHub
Beginnt mit ssh-rsa

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.

Beginnt mit ssh-rsa
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.

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

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

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

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

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

Invalid

Ungültiger Key
import {
  FieldError,
  Label,
  TextArea,
} from "@mittwald/flow-react-components";

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

Character Count

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

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

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

Resizeable

Verwende die Property autoResizeMaxRows, um eine maximale Höhe festzulegen, bis zu der sich die TextArea automatisch an ihren Inhalt anpasst.

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

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

Kombiniere mit ...

Align

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

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

<Align>
  <TextArea>
    <Label>Nachricht</Label>
  </TextArea>
  <Button>Senden</Button>
</Align>

ContextualHelp

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

import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Label,
  TextArea,
  Text,
} from "@mittwald/flow-react-components";

<TextArea>
  <Label>
    Public Key
    <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>
</TextArea>

React Hook Form

import {
  Button,
  Label,
  Section,
  TextArea,
} 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<{ message: string }>();
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="message"
          rules={{
            required: "Bitte gib eine Nachricht ein",
          }}
        >
          <TextArea>
            <Label>Nachricht</Label>
          </TextArea>
        </Field>
        <Button type="submit">Senden</Button>
      </Form>
    </Section>
  );
}

Overview