# TimeInput

Un momento en una sola caja: hora y minuto y, en el formato de 12 horas, AM o PM. El formato pertenece al producto, no al sistema del usuario.

## Playground

```html
<fieldset class="feitio-fieldset"><legend class="feitio-label">¿Cuándo recordar?</legend><div class="feitio-time-field" data-hour-cycle="24"><input class="seg" inputmode="numeric" maxlength="2" value="19" aria-label="Hora"><span class="sep" aria-hidden="true">:</span><input class="seg" inputmode="numeric" maxlength="2" value="30" aria-label="Minuto"></div></fieldset>
```

## Cuándo usarlo

-   Para cualquier hora que la persona escriba: un recordatorio, un horario.

## Cuándo no usarlo

-   **Para unas pocas horas fijas** (mañana, tarde, noche): Radios.
-   **El campo de tiempo del navegador** (`type="time"`): sigue el formato del sistema del usuario, que el producto no puede elegir, y cada navegador lo dibuja de forma diferente.

## Ejemplos

### 24 o 12 horas

El formato proviene del atributo `data-hour-cycle`. En el de 12 horas, AM/PM está dentro de la caja, y un toque lo cambia.

Mostrar código

```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>
```

## Anatomía

1.  **Hora:** dos dígitos.
2.  **Minuto:** dos dígitos, después del punto y coma.
3.  **AM o PM:** solo en el formato de 12 horas; un toque lo cambia.

## Estados

Vacío

Lleno, 24h

Lleno, 12h

Error en el minuto

Use a minute between 00 and 59

## Accesibilidad

-   El grupo es un Fieldset con la pregunta; cada parte tiene su propio nombre ("Hora", "Minuto", "AM o PM").
-   El error indica qué parte corregir y solo marca esa.
-   La caja entera muestra el contorno de enfoque.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-time-field"`

obligatorio

La caja con sus partes.

`data-hour-cycle`

`"24"`, `"12"`

El formato, elegido por el producto.

`class="seg"`

hora y minuto

Con `inputmode="numeric"` y `maxlength="2"`.

`class="period"`

el botón AM/PM

Solo aparece en el formato de 12 horas.

`aria-invalid="true"`

solo en la parte incorrecta

Marcan solo la hora o solo el minuto.