Statut
Component checklist
Usage
<dsa-input-otp
id="input"
length="6"
label="Veuillez saisir le code reçu par courriel"
help-text="Texte d'aide"
pattern="^\d*$"
inputmode="numeric"
></dsa-input-otp>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-otp/input-otp.js';
import type { DSAInputOTP } from '@ds-autonomie/web-components';
const inputOTPEl = document.querySelector<DSAInputOTP>('#input')
if (inputOTPEl !== null) {
console.log(inputOTPEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant de champ de saisie
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un nom accessible dans le cas où aucun label n'est fourni. |
string |
- |
|
autocapitalize |
Contrôle la capitalisation automatique lorsque l'utilisateur entre une saisie dans le champ. |
off none on sentences words characters |
- |
|
autofocus |
Indique que le champ doit recevoir le focus au chargement de la page |
boolean |
false |
|
defaultValue |
La valeur par défaut du contrôle. Utilisé principalement pour la remise à zero du form control |
string |
- |
|
description |
Fournit une description au composant pour une meilleure accessibilité. |
string |
'' |
|
disabled |
Désactive le champ de saisie |
boolean |
false |
|
enterkeyhint |
Utilisé pour personnaliser le libellé ou l'icône de la touche Entrée sur les claviers virtuels |
enter done go next previous search send |
- |
|
success |
Indique si le composant doit être en état de succès |
boolean |
false |
|
successMessage success-message |
Un message de succès qui est affiché lorsque l'attribut `success` est définie à `true`. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
errorMessage error-message |
Un message d'erreur qui est affiché lorsque l'attribut error est définie à true. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
helpText help-text |
Le help-text du champ. Pour afficher du HTML, utilisez le slot help-text |
string |
'' |
|
inputmode |
Indique au navigateur quel type de données sera saisi par l'utilisateur, lui permettant d'afficher le clavier virtuel approprié sur les appareils compatibles |
none text decimal numeric search tel email url |
- |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
length |
La longueur du champ qui sera considéré comme valide |
number |
6 |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
pattern |
Un modèle d'expression régulière pour valider ou invalider la valeur saisie. Vous pouvez utiliser les patterns inclus dans le package : REGEXP_ONLY_DIGITS, REGEXP_ONLY_LETTERS, REGEXP_ONLY_DIGITS_AND_LETTERS |
string |
'' |
|
placeholder
|
Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite |
string |
'' |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
size |
La taille du champ de saisie |
small medium large |
'medium' |
|
validate |
Si l'attribut est à true , la valeur de l'input est validé avec l'attribut pattern |
boolean |
false |
|
value |
La valeur du contrôle, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
variant |
La variante du champ de saisie |
layer base |
'base' |
Méthodes
|
Nom |
Description |
Type |
|---|---|---|
|
blur()
|
Enlève le focus du champ |
() => void |
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
|
select() |
Sélectionne tout le texte dans le champ |
() => void |
|
setCustomValidity() |
Défini un message de validation personnalisé |
(message: string) => void |
Slots
|
Nom |
Description |
|---|---|
|
label |
Le slot du libellé du champ de saisie. Alternativement, vous pouvez utiliser l'attribut label |
|
help-text |
Texte qui décrit comment utiliser le champ de saisie. Alternativement, vous pouvez utiliser l'attribut help-text |
|
tooltip |
Texte qui permet de passer des informations additionelles à coté du libellé |
Événements
|
Nom |
Description |
|---|---|
|
dsa-blur |
Émis lorsque le champ de saisie perd le focus |
|
dsa-change |
Émis lorsque la valeur du champ de saisie change |
|
dsa-focus |
Émis lorsque le champ de saisie obtient le focus |
|
dsa-input |
Émis lorsque le champ de saisie reçoit une entrée |
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du champ et que les contraintes ne sont pas respectées |