TextField

Le composant champ de texte permet aux utilisateurs de saisir du texte, généralement utilisé dans les formulaires et les boîtes de dialogue.

Utilisation

Importez le composant selon vos besoins :

import 'mdui/components/text-field.js';

Importez le type TypeScript correspondant :

import type { TextField } from 'mdui/components/text-field.js';

Exemple d'utilisation :

<mdui-text-field label="Champ de texte"></mdui-text-field>

Exemples

Variante

Définissez la variante à l'aide de l'attribut variant.

<mdui-text-field variant="filled" label="Champ de texte"></mdui-text-field>

<br/><br/>

<mdui-text-field variant="outlined" label="Champ de texte"></mdui-text-field>

Source

Texte d'aide

Utilisez label pour afficher un texte au-dessus du champ.

<mdui-text-field label="Champ de texte"></mdui-text-field>

Source

Utilisez placeholder pour afficher un exemple de saisie.

<mdui-text-field label="Champ de texte" placeholder="Saisie"></mdui-text-field>

Source

Utilisez helper (ou le slot helper) pour afficher un message d'aide en dessous. Ajoutez helper-on-focus pour ne l'afficher que lorsque le champ a le focus.

Message d'aide

<mdui-text-field label="Champ de texte" helper="Message d'aide"></mdui-text-field>

<mdui-text-field label="Champ de texte">
  <span slot="helper" style="color: blue">Message d'aide</span>
</mdui-text-field>

<mdui-text-field label="Champ de texte" helper="Message d'aide" helper-on-focus></mdui-text-field>

Source

Effaçable

Ajoutez l'attribut clearable pour afficher un bouton d'effacement lorsqu'une valeur est saisie.

<mdui-text-field clearable label="Champ de texte" value="Texte saisi"></mdui-text-field>

Source

Alignement du texte à droite

Ajoutez l'attribut end-aligned pour aligner le texte à droite.

<mdui-text-field end-aligned label="Champ de texte" value="Texte saisi"></mdui-text-field>

Source

Texte et icônes avant/après

Utilisez les attributs icon et end-icon pour ajouter des icônes Material Icons. Utilisez les slots correspondants pour une personnalisation avancée.

<mdui-text-field icon="search" end-icon="mic" label="Champ de texte"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Champ de texte">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Source

Utilisez les attributs prefix et suffix (ou les slots correspondants) pour ajouter du texte avant ou après. Ce texte ne s'affiche que lorsque le champ a le focus ou contient une valeur.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Champ de texte"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Champ de texte">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Source

Lecture seule

Ajoutez l'attribut readonly pour rendre le champ en lecture seule.

<mdui-text-field readonly label="Champ de texte" value="Texte saisi"></mdui-text-field>

Source

Désactivé

Ajoutez l'attribut disabled pour désactiver le composant.

<mdui-text-field disabled label="Champ de texte" value="Texte saisi"></mdui-text-field>

Source

Champ multiligne

Utilisez l'attribut rows pour définir le nombre de lignes.

<mdui-text-field rows="3" label="Champ de texte"></mdui-text-field>

Source

Ajoutez l'attribut autosize pour ajuster automatiquement la hauteur. Utilisez min-rows et max-rows pour définir les limites.

<mdui-text-field autosize label="Champ de texte"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Champ de texte"></mdui-text-field>

Source

Compteur de caractères

Lorsque maxlength est défini, ajoutez counter pour afficher un compteur de caractères.

<mdui-text-field maxlength="20" counter label="Champ de texte"></mdui-text-field>

Source

Champ mot de passe

Lorsque type="password", ajoutez toggle-password pour afficher un bouton permettant d'afficher/masquer le mot de passe.

<mdui-text-field type="password" toggle-password label="Champ de texte"></mdui-text-field>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Forme du champ de texte. Par défaut `filled`. Les valeurs possibles incluent : `filled` : Champ de texte avec couleur de fond, effet visuel fort `outlined` : Champ de texte avec bordure, effet visuel plus faible
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Type de saisie du champ de texte. Par défaut `text`. Les valeurs possibles incluent : `text` : Valeur par défaut. Champ de texte `number` : Permet uniquement la saisie de chiffres. Affiche un clavier numérique sur les appareils dotés d'un clavier virtuel. `password` : Pour saisir des mots de passe ; la valeur est masquée. `url` : Pour saisir des URL ; valide le format de l'URL. Affiche un clavier adapté sur les appareils prenant en charge les claviers virtuels. `email` : Pour saisir des adresses e-mail ; valide le format de l'e-mail. Affiche un clavier adapté sur les appareils prenant en charge les claviers virtuels. `search` : Pour les champs de recherche. Sur les appareils dotés d'un clavier virtuel, la touche Entrée affiche une icône de recherche. `tel` : Pour saisir des numéros de téléphone. Affiche un clavier numérique téléphonique sur les appareils dotés d'un clavier virtuel. `hidden` : Masque le contrôle, mais sa valeur est toujours envoyée au serveur. `date` : Saisie d'une date (année, mois, jour, sans heure). Sur les navigateurs pris en charge, ouvre un sélecteur de date ou une molette numérique année-mois-jour lorsqu'il est activé. `datetime-local` : Saisie d'une date et d'une heure, sans fuseau horaire. Sur les navigateurs pris en charge, ouvre un sélecteur de date ou une molette numérique année-mois-jour lorsqu'il est activé. `month` : Saisie d'une année et d'un mois, sans fuseau horaire. `time` : Saisie d'une heure, sans fuseau horaire. `week` : Saisie d'une date composée d'une année et d'un numéro de semaine, sans fuseau horaire.
`name`	`name`	`string`	`''`
Nom du champ de texte, qui sera envoyé avec les données du formulaire
`value`	`value`	`string`	`''`
Valeur du champ de texte, qui sera envoyée avec les données du formulaire
	`defaultValue`	`string`	`''`
