Composant TextField pour les applications Stripe

Utilisez un composant TextField pour créer un champ de saisie de texte.

Version du SDK

Pour ajouter le composant TextField à votre application :

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

Chargement de l'exemple...

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

Propriétés TextField

Propriété	Type
`autoComplete`	Facultatif `string \| undefined` Spécifie l’un des comportements de saisie semi-automatique possibles.
`autoFocus`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, React placera le focus sur l’élément lors de son montage.
`css`	Facultatif `CSS \| undefined` Types associés : CSS.
`defaultValue`	Facultatif `string \| undefined` Spécifie la valeur initiale modifiable par un utilisateur.
`description`	Facultatif `string \| undefined` Texte descriptif qui sera affiché à côté du libellé du contrôle.
`disabled`	Facultatif `boolean \| undefined` Indique si l’élément doit être désactivé ou non. Empêche la sélection.
`error`	Facultatif `string \| undefined` Texte d’erreur qui sera affiché sous le contrôle.
`form`	Facultatif `string \| undefined` Spécifie l’`id` du `<form>` auquel cette saisie appartient. S’il est omis, il s’agit du formulaire parent le plus proche.
`hiddenElements`	Facultatif `("label" \| "description" \| "error")[] \| undefined` Masque visuellement les éléments spécifiés. Les éléments masqués sont toujours présents et visibles des lecteurs d’écran.
`invalid`	Facultatif `boolean \| undefined` Indique si l’élément est à l’état non valide ou non. Il s’agit uniquement d’une propriété d’affichage, qui n’empêche pas la soumission du formulaire.
`label`	Facultatif `React.ReactNode` Texte décrivant le contrôle. Il est à la fois visible et cliquable.
`maxLength`	Facultatif `number \| undefined` Indique la longueur maximale du texte.
`minLength`	Facultatif `number \| undefined` Indique la longueur minimale du texte.
`name`	Facultatif `string \| undefined` Spécifie le nom de la saisie envoyée avec le formulaire.
`onChange`	Facultatif `((event: React.ChangeEvent<HTMLInputElement>) => void) \| undefined` Obligatoire pour les saisies contrôlées. Se déclenche immédiatement lorsque la valeur de la saisie est modifiée par l’utilisateur (par exemple, à chaque fois qu’il appuie sur une touche du clavier). Se comporte comme l’événement de saisie du navigateur.
`onKeyDown`	Facultatif `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Se déclenche lorsque l’utilisateur appuie sur une touche du clavier.
`onKeyUp`	Facultatif `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined` Se déclenche lorsque l’utilisateur relâche une touche du clavier.
`placeholder`	Facultatif `string \| undefined` Apparaît dans une couleur grisée lorsque la valeur saisie est vide.
`readOnly`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, l’utilisateur ne peut pas modifier la saisie.
`required`	Facultatif `boolean \| undefined` Si cette propriété est définie sur `true`, une valeur doit être renseignée pour soumettre le formulaire.
`size`	Facultatif `("small" \| "medium" \| "large") \| undefined` La taille du composant.
`spellCheck`	Facultatif `boolean \| "true" \| "false" \| undefined` Si la propriété est explicitement définie sur `true` ou sur `false`, active ou désactive la vérification orthographique.
`tabIndex`	Facultatif `number \| undefined` Remplace le comportement par défaut de la touche de tabulation. Évitez d’utiliser des valeurs autres que `-1` et `0`.
`type`	Facultatif `("number" \| "text" \| "search" \| "tel" \| "url" \| "email" \| "password") \| undefined` Choisissez parmi les types de texte d’une entrée.
`value`	Facultatif `string \| undefined` Contrôle le texte saisi. Lorsque vous transmettez cette propriété, vous devez également transmettre un gestionnaire `onChange` qui met à jour la valeur transmise.
`onKeyPress`	FacultatifObsolète `((event: React.KeyboardEvent<HTMLInputElement>) => void) \| undefined`

CSS

Propriété Type

Propriété	Type
`width`	Facultatif `(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` Largeur du composant. Pour en savoir plus, consultez la section Dimensions.

width

Facultatif

(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

Largeur du composant. Pour en savoir plus, consultez la section Dimensions.

Non valide

Vous pouvez définir la propriété invalid sur un élément TextField pour afficher une bordure rouge sur le composant de façon à indiquer que la valeur fournie n’est pas acceptée. Si cette propriété n’est pas activée, la valeur par défaut est false.

Chargement de l'exemple...

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

Type

Vous pouvez définir la propriété type pour le champ TextField afin d’obtenir un affichage différent en fonction du type de valeur textuelle attendue. Cette propriété est similaire à l’attribut type d’un <input />, mais elle est limitée aux types qui autorisent du texte. L’omission de cette propriété entraîne l’affichage par défaut d’une valeur text.

Chargement de l'exemple...

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

Taille

La modification de size vous permet de choisir des variantes avec un peu plus ou un peu moins d’espace que la valeur par défaut. En général, il vaut mieux ne pas combiner différentes tailles dans un même formulaire. La valeur par défaut est medium.

Chargement de l'exemple...

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

Désactivation et lecture seule

Vous pouvez marquer un champ comme étant disabled, ce qui empêche toute interaction et modifie le style. Dans ce cas, aucune donnée de cet élément de formulaire n’est envoyée lors de la soumission du formulaire.

Vous pouvez également faire en sorte qu’un champ soit défini sur readOnly. Dans ce cas, toutes les données de l’élément sont envoyées, mais l’utilisateur ne peut pas les modifier.

Chargement de l'exemple...

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

Gestion des états

Utilisez le composant TextField comme une entrée non contrôlée :

Chargement de l'exemple...

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

Largeur

Définissez la largeur du composant TextField en utilisant les valeurs disponibles avec la propriété css :

Chargement de l'exemple...

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

Composant TextField pour les applications Stripe

Utilisez un composant TextField pour créer un champ de saisie de texte.

Propriétés TextField

CSS

Non valide

Type

Taille

Désactivation et lecture seule

Gestion des états

Largeur

Voir aussi