# TextInput

Un champ à une ligne pour un court texte : un nom, une adresse e-mail, un code.

## Playground

```html
<div class="feitio-field"><label class="feitio-label" for="pg-t">Nom du rappel</label><input class="feitio-input" id="pg-t" value="Arroser les plantes"></div>
```

## Quand l'utiliser

-   Pour des réponses qui tiennent sur une seule ligne et où la personne doit taper.

## Quand ne pas l'utiliser

-   **Texte long :** Textarea.
-   **Heure :** TimeInput.
-   **Options connues :** Radios ou Select.

## Exemples

### Largeurs

La largeur compte les caractères de la réponse (4, 10, 20, 40), plus l'espace de remplissage : la taille du champ indique à la personne la taille de la réponse.

Afficher le code

```html
<input class="feitio-input" data-width="4" inputmode="numeric" autocomplete="one-time-code">
<input class="feitio-input" data-width="10" autocomplete="postal-code">
<input class="feitio-input" data-width="20">
<input class="feitio-input" data-width="40">
```

## États

Vide

Avec un texte d'accompagnement

Rempli

Survol

Mise au point

Erreur

Write a subject

Désactivé

Désactivé est rare : ligne pointillée et fond atténué. Si la valeur ne change jamais, affichez-la en texte, pas en champ.

## Faire et ne pas faire

Do

Verification code

Quatre chiffres, un champ pour quatre.

Don’t

Verification code

Un champ énorme pour quatre chiffres incite la personne à douter de ce qu'elle doit écrire.

## Accessibilité

-   Utilisez le bon `type` et `autocomplete` (`email`, `tel`, `one-time-code`) : le mobile affiche le clavier approprié et le navigateur complète automatiquement.
-   Les nombres qui ne sont pas des quantités (codes, codes postaux) utilisent `inputmode="numeric"`, pas `type="number"`.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-input"`

obligatoire

La forme du champ.

`data-width`

`"2"`, `"4"`, `"10"`, `"20"`, `"40"`

Combien de caractères a la réponse. Sans cela, elle remplit la colonne.

`type`, `inputmode`, `autocomplete`

ceux de la réponse

Le clavier et le remplissage automatique à droite.

`aria-invalid="true"`

avec une erreur

Ligne de vin.

`disabled`

—

Rare : préférer afficher la valeur sous forme de texte.