TextField
Pour ajouter le composant TextField
à votre application :
import {TextField} from '@stripe/ui-extension-sdk/ui';
<TextField label="Business name" placeholder="Acme Inc…" 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 |
| |
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 |
| |
size |
| The size of the input |
spellCheck |
| |
tabIndex |
| |
type |
| Choose between the text-alike types on an input |
onKeyPress Deprecated |
|
CSS
Les composants TextField
prennent en charge les propriétés CSS suivantes :
Propriété | Type | Exemple |
width | 2/3 | |
Largeur du champ. Consultez la section Dimensionnement pour en savoir plus. |
Les composants TextField
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 indiquer qu’un composant TextField
est invalide en lui attribuant la propriété invalid
. Il s’agit là d’un effet purement visuel. La valeur par défaut est false
.
<TextField label="Current year" defaultValue="1892" invalid />
Type
Le comportement de type
est semblable à celui de l’attribut type d’un <input />
, mais son utilisation est limitée aux types autorisant du texte. La valeur par défaut est text
.
<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
.
<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.
<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 :
<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
:
<TextField css={{width: 'fill'}} />