# TimeInput

Eine Zeit in einem einzigen Feld: Stunde, Minute und im 12-Stunden-Format AM oder PM. Das Format gehört zum Produkt, nicht zum Betriebssystem des Nutzers.

## Playground

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

## Wann verwenden

-   Für jede von der Person eingegebene Zeit: eine Erinnerung, ein Terminplan.

## Wann nicht verwenden

-   **Für einige feste Zeiten** (Morgen, Nachmittag, Abend): Radios.
-   **Das Zeitfeld des Browsers** (`type="time"`): es folgt dem Format des Benutzersystems, das das Produkt nicht wählen kann, und jeder Browser stellt es unterschiedlich dar.

## Beispiele

### 24 oder 12 Stunden

Das Format stammt aus der `data-hour-cycle`\-Attribute. Im 12-Stunden-Format befindet sich AM/PM innerhalb des Feldes, und ein Tippen wechselt es.

Code anzeigen

```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.  **Stunde:** zwei Ziffern.
2.  **Minute:** zwei Ziffern, nach dem Doppelpunkt.
3.  **AM oder PM:** nur im 12-Stunden-Format; ein Tippen wechselt es.

## States

Leer

Erfüllt, 24h

Erfüllt, 12h

Fehler in der Minute

Use a minute between 00 and 59

## Barrierefreiheit

-   Die Gruppe ist ein Fieldset mit der Frage; jeder Teil hat seinen eigenen Namen ("Stunde", "Minute", "AM oder PM").
-   Der Fehler sagt aus, welcher Teil zu reparieren ist und markiert nur diesen.
-   Das ganze Feld zeigt den Fokus-Rahmen.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-time-field"`

erforderlich

Das Feld mit seinen Teilen.

`data-hour-cycle`

`"24"`, `"12"`

Das Format, gewählt vom Produkt.

`class="seg"`

Stunde und Minute

Mit `inputmode="numeric"` und `maxlength="2"`.

`class="period"`

der AM/PM-Button

Erscheint nur im 12-Stunden-Format.

`aria-invalid="true"`

nur am falschen Ort

Kennzeichnet nur die Stunde oder nur die Minute.