# TextField
Ein TextField ermöglicht es dem Nutzer, Text über die Tastatur in ein User Interface einzugeben. Ein Label und eine optionale FieldDescription unterstützen dabei, die Anforderungen an die Eingabe klar zu kommunizieren.
## Overview
# Playground
Verwende ``, um ein TextField anzuzeigen. Nutze ein ``, um
Informationen zu vermitteln, die das Verständnis der Eingabeanforderungen
erleichtern. Weiterführende Informationen (z. B. Formatierungshinweise) können
über die `` ergänzt werden.
```tsx
import {
FieldDescription,
Label,
TextField,
} from "@mittwald/flow-react-components";
Beginnt mit https://
```
---
# 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.
```tsx
import {
Label,
TextField,
} from "@mittwald/flow-react-components";
```
---
# 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 `` kann eine Fehlermeldung angezeigt werden.
```tsx
import {
FieldError,
Label,
TextField,
} from "@mittwald/flow-react-components";
Das ist keine URL
```
---
# 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.
```tsx
import {
Label,
TextField,
} from "@mittwald/flow-react-components";
```
---
# Input Properties
Das TextField unterstützt die Standard-Properties eines HTML `` Feldes.
(s. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input))
```tsx
import {
Label,
TextField,
} from "@mittwald/flow-react-components";
```
---
# Character Count
Über das `showCharacterCount` Property wird eine FieldDescription hinzugefügt,
die aktuelle Anzahl der Zeichen und, falls angegeben, die maximale Zeichenanzahl
anzeigt.
```tsx
import {
Label,
TextField,
} from "@mittwald/flow-react-components";
```
---
# Passwort
TextFields mit `type="password"` erhalten automatisch einen Button zum ein- und
ausblenden des Passworts.
```tsx
import {
Label,
TextField,
} from "@mittwald/flow-react-components";
```
---
# Kombiniere mit ...
## Align
Benutze die [Align](/04-components/structure/align/overview) Komponente, um
einem Button neben deinem TextField zu platzieren.
```tsx
import {
Align,
Button,
Label,
TextField,
} from "@mittwald/flow-react-components";
```
## ContextualHelp
Benutze die [ContextualHelp](/04-components/overlays/contextual-help/overview)
Komponente, wenn du weitere Informationen bereitstellen möchtest, und diese zu
lang für die FieldDescription sind.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Label,
Text,
TextField,
} from "@mittwald/flow-react-components";
```
## React Hook Form
```tsx
import {
Label,
Section,
TextField,
} 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<{ url: string }>();
const Field = typedField(form);
return (
);
}
```
## Button
Du kannst einen Button zum TextField hinzufügen, um benutzerdefinierte Aktionen
auszuführen.
```tsx
import {
Label,
TextField,
Button,
IconStar,
} from "@mittwald/flow-react-components";
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `showCharacterCount` | `boolean` | - | Whether a character count should be displayed inside the field description. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'react-aria-TextField'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `