TextField

Les formulaires permettent à un utilisateur de fournir des informations pour effectuer une tâche.

Usage

import { TextField } from 'nr1'

Exemples

Basique

<TextField label="Username" placeholder="e.g. John Doe" />

Avec étiquette en ligne

<TextField label="Username" labelInline placeholder="e.g. John Doe" />

Recherche

<TextField type={TextField.TYPE.SEARCH} placeholder="e.g. Placeholder" />

Mot de passe

<TextField type={TextField.TYPE.PASSWORD} placeholder="e.g. Placeholder" />

Préformaté

<TextField type={TextField.TYPE.PREFORMATTED} placeholder="npm run build" />

Chargement

<TextField loading placeholder="e.g Placeholder" />

Désactivé

<TextField defaultValue="Some value" disabled placeholder="e.g Placeholder" />

Lecture seule

<TextField defaultValue="Some value" readOnly placeholder="e.g Placeholder" />

Avec description

<TextField description="Description value" placeholder="e.g Placeholder" />

Avec un message invalide

<TextField
  invalid="Not enough text, needs more"
  placeholder="e.g Placeholder"
/>

Accessoires

`ariaLabel` chaîne	Fournissez une étiquette aux lecteurs d’écran pour décrire cette entrée. Ceci n'est requis que si l'étiquette du lecteur d'écran doit être différente de l'accessoire `label` , ou si vous ne fournissez pas du tout d'accessoire `label`.
`ariaLabelledBy` chaîne	Fournissez l'`id` unique d'un élément dont le contenu décrit cette entrée pour les lecteurs d'écran. Ceci n'est requis que si l'étiquette du lecteur d'écran doit être différente de l'accessoire `label` , ou si vous ne fournissez pas du tout d'accessoire `label` . Utilisez ceci ou `ariaLabel`, pas les deux.
`autoFocus` booléen	Si `true`, le champ de texte se concentrera automatiquement sur le montage.
`className` chaîne	Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement.
`defaultValue` chaîne	Valeur par défaut du champ de texte.
`description` chaîne	Message avec des instructions sur la façon de remplir le champ du formulaire.
`disabled` booléen	Détermine si le champ peut être modifiable ou non.
`info` chaîne	Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette.
`invalid` booléen\|chaîne	Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ `boolean` ou un `string`. Lorsqu'il s'agit d'un `string`, ainsi que de l'état invalide affiché, le texte sera affiché ci-dessous.
`label` chaîne	Texte à afficher comme étiquette.
`labelInline` booléen	Affichez l'étiquette en ligne dans le contrôle de formulaire. À utiliser uniquement lorsque le composant n'est pas à l'intérieur d'un `Form`. Dans ce cas, définissez `layoutType` sur `Form.LAYOUT_TYPE.SPLIT` dans le composant `Form`.
`loading` booléen	Si vous chargez une liste de données ou autre chose dans un champ de formulaire, indiquez à l'utilisateur que quelque chose est en cours de chargement en utilisant le formulaire d'état de chargement. Utilisé pour informer que le champ peut charger des valeurs de manière dynamique. Lorsqu'il est défini sur `true`, affiche un spinner de chargement ; et lorsqu'il est défini sur `false`, réserve de l'espace dans l'interface utilisateur afin que le spinner puisse potentiellement être affiché. Ne définissez pas la propriété (ou définissez-la sur `undefined`) si le champ n'est pas censé être chargé à un moment donné.
`multiline` OBSOLÈTE booléen	Date limite de soumission : 1er janvier 2022 L'accessoire « multiline » est obsolète, utilisez plutôt le composant MultilineTextField à des fins multilignes. Si l'entrée accepte une ou plusieurs lignes. Cela affecte également le comportement de la touche [Entrée], qui créera une nouvelle ligne, par opposition à un no-op dans un champ d'une seule ligne.
`onBlur` fonction	Rappel déclenché lorsque le champ de texte perd le focus. `function (event: React.FocusEvent Event source of the callback. )`
`onChange` fonction	Rappel déclenché lorsque la valeur du champ de texte change. `function (event: React.ChangeEvent Event source of the callback. You can pull out the new value by accessing event.target.value. )`
`onFocus` fonction	Rappel déclenché lorsque le champ de texte obtient le focus. `function (event: React.FocusEvent Event source of the callback. )`
`onKeyDown` fonction	Rappel qui se déclenche lorsqu'une touche est enfoncée. `function (event: React.KeyboardEvent Event source of the callback. )`
`onKeyUp` fonction	Rappel qui se déclenche lorsqu'une touche est sortie. `function (event: React.KeyboardEvent Event source of the callback. )`
`placeholder` chaîne	Indice affiché dans le champ de texte lorsqu'il n'a aucune valeur.
`readOnly` booléen	Si `true`, rend le champ de texte en lecture seule.
`required` booléen	Si `true`, indique que le champ de formulaire est obligatoire.
`spacingType` énumération[]	Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme `margin` ou `padding`. Pour omettre une valeur, utilisez `SPACING_TYPE.OMIT`. `<Array of<One ofTextField.SPACING_TYPE.EXTRA_LARGE, TextField.SPACING_TYPE.LARGE, TextField.SPACING_TYPE.MEDIUM, TextField.SPACING_TYPE.NONE, TextField.SPACING_TYPE.OMIT, TextField.SPACING_TYPE.SMALL, > >`
`spellCheck` booléen	Si `true`, active la vérification des fautes d'orthographe par le navigateur.
`style` objet	Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement.
`testId` chaîne	Ajoute un attribut `data-test-id` . Utilisez-le pour cibler le composant dans les tests unitaires et E2E. Pour qu'un identifiant de test soit valide, préfixez-le avec votre identifiant nerdpack, suivi d'un point. Par exemple, `my-nerdpack.some-element`. Remarque : vous ne verrez peut-être pas l'attribut `data-test-id` car ils sont supprimés du DOM. Pour les déboguer, transmettez un paramètre de requête `e2e-test` à l'URL.
`type` énum.	Texte — lorsqu'un utilisateur saisit une ligne de texte dans un champ E-mail — lorsque vous avez besoin qu'un utilisateur saisisse une adresse e-mail Recherche — lorsqu'un utilisateur a besoin d'effectuer une recherche Préformaté — lorsqu'un utilisateur doit saisir du contenu de code Mot de passe — lorsqu'un utilisateur saisit un mot de passe URL — lorsqu'un utilisateur saisit une URL `<One ofTextField.TYPE.EMAIL, TextField.TYPE.PASSWORD, TextField.TYPE.PREFORMATTED, TextField.TYPE.SEARCH, TextField.TYPE.TEXT, TextField.TYPE.URL, >`
`value` chaîne	Valeur du champ de texte. Ceci est obligatoire pour un composant contrôlé.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec étiquette en ligne

Recherche

Mot de passe

Préformaté

Chargement

Désactivé

Lecture seule

Avec description

Avec un message invalide

Accessoires

chaîne

chaîne

booléen

chaîne

chaîne

chaîne

booléen

chaîne

booléen|chaîne

chaîne

booléen

booléen

OBSOLÈTE

booléen

Date limite de soumission : 1er janvier 2022

fonction

fonction

fonction

fonction

fonction

chaîne

booléen

booléen

énumération[]

booléen

objet

chaîne

énum.

chaîne

Usage