Input
À quoi il sert
Input est un champ de saisie natif sur une ligne, relié à son libellé par son identifiant.
Quand l’utiliser
- Saisir une donnée courte : nom, courriel, téléphone ou recherche.
- Indiquer type et autocomplete pour le bon clavier et le remplissage automatique.
- Signaler une erreur sur le champ, avec invalid et describedBy.
Quand ne pas l’utiliser
- Pour plusieurs lignes de texte : utiliser Textarea.
- Pour une liste de valeurs limitée : utiliser Select.
- Pour remplacer le libellé par un placeholder : un placeholder n’est pas un libellé.
Exemples
Il manque le domaine après l’arobase.
<label for="courriel">Adresse e-mail</label>
<Input id="courriel" name="courriel" type="email" autocomplete="email" invalid describedBy="courriel-message" />
<p id="courriel-message">Il manque le domaine après l’arobase.</p>Accessibilité
Clavier
- Champ natif : Tab l’atteint, et la saisie reste gérée par le navigateur.
- Le focus visible vient de base.css, par :focus-visible.
Lecteur d’écran
- Le nom vient du label for : le placeholder ne sert jamais de nom.
- invalid pose aria-invalid="true", annoncé par les lecteurs d’écran (Input.astro).
- describedBy relie le message d’erreur ; l’intégrateur fournit l’identifiant.
Garanti par le composant
- id, name, type, autocomplete, inputmode et enterkeyhint transmis tels quels (Input.test.ts).
- Aucun texte en dur : le composant n’écrit ni libellé ni message.
- Hauteur minimale au plus grand de control-height et target-min (forms.spec.ts).
À la charge de l’intégrateur
- Relier chaque champ à un label par for.
- Choisir autocomplete selon la donnée saisie : WCAG 1.3.5 demande un jeton exact.
- Relier le message d’erreur par describedBy, et poser invalid quand la saisie est fausse.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant, visé par `<label for>`. |
| name (obligatoire) | string | — | Nom envoyé avec le formulaire. |
| type | "number" | "text" | "email" | "url" | "tel" | "search" | "password" | 'text' | Type de saisie ; choisit aussi le clavier virtuel sur mobile. |
| value | string | number | — | Valeur initiale. |
| required | boolean | false | Saisie obligatoire (`required`). |
| disabled | boolean | false | Désactive le champ. |
| autocomplete | string | — | Jeton `autocomplete` (WCAG 1.3.5), par exemple `email` ou `name`. |
| inputmode | "text" | "email" | "url" | "tel" | "search" | "none" | "numeric" | "decimal" | — | Clavier virtuel à afficher quand `type` ne suffit pas. |
| enterkeyhint | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | — | Libellé de la touche Entrée du clavier virtuel (`enterkeyhint`), par exemple `next`. |
| describedBy | string | — | Identifiants (séparés par des espaces) des éléments d'aide ou d'erreur. |
| invalid | boolean | false | Pose `aria-invalid="true"` ; à relier au message d'erreur par `describedBy`. |
| placeholder | string | — | Exemple de saisie ; jamais à la place du libellé. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-bg--pp-color-control--pp-color-fg--pp-color-muted--pp-color-status-failed--pp-color-surface--pp-font-line-height-body--pp-font-size-0--pp-radius-control--pp-size-control-height--pp-size-rule--pp-size-target-min--pp-space-3xs--pp-space-xs
Preuves et décisions
- WCAG 1.3.5 Identifier l’objet de la saisie (Identify Input Purpose)
- WCAG 2.5.8 Taille de la cible (minimum) : 24 px avec espacement
- WCAG 3.3.2 Étiquettes ou instructions (Labels or Instructions)
- WCAG 4.1.2 Nom, rôle, valeur (Name, Role, Value)
- Tests : packages/astro/test/Input.test.ts ; apps/docs/e2e/forms.spec.ts