Valeur par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
`label`	`label`	`string`	-
Texte de l'étiquette
`placeholder`	`placeholder`	`string`	-
Texte de l'espace réservé
`helper`	`helper`	`string`	-
Texte d'aide en bas du champ de texte. Peut également être défini via `slot="helper"`.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Si le texte d'aide en bas ne doit être affiché que lorsque le champ obtient le focus.
`clearable`	`clearable`	`boolean`	`false`
Si le contenu du champ de texte peut être vidé
`clear-icon`	`clearIcon`	`string`	-
Lorsque le champ de texte peut être vidé, nom de l'icône Material Icons pour le bouton d'effacement affiché à droite. Peut également être défini via `slot="clear-icon"`.
`end-aligned`	`endAligned`	`boolean`	`false`
Si le texte doit être aligné à droite
`prefix`	`prefix`	`string`	-
Texte de préfixe du champ de texte. N'est affiché que lorsque le champ de texte a le focus ou a une valeur. Peut également être défini via `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texte de suffixe du champ de texte. N'est affiché que lorsque le champ de texte a le focus ou a une valeur. Peut également être défini via `slot="suffix"`.
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons pour l'icône de préfixe du champ de texte. Peut également être défini via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons pour l'icône de suffixe du champ de texte. Peut également être défini via `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Lorsque la validation du champ du formulaire échoue, nom de l'icône Material Icons affichée à droite du champ de texte. Peut également être défini via `slot="error-icon"`.
`form`	`form`	`string`	-
Élément `<form>` associé. La valeur de cet attribut doit être l'`id` d'un élément `<form>` dans la même page. Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément `<form>`. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Si le champ est en lecture seule
`disabled`	`disabled`	`boolean`	`false`
Si le champ de texte est désactivé
`required`	`required`	`boolean`	`false`
Si ce champ doit être obligatoirement rempli lors de la soumission du formulaire
`rows`	`rows`	`number`	-
Nombre de lignes fixes affichées pour le champ de texte
`autosize`	`autosize`	`boolean`	`false`
Si la hauteur du champ de texte doit s'ajuster automatiquement en fonction du contenu saisi
`min-rows`	`minRows`	`number`	-
Lorsque `autosize` est `true`, nombre minimal de lignes du champ de texte
`max-rows`	`maxRows`	`number`	-
Lorsque `autosize` est `true`, nombre maximal de lignes du champ de texte
`minlength`	`minlength`	`number`	-
Nombre minimal de caractères autorisé
`maxlength`	`maxlength`	`number`	-
Nombre maximal de caractères autorisé
`counter`	`counter`	`boolean`	`false`
Si un compteur de caractères doit être affiché, n'est effectif que lorsque `maxlength` est spécifié.
`min`	`min`	`number`	-
Lorsque `type` est `number`, valeur numérique minimale autorisée
`max`	`max`	`number`	-
Lorsque `type` est `number`, valeur numérique maximale autorisée
`step`	`step`	`number`	-
Lorsque `type` est `number`, pas d'incrémentation/décrémentation
`pattern`	`pattern`	`string`	-
Expression régulière pour la validation du formulaire
`toggle-password`	`togglePassword`	`boolean`	`false`
Lorsque `type` est `password`, définir cet attribut ajoute un bouton pour basculer entre le texte clair et le texte masqué.
`show-password-icon`	`showPasswordIcon`	`string`	-
icône Material Icons pour le bouton de basculement du mot de passe, affiché lorsque le mot de passe est en texte clair. Peut également être défini via `slot="show-password-icon"`.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
icône Material Icons pour le bouton de basculement du mot de passe, affiché lorsque le mot de passe est masqué. Peut également être défini via `slot="hide-password-icon"`.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
Attribut iOS non standard servant à contrôler la mise en majuscule automatique de la première lettre du texte. Valable sur iOS 5 et versions ultérieures. Les valeurs possibles incluent : `none` : Désactive la mise en majuscule automatique `sentences` : Met en majuscule la première lettre des phrases `words` : Met en majuscule la première lettre des mots `characters` : Met en majuscule toutes les lettres
`autocorrect`	`autocorrect`	`string`	-
Attribut `autocorrect` de l'élément `input`
`autocomplete`	`autocomplete`	`string`	-
Attribut `autocomplete` de l'élément `input`
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
Attribut `enterkeyhint` de l'élément `input`, utilisé pour personnaliser le texte ou l'icône affiché(e) sur la touche Entrée du clavier virtuel. L'affichage réel dépend de l'appareil et de la langue de l'utilisateur. Les valeurs possibles incluent : `enter` : Insère une nouvelle ligne `done` : Termine la saisie, ferme le clavier virtuel `go` : Navigue vers la cible du texte saisi `next` : Passe à l'élément de saisie suivant `previous` : Revient à l'élément de saisie précédent `search` : Navigue vers les résultats de recherche `send` : Envoie le message texte
`spellcheck`	`spellcheck`	`boolean`	`false`
Si la vérification orthographique doit être activée
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
Attribut `inputmode` de l'élément `input`, utilisé pour personnaliser le type de clavier virtuel. Les valeurs possibles incluent : `none` : Pas de clavier virtuel. Utile lorsque vous souhaitez implémenter votre propre contrôle de saisie au clavier. `text` : Clavier de saisie de texte standard `decimal` : Clavier de saisie décimale, peut inclure un point décimal `.` ou une virgule de séparation des milliers `,` en plus des chiffres. `numeric` : Affiche un clavier numérique 0-9 `tel` : Clavier numérique téléphonique, comprenant les chiffres 0-9, l'astérisque `*` ou le dièse `#`. `search` : Clavier virtuel optimisé pour la saisie de recherche, le bouton de soumission affiche généralement `search` ou "Rechercher". `email` : Clavier virtuel optimisé pour la saisie d'adresses e-mail, comprend généralement les touches `@`, `.`. `url` : Clavier virtuel optimisé pour la saisie d'URL, comprend généralement les touches `.`, `/`, `#`.
	`validity`	`ValidityState`	-
