Composant TextArea pour les applications Stripe

Utilisez un composant TextArea pour créer un champ de saisie pour plusieurs lignes de texte.

Version du SDK

Pour ajouter le composant TextArea à votre application :

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

Chargement de l'exemple...

<TextArea
  label="Description"
  placeholder="Acme Inc was founded in…"
  defaultValue="Stripe Apps lets you embed custom…"
  onChange={(e) => {
    console.log(e.target.value);
  }}
/>

Propriétés TextArea

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.
`cols`	Facultatif `number \| undefined`
`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.
`resizeable`	Facultatif `boolean \| undefined`
`rows`	Facultatif `number \| undefined`
`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`.
`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.
`wrap`	Facultatif `string \| undefined`
`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 marquer un TextArea comme étant non valide en lui attribuant la propriété invalid. Il s’agit là d’un effet purement visuel. La valeur par défaut est false.

Chargement de l'exemple...

<TextArea
  label="Favorite word"
  defaultValue="Stripe Apps lets you embed custom…"
  invalid
/>

Redimensionnable

Par défaut, TextArea est redimensionnable verticalement. Les utilisateurs qui ont besoin de plus d’espace optent généralement pour cette solution. Si vous voulez empêcher le redimensionnement, définissez resizeable sur false.

Chargement de l'exemple...

<TextArea
  label="Resizable bio"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Unresizable bio"
  resizeable={false}
  defaultValue="Stripe Apps lets you embed custom…"
/>

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

<TextArea
  label="Description (large)"
  size="large"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (medium, default)"
  size="medium"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (small)"
  size="small"
  defaultValue="Stripe Apps lets you embed custom…"
/>

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

<TextArea
  label="Disabled"
  defaultValue="Stripe Apps lets you embed custom…"
  disabled
/>
<TextArea
  label="Readonly"
  defaultValue="Stripe Apps lets you embed custom…"
  readOnly
/>

Lignes

Un TextArea se sert de lignes pour contrôler sa hauteur, et non d’une hauteur traditionnelle en pixels, tout comme un <TextArea /> standard. L’élément peut ainsi se dimensionner en fonction de multiples de la taille de la police, plutôt qu’une valeur brute en pixels. Cela évite au texte d’être en partie masqué par défaut.

La hauteur verticale de votre composant TextArea varie également en fonction de la valeur que vous définissez pour la taille, étant donné que cela modifie la hauteur de ligne du texte dans la zone de saisie.

Chargement de l'exemple...

<TextArea
  label="Description (3 rows, default)"
  defaultValue="Stripe Apps lets you embed custom…"
/>
<TextArea
  label="Description (6 rows)"
  rows={6}
  defaultValue="Stripe Apps lets you embed custom…"
/>

Gestion des états

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

Chargement de l'exemple...

<TextArea
  onChange={(e) => {
    console.log(e);
  }}
  label="About your business"
  placeholder="Our business is…"
/>

Largeur

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

Chargement de l'exemple...

<TextArea
  label="App feedback"
  defaultValue="Stripe Apps lets you embed custom…"
  css={{width: 'fill'}}
/>

Composant TextArea pour les applications Stripe

Utilisez un composant TextArea pour créer un champ de saisie pour plusieurs lignes de texte.

Propriétés TextArea

CSS

Non valide

Redimensionnable

Taille

Désactivation et lecture seule

Lignes

Gestion des états

Largeur

Voir aussi