# TimeInput

Un instant dans une seule case : heure et minute, et, dans le format à 12 heures, AM ou PM. Le format appartient au produit, pas au système de l'utilisateur.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">Quand rappeler ?</legend><div class="feitio-time-field" data-hour-cycle="24"><input class="seg" inputmode="numeric" maxlength="2" value="19" aria-label="Heure"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minute"></div></fieldset>
```

## Quand l'utiliser

-   Pour toute heure saisie par la personne : un rappel, un emploi du temps.

## Quand ne pas l'utiliser

-   **Pour quelques instants fixes** (matin, après-midi, soir) : des Radios.
-   **Le champ d'heure du navigateur** (`type="time"`) : il suit le format du système de l'utilisateur, que le produit ne peut pas choisir, et chaque navigateur le dessine différemment.

## Exemples

### 24 ou 12 heures

Le format provient de l'attribut `data-hour-cycle`. Dans la version à 12 heures, AM/PM se trouve à l'intérieur de la case, et un clic le change.

Afficher le code

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Quando lembrar?</legend>
  <div class="feitio-time-field" data-hour-cycle="24">
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Hora">
    <span class="sep" aria-hidden="true">:</span>
    <input class="seg" inputmode="numeric" maxlength="2" aria-label="Minuto">
    <button type="button" class="period" aria-label="AM ou PM">AM</button>
  </div>
</fieldset>
```

## Anatomie

1.  **Heure :** deux chiffres.
2.  **Minute :** deux chiffres, après le point-virgule.
3.  **AM ou PM :** uniquement dans le format à 12 heures ; un clic le change.

## États

Vide

Rempli, 24h

Rempli, 12h

Erreur dans la minute

Use a minute between 00 and 59

## Accessibilité

-   Le groupe est un champ avec la question ; chaque partie a son propre nom ("Heure", "Minute", "Matin ou Soir").
-   L'erreur indique quelle partie corriger et marque uniquement celle-ci.
-   La boîte entière affiche la bordure de focus.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-time-field"`

obligatoire

La boîte avec ses parties.

`data-hour-cycle`

`"24"`, `"12"`

Le format, choisi par le produit.

`class="seg"`

heure et minute

Avec `inputmode="numeric"` et `maxlength="2"`.

`class="period"`

le bouton Matin/Soir

Ne s'affiche que dans le format à 12 heures.

`aria-invalid="true"`

uniquement sur la mauvaise partie

Marque uniquement l'heure ou uniquement la minute.