Mot de passe
Champ de mot de passe sécurisé construit sur Input, avec show/hide et les meilleures pratiques d'accessibilité.
Sécuriser les champs de mot de passe pour les flux d'authentificationLien vers la section
Les PasswordInput component est une entrée spécialisée pour le mot de passe et les champs secrets.
Il se construit sur le dessus de la base Entrées composant et ajoute un affichage sécurisé/cacher basculer avec le clavier et le soutien de lecteur d'écran.
Utilisez-le pour:
- Formulaires de connexion
- formulaires d'inscription
- mot de passe reset flux
- changement de mot de passe
- paramètres de sécurité du compte
- Flux d'intégration nécessitant des informations d'identification
Idée de base
PasswordInput est pour le texte secret. Il devrait préserver la sémantique des mots de passe tout en donnant aux utilisateurs un moyen sûr de vérifier ce qu'ils ont tapé.
ImportationLien vers la section
import { PasswordInput } from "@pycolors/ui";Utilisation de baseLien vers la section
Quand utiliser PasswordInputLien vers la section
Utilisez PasswordInput lorsque la valeur doit être masquée par défaut et révélée uniquement par une intention explicite de l'utilisateur.
Authentification
Cycle de vie du mot de passe
Paramètres de sécurité
ComportementLien vers la section
PasswordInput est contrôlé en interne pour la visibilité.
Elle :
- par défaut à
type="password" - bascule entre
passwordettext - utilise un bouton sémantique pour la bascule
- Prend en charge l'interaction de la souris et du clavier
- expose l'état accessible à bascule avec
aria-pressed - réserve la bonne zone d'icônes pour la visibilité
Règle de sécurité
Révéler le mot de passe doit toujours être une action explicite de l'utilisateur. Ne jamais afficher de valeurs secrètes par défaut.
Avec texte d'aideLien vers la section
Utilisez le texte d'aide pour expliquer les exigences de mot de passe.
Use at least 8 characters with one number.
Erreur de validationLien vers la section
Utilisation error pour afficher la validation du mot de passe au niveau du champ.
Password must be at least 8 characters.
Règle de validation
Gardez les erreurs de mot de passe spécifiques. Évitez les messages vagues comme « Mot de passe non valide » lorsque l’utilisateur peut corriger l’exigence.
TaillesLien vers la section
PasswordInput prend en charge la même taille API que Input.
Tailles disponiblesLien vers la section
| Taille | Objet |
|---|---|
sm | Écrans de réglages denses ou formes compactes |
md | Taille du champ du mot de passe par défaut |
lg | Auth pages, onboarding, et des formes de haut-accentuation |
UtilisationsLien vers la section
Utilisez une étiquette claire
Les étiquettes telles que Mot de passe, Mot de passe actuel, Nouveau mot de passe et Confirmer le mot de passe sont directes et prévisibles.
Ajouter des exigences à proximité du terrain
Utilisez le texte d'aide pour les exigences avant la validation, puis le texte d'erreur lorsque l'utilisateur doit corriger quelque chose.
Garder un comportement prévisible
La bascule de révélation ne doit changer que la visibilité, pas la validation, le focus ou la valeur du champ.
Valider en dehors du composant
PasswordInput affiche l'état de validation. Votre schéma, serveur ou couche auth définit les règles.
Utiliser l'autocomplétion native
Ajouter autoComplete Valeurs telles que current-password, new-passwordou one-time-code le cas échéant.
PasswordInput vs InputLien vers la section
| Situation | Utilisation |
|---|---|
| Champ de mot de passe | PasswordInput |
| Mot de passe actuel | PasswordInput |
| Nouveau mot de passe | PasswordInput |
| Confirmer le mot de passe | PasswordInput |
| Email, nom, URL, recherche | Entrées |
| token secret avec comportement de révélation | PasswordInput ou saisie secrète personnalisée |
| Longue valeur secrète | Champ secret textarea-like personnalisé |
Règle de décision
Utilisez PasswordInput lorsque la valeur est secrète et bénéficie d'une bascule de visibilité.
APILien vers la section
Props
PasswordInput expose la même API que Input, sauf :
typeest contrôlé en internerightIconest réservé à la visibilité
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
label | string | — | Étiquette accessible au-dessus du champ |
helperText | string | — | Texte d'aide sous le champ |
error | string | — | Message d'erreur de validation |
leftIcon | React.ReactNode | — | Icône optionnelle affichée à gauche |
size | "sm" | "md" | "lg" | "md" | Densité visuelle |
className | string | — | Dépassement du vent arrière |
autoComplete | string | — | Indication native autocomplete |
Tous les autres accessoires d'entrée pris en charge sont transférés.
TypeScript typesLien vers la section
import type { InputProps } from "@pycolors/ui";
export interface PasswordInputProps extends Omit<
InputProps,
"type" | "rightIcon"
> {}AccessibilitéLien vers la section
PasswordInput est conçu pour une entrée d'informations d'identification accessible.
Directives :
- La visibilité est un vrai bouton
- Le Toggle devrait exposer
aria-label - Le Toggle devrait exposer
aria-pressed - Les icônes doivent être décoratives et utilisées
aria-hidden - l'entrée conserve la sémantique du mot de passe natif
- Les étiquettes, le texte d'aide et les erreurs suivent
- utiliser de manière appropriée
autoCompletevaleurs - ne retirez pas les bagues de focus de la bascule ou du champ
Valeurs d'auto-complétion recommandées :
| Contexte | autoComplete |
|---|---|
| Mot de passe | current-password |
| Enregistrer le mot de passe | new-password |
| Réinitialiser mot de passe | new-password |
| Confirmer le mot de passe | new-password |
Règle d'accessibilité
Le contrôle de révélation doit être accessible au clavier et doit annoncer clairement si le mot de passe est actuellement affiché ou caché.
Préférez/évitezLien vers la section
Préférez
- Effacer les étiquettes de mot de passe
- Texte d'aide pour les exigences
- Messages de validation spécifiques
- Valeurs autocompletes natives
- accessible révéler basculer
Éviter
- Afficher les mots de passe par défaut
- des erreurs vagues comme “Mot de passe non valide”
- icônes personnalisées qui entrent en conflit avec révéler
- champs de mot de passe réservé
- Règles de validation cachées dans le composant UI
Directives de copie du produitLien vers la section
La copie du mot de passe devrait réduire la friction sans affaiblir les attentes en matière de sécurité.
Exemples d'étiquettes
Labels should stay explicit, predictable, and easy to scan.