TextArea
Pour ajouter le composant TextArea
à votre application :
import {TextArea} from '@stripe/ui-extension-sdk/ui';
<TextArea label="Description" placeholder="Acme Inc was founded in…" defaultValue="Stripe Apps lets you embed custom…" onChange={(e) => { console.log(e.target.value); }} />
Props
Prop | Type | Description |
---|---|---|
aria-label |
| Text that describes the control. Only visible to screen readers, and is not clickable. Should not be used if `label` is set. |
autoComplete |
| |
autoFocus |
| |
cols |
| |
defaultValue |
| |
description |
| Descriptive text that will be rendered adjacent to the control's label. |
disabled |
| |
error |
| Error text that will be rendered below the control. |
form |
| |
hiddenElements |
| Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
invalid |
| Programmatically mark the value as invalid |
label |
| Text that describes the control. Will be both visible and clickable. |
maxLength |
| |
minLength |
| |
name |
| |
onChange |
| |
onKeyDown |
| |
onKeyUp |
| |
placeholder |
| |
readOnly |
| |
required |
| |
resizeable |
| Allow the user to resize the textarea |
rows |
| Rows of text that are visible in the input |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
wrap |
| |
onKeyPress Deprecated |
|
CSS
Les composants TextArea
prennent en charge les propriétés CSS suivantes :
Propriété | Type | Exemple |
width | 2/3 | |
Largeur de la zone de texte. Consultez la section Dimensionnement pour en savoir plus. |
Les composants TextArea
ne prennent pas en charge les autres propriétés CSS. Stylisez-les plutôt en utilisant leurs propriétés.
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
.
<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
.
<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
.
<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.
<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.
<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 :
<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
:
<TextArea css={{width: 'fill'}} />