Date input

Entrada de fecha estructurada en tres campos independientes de día, mes y año.

Estado: review

1. Vacío con required

Día

Mes

Año

Mostrar HTML

<fieldset class="gn-date-input">
  <legend class="sr-only">Fecha de inicio</legend>

  <div class="gn-date-input__group gn-date-input__day">
    <label class="gn-date-input__label" for="di-required-day">Día <span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span></label>
    <div class="gn-input">
      <input type="text" id="di-required-day" class="gn-input__control" placeholder="DD" inputmode="numeric" maxlength="2" pattern="[0-9]{1,2}" autocomplete="bday-day" required>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__month">
    <label class="gn-date-input__label" for="di-required-month">Mes <span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span></label>
    <div class="gn-select">
      <select id="di-required-month" class="gn-select__control" required autocomplete="bday-month">
        <option value="" selected>Seleccionar</option>
        <option value="01">Enero</option>
        <option value="02">Febrero</option>
        <option value="03">Marzo</option>
        <option value="04">Abril</option>
        <option value="05">Mayo</option>
        <option value="06">Junio</option>
        <option value="07">Julio</option>
        <option value="08">Agosto</option>
        <option value="09">Septiembre</option>
        <option value="10">Octubre</option>
        <option value="11">Noviembre</option>
        <option value="12">Diciembre</option>
      </select>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__year">
    <label class="gn-date-input__label" for="di-required-year">Año <span class="gn-field__required" aria-hidden="true">*</span><span class="sr-only">obligatorio</span></label>
    <div class="gn-input">
      <input type="text" id="di-required-year" class="gn-input__control" placeholder="AAAA" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" autocomplete="bday-year" required>
    </div>
  </div>
</fieldset>

2. Valores rellenados válidos

Día

Mes

Año

Mostrar HTML

<fieldset class="gn-date-input">
  <legend class="sr-only">Fecha cumplimentada</legend>

  <div class="gn-date-input__group gn-date-input__day">
    <label class="gn-date-input__label" for="di-filled-day">Día</label>
    <div class="gn-input">
      <input type="text" id="di-filled-day" class="gn-input__control" value="28" inputmode="numeric" maxlength="2" pattern="[0-9]{1,2}" autocomplete="bday-day">
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__month">
    <label class="gn-date-input__label" for="di-filled-month">Mes</label>
    <div class="gn-select">
      <select id="di-filled-month" class="gn-select__control" autocomplete="bday-month">
        <option value="01">Enero</option>
        <option value="02">Febrero</option>
        <option value="03">Marzo</option>
        <option value="04">Abril</option>
        <option value="05" selected>Mayo</option>
      </select>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__year">
    <label class="gn-date-input__label" for="di-filled-year">Año</label>
    <div class="gn-input">
      <input type="text" id="di-filled-year" class="gn-input__control" value="2025" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" autocomplete="bday-year">
    </div>
  </div>
</fieldset>

3. Error en la fecha (3 subcampos)

Día

Mes

Año

Error: Revisa los tres subcampos de la fecha.

Mostrar HTML

<fieldset class="gn-date-input" aria-describedby="di-error-msg">
  <legend class="sr-only">Fecha con error</legend>

  <div class="gn-date-input__group gn-date-input__day">
    <label class="gn-date-input__label" for="di-error-day">Día</label>
    <div class="gn-input gn-input--error">
      <input type="text" id="di-error-day" class="gn-input__control" value="03" inputmode="numeric" maxlength="2" pattern="[0-9]{1,2}" autocomplete="bday-day" aria-invalid="true">
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__month">
    <label class="gn-date-input__label" for="di-error-month">Mes</label>
    <div class="gn-select gn-select--error">
      <select id="di-error-month" class="gn-select__control" autocomplete="bday-month" aria-invalid="true">
        <option value="01">Enero</option>
        <option value="02">Febrero</option>
        <option value="03" selected>Marzo</option>
      </select>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__year">
    <label class="gn-date-input__label" for="di-error-year">Año</label>
    <div class="gn-input gn-input--error">
      <input type="text" id="di-error-year" class="gn-input__control" value="20" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" autocomplete="bday-year" aria-invalid="true">
    </div>
  </div>