État de validation du formulaire, voir `ValidityState` pour plus de détails
	`validationMessage`	`string`	-
Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
	`valueAsNumber`	`number`	-
Obtient la valeur actuelle et la convertit en type `number` ; ou définit une valeur de type `number`. Si la valeur ne peut pas être convertie en type `number`, renvoie `NaN`.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Méthodes

Nom	Paramètres	Valeur de retour
`select`		`void`
Sélectionne le texte dans le champ de texte
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Sélectionne une plage spécifique dans le champ de texte
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Remplace une plage spécifique de texte dans le champ de texte par un nouveau texte
`checkValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`.
`reportValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`. Si la validation échoue, un message d'erreur s'affiche également sur le composant.
`setCustomValidity`	`message: string`	`void`
Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus
`change`
Se déclenche lorsque la valeur du champ de texte change et que le champ perd le focus
`input`
Se déclenche lorsque la valeur du champ de texte change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue
`clear`
Se déclenche lors du clic sur le bouton d'effacement généré par l'attribut `clearable`. Vous pouvez empêcher l'effacement du champ de texte en appelant `event.preventDefault()`.

Slots

Nom
`icon`
Icône de gauche
`end-icon`
Icône de droite
`error-icon`
Icône de droite à l'état d'échec de validation
`prefix`
Texte de gauche
`suffix`
Texte de droite
`clear-button`
Bouton d'effacement
`clear-icon`
Icône dans le bouton d'effacement
`toggle-password-button`
Bouton de basculement de l'affichage du mot de passe
`show-password-icon`
Icône dans le bouton de basculement de l'affichage du mot de passe à l'état affiché (texte clair)
`hide-password-icon`
Icône dans le bouton de basculement de l'affichage du mot de passe à l'état masqué
`helper`
Texte d'aide en bas

CSS Parts

Nom
`container`
Conteneur du champ de texte
`icon`
Icône de gauche
`end-icon`
Icône de droite
`error-icon`
Icône de droite à l'état d'échec de validation
`prefix`
Texte de gauche
`suffix`
Texte de droite
`label`
Texte de l'étiquette au-dessus
`input`
Élément `<input>` ou `<textarea>` interne
`clear-button`
Bouton d'effacement
`clear-icon`
Icône dans le bouton d'effacement
`toggle-password-button`
Bouton de basculement de l'affichage du mot de passe
`show-password-icon`
Icône dans le bouton de basculement de l'affichage du mot de passe à l'état affiché (texte clair)
`hide-password-icon`
Icône dans le bouton de basculement de l'affichage du mot de passe à l'état masqué
`supporting`
Conteneur des informations auxiliaires en bas, y compris l'aide, l'erreur et le compteur
`helper`
Texte d'aide en bas
`error`
Texte de description d'erreur en bas
`counter`
Compteur de caractères à droite en bas

Chapitre précédent

Tabs

Chapitre suivant

Tooltip