TextField-Komponente für Stripe-Apps

Verwenden Sie TextField, um ein Texteingabefeld zu erstellen.

SDK-Version

So fügen Sie Ihrer App die TextField Komponente hinzu:

import {TextField} from '@stripe/ui-extension-sdk/ui';

Beispiel wird geladen ...

<TextField
  label="Business name"
  placeholder="Acme Inc…"
  onChange={(e) => {
    console.log(e.target.value);
  }}
/>

TextField-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“.
`css`	Optional `CSS \| undefined` Verwandte Typen: 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 `<form>` 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<HTMLInputElement>) => 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<HTMLInputElement>) => void) \| undefined` Wird ausgelöst, wenn eine Taste gedrückt wird.
`onKeyUp`	Optional `((event: React.KeyboardEvent<HTMLInputElement>) => 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.
`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`.
`type`	Optional `("number" \| "text" \| "search" \| "tel" \| "url" \| "email" \| "password") \| undefined` Wählen Sie zwischen den textähnlichen Typen einer Eingabe.
`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.
`onKeyPress`	OptionalVeraltet `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined`

CSS

Eigenschaft Typ

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 für weitere Informationen.

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 für weitere Informationen.

Ungültig

Sie können ein TextField-Element auf invalid festlegen, um die Komponente mit einer roten Umrandung anzuzeigen und so visuell deutlich zu machen, dass der angegebene Wert nicht akzeptabel ist. Wird keine Angabe für diese Eigenschaft gemacht, wird sie standardmäßig auf false festgelegt.

Beispiel wird geladen ...

<TextField label="Current year" defaultValue="1892" invalid />

Typ

Sie können die type-Eigenschaft für das TextField festlegen, um es je nach erwartetem Textwert unterschiedlich darzustellen. Dies läuft ähnlich ab wie bei einem Typ-Attribut bei einer <input />, ist jedoch auf Typen beschränkt, die Text zulassen. Wenn Sie diese Eigenschaft weglassen, wird standardmäßig text angezeigt.

Beispiel wird geladen ...

<TextField label="Text" type="text" />
<TextField label="Password" type="password" />
<TextField label="Search" type="search" />
<TextField label="Number" type="number" />

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.

Beispiel wird geladen ...

<TextField label="Small" size="small" />
<TextField label="Medium" size="medium" />
<TextField label="Large" size="large" />

Deaktiviert 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, Nutzer/innen diese jedoch nicht ändern können.

Beispiel wird geladen ...

<TextField label="Disabled" defaultValue="Field is disabled" disabled />
<TextField label="Readonly" defaultValue="Field is readonly" readOnly />

Statusmanagement

Verwenden Sie die TextField-Komponente als unkontrollierte Eingabe:

Beispiel wird geladen ...

<TextField
  onChange={(e) => {
    console.log(e);
  }}
  label="First name"
/>

Breite

Legen Sie die Breite von TextField-Komponenten mithilfe der verfügbaren Werte mit der Eigenschaft css fest:

Beispiel wird geladen ...

<TextField label="Search" type="search" css={{width: 'fill'}} />

TextField-Komponente für Stripe-Apps

Verwenden Sie TextField, um ein Texteingabefeld zu erstellen.

TextField-Eigenschaften

CSS

Ungültig

Typ

Größe

Deaktiviert und schreibgeschützt

Statusmanagement

Breite

Siehe auch