# TextArea

Die TextArea ermöglicht es dem User, längere Texte über mehrere Zeilen hinweg einzugeben.

## Overview

# Playground

Verwende `<TextArea />`, um eine TextArea darzustellen. Platziere innerhalb
davon ein `<Label />`, um die Eingabeanforderung kurz in einem
[Label](/04-components/content/label/overview) zu beschreiben. Zusätzliche
Hinweise, etwa zur Formatierung, können über die `<FieldDescription />` ergänzt
werden.

```tsx
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.

```tsx
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

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

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

## Invalid

```tsx
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.

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

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

---

# 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.

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

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

## Manuell

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

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

<TextArea allowResize>
  <Label>Nachricht</Label>
</TextArea>
```

## 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.

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

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

---

# Kombiniere mit ...

## Align

Benutze die [Align](/04-components/structure/align/overview)-Component, um
andere Components, wie einen [Button](/04-components/actions/button/overview),
neben der TextArea auszurichten.

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

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

## ContextualHelp

Verwende [ContextualHelp](/04-components/overlays/contextual-help/overview), um
zusätzliche Informationen bereitzustellen, die über den Umfang der
FieldDescription hinausgehen.

```tsx
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

```tsx
import {
  Label,
  Section,
  TextArea,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-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>
        <SubmitButton>Senden</SubmitButton>
      </Form>
    </Section>
  );
}
```