# TextArea-Komponente für Stripe-Apps Verwenden Sie TextArea, um ein Eingabefeld für mehrere Textzeilen zu erstellen. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/textarea?app-sdk-version=8. So fügen Sie Ihrer App die `TextArea` Komponente hinzu: ```js import {TextArea} from '@stripe/ui-extension-sdk/ui'; ``` ### TextArea-Eigenschaften | Eigenschaft | Typ | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autoComplete` | (Optional) `string | undefined` Gibt eine der möglichen Verhaltensweisen für die automatische Vervollständigung an. | | `autoFocus` | (Optional) `boolean | undefined` Wenn `true`, fokussiert React das Element auf „verbinden“. | | `cols` | (Optional) `number | undefined` | | `css` | (Optional) `CSS | undefined` Verwandte Typen: [CSS](https://docs.stripe.com/stripe-apps/components/textarea.md#css). | | `defaultValue` | (Optional) `string | undefined` Gibt den Anfangswert an, den ein/e Nutzer/in ändern kann. | | `description` | (Optional) `string | undefined` Beschreibender Text, der neben dem Label des Steuerelements angezeigt wird. | | `disabled` | (Optional) `boolean | undefined` Legt fest, ob das Element deaktiviert werden soll. Verhindert die Auswahl. | | `error` | (Optional) `string | undefined` Fehlertext, der unter dem Steuerelement angezeigt wird. | | `form` | (Optional) `string | undefined` Gibt die `id` des `
` an, zu dem diese Eingabe gehört. Wenn es weggelassen wird, handelt es sich um das nächstliegende übergeordnete Formular. | | `hiddenElements` | (Optional) `("label" | "description" | "error")[] | undefined` Blendet die angegebenen Elemente visuell aus. Die ausgeblendeten Elemente sind weiterhin vorhanden und für Screenreader sichtbar. | | `invalid` | (Optional) `boolean | undefined` Legt fest, ob sich das Element in einem ungültigen Status befindet. Diese Eigenschaft kann nicht bearbeitet werden und verhindert die Übermittlung des Formulars nicht. | | `label` | (Optional) `React.ReactNode` Text, der das Steuerelement beschreibt. Wird sichtbar sein und kann angeklickt werden. | | `maxLength` | (Optional) `number | undefined` Gibt die maximale Länge des Texts an. | | `minLength` | (Optional) `number | undefined` Gibt die Mindestlänge des Texts an. | | `name` | (Optional) `string | undefined` Gibt den Namen für diese Eingabe an, die mit dem Formular übermittelt wird. | | `onChange` | (Optional) `((event: React.ChangeEvent) => void) | undefined` Erforderlich für kontrollierte Eingaben. Wird sofort ausgelöst, wenn der Wert der Eingabe vom Nutzer/von der Nutzerin geändert wird (z. B. bei jedem Tastenanschlag ausgelöst). Verhält sich wie das Eingabeereignis des Browsers. | | `onKeyDown` | (Optional) `((event: React.KeyboardEvent) => void) | undefined` Wird ausgelöst, wenn eine Taste gedrückt wird. | | `onKeyUp` | (Optional) `((event: React.KeyboardEvent) => void) | undefined` Wird ausgelöst, wenn ein Schlüssel freigegeben wird. | | `placeholder` | (Optional) `string | undefined` Wird in einer abgeblendeten Farbe angezeigt, wenn der Eingabewert leer ist. | | `readOnly` | (Optional) `boolean | undefined` Im Fall von `true` kann die Eingabe vom Nutzer/von der Nutzerin nicht bearbeitet werden. | | `required` | (Optional) `boolean | undefined` Im Fall von `true` muss der Wert angegeben werden, damit das Formular übermittelt werden kann. | | `resizeable` | (Optional) `boolean | undefined` | | `rows` | (Optional) `number | undefined` | | `size` | (Optional) `("small" | "medium" | "large") | undefined` Die Größe der Komponente. | | `spellCheck` | (Optional) `boolean | "true" | "false" | undefined` Wenn explizit auf `true` oder `false` festgelegt, wird die Rechtschreibprüfung aktiviert oder deaktiviert. | | `tabIndex` | (Optional) `number | undefined` Setzt das Standardverhalten der Tabulatortasten außer Kraft. Vermeiden Sie die Verwendung anderer Werte als `-1` und `0`. | | `value` | (Optional) `string | undefined` Steuert den Text der Eingabe. Wenn Sie diese Eigenschaft übergeben, müssen Sie auch einen `onChange`-Handler übergeben, der den übergebenen Wert aktualisiert. | | `wrap` | (Optional) `string | undefined` | | `onKeyPress` | (Optional)(Veraltet) `((event: React.KeyboardEvent) => void) | undefined` | ### CSS | Eigenschaft | Typ | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `width` | (Optional) `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined` Die Breite der Komponente. Siehe [Größenanpassung](https://docs.stripe.com/stripe-apps/style.md#sizing) für weitere Informationen. | ## Ungültig Sie können eine `TextArea` als ungültig markieren, indem die Eigenschaft `invalid` für das Element festgelegt wird. Es handelt sich um eine rein visuelle Eigenschaft. Standardmäßig wird `false` verwendet. ## Ändern der Größe möglich Standardmäßig lässt sich die Größe der `TextArea` vertikal ändern. In der Regel wird diese Einstellung für Nutzer/innen verwendet, die mehr Raum benötigen. Wenn die Größe des Elements nicht geändert werden soll, muss `resizeable` auf `false` festgelegt werden. ## Größe Durch Ändern des Parameters `size` können Sie Varianten mit etwas mehr oder etwas weniger Spielraum als die Standardgröße wählen. In der Regel sollten Sie innerhalb eines Formulars keine verschiedene Größen miteinander kombinieren. Standardmäßig wird `medium` verwendet. ## Deaktivieren und schreibgeschützt Ein Feld kann als `disabled` markiert werden, wodurch jegliche Interaktion verhindert und das Design geändert wird. Deaktivieren bedeutet, dass beim Einreichen des Formulars keine Daten aus diesem Formularelement übermittelt werden. Ein Feld kann auch als `readOnly` definiert werden. Schreibgeschützt bedeutet, dass alle Daten innerhalb des Elements übermittelt werden, aber von den Nutzer/innen nicht geändert werden können. ## Zeilen Eine `TextArea` wird mithilfe von Zeilen und nicht wie bei einer normalen `