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

<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

<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

Estados

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