</fieldset>
<p id="di-error-msg" class="gn-field__error">
  <svg class="gn-field__error-icon" xmlns="http://www.w3.org/2000/svg" width="3" height="15" viewBox="0 0 3 15" fill="none" aria-hidden="true" focusable="false">
    <path d="M1.50193 14.8389C1.91494 14.8389 2.26787 14.6975 2.56071 14.4146C2.85356 14.1317 3 13.7916 3 13.3944C3 12.9972 2.85291 12.6577 2.55879 12.3761C2.26466 12.0944 1.91109 11.9536 1.49807 11.9536C1.08506 11.9536 0.732128 12.095 0.439286 12.3779C0.146443 12.6608 0 13.0009 0 13.3981C0 13.7953 0.147085 14.1348 0.441214 14.4164C0.735343 14.6981 1.08891 14.8389 1.50193 14.8389ZM3 9.89262V0H0V9.89262H3Z" fill="currentColor"/>
  </svg>
  <span class="gn-field__error-prefix">Error:</span>
  <span class="gn-field__error-text">Revisa los tres subcampos de la fecha.</span>
</p>

4. Focus visible en subcampo (día)

Día

Mes

Año

Mostrar HTML

<fieldset class="gn-date-input">
  <legend class="sr-only">Fecha con foco visible en día</legend>

  <div class="gn-date-input__group gn-date-input__day">
    <label class="gn-date-input__label" for="di-focus-day">Día</label>
    <div class="gn-input gn-date-input__focus-sim">
      <input type="text" id="di-focus-day" class="gn-input__control" value="09" inputmode="numeric" maxlength="2" pattern="[0-9]{1,2}" autocomplete="bday-day">
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__month">
    <label class="gn-date-input__label" for="di-focus-month">Mes</label>
    <div class="gn-select">
      <select id="di-focus-month" class="gn-select__control" autocomplete="bday-month">
        <option value="06" selected>Junio</option>
      </select>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__year">
    <label class="gn-date-input__label" for="di-focus-year">Año</label>
    <div class="gn-input">
      <input type="text" id="di-focus-year" class="gn-input__control" value="2024" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" autocomplete="bday-year">
    </div>
  </div>
</fieldset>

Componente Date Input

Date Input es un componente compuesto por tres subcampos coordinados:

Día (input)
Mes (select)
Año (input)

Composición y reutilización

Este componente no redefine controles base. Se construye reutilizando:

.gn-input para día y año
.gn-select para mes

date-input aporta principalmente layout y coordinación visual entre subcampos.

Estructura recomendada

Contenedor semántico con <fieldset class="gn-date-input">
<legend class="sr-only"> para nombrar el conjunto sin forzar un título visual global
Cada subcampo con su label visible y asociación nativa for/id

Required por subcampo

Cuando un subcampo sea obligatorio:

usar required en el control real (input o select)
mostrar asterisco junto a la etiqueta del subcampo
asterisco común mediante .gn-field__required (con aria-hidden="true")

Error del componente

En este componente, cuando hay error de fecha, se marcan siempre los tres subcampos (día, mes y año).

Recomendación:

aplicar gn-input--error en día y año
aplicar gn-select--error en mes
marcar los tres controles con aria-invalid="true"
usar un mensaje común con .gn-field__error y asociarlo con aria-describedby en los tres controles

Accesibilidad

Evitar aria-label redundantes cuando existe label visible correctamente asociado
Usar inputmode="numeric" + maxlength + pattern en día/año para mejorar entrada y validación
Usar autocomplete (bday-day, bday-month, bday-year) cuando aplique

Estados documentados en examples

Vacío con required
Valores válidos rellenos
Error de fecha en los tres subcampos
Focus visible en subcampo

El componente base sigue siendo HTML/CSS y mantiene la reutilización de input y select.

Nota sobre el estado abierto del mes

El estado desplegado/abierto del control de mes pertenece al componente select y se documenta en sus propios examples. En date-input se documenta la composición estable de los tres subcampos sin simular dropdowns manuales.