Formularios y accesibilidad

Estilizado de campos de formulario

Tailwind CSS proporciona clases de utilidad para estilizar todos los elementos de formulario de forma consistente. Los campos de texto, areas de texto, selectores, checkboxes y botones de radio se personalizan combinando utilidades de borde, espaciado, tipografia y color.

Campos de texto y selectores

Un campo de texto básico se estiliza con clases de border, padding, rounded y focus:

<label class="block text-sm font-medium text-gray-700 mb-1">Nombre</label>
<input type="text"
       class="w-full px-3 py-2 border border-gray-300 rounded-lg
              text-gray-900 placeholder:text-gray-400
              focus:border-blue-500 focus:ring-2 focus:ring-blue-200
              focus:outline-none transition-colors"
       placeholder="Escribe tu nombre">

La variante placeholder: permite estilizar el texto del placeholder de forma independiente. Los elementos <select> y <textarea> siguen el mismo patrón de clases.

Checkboxes y radio buttons

Para los campos de selección, la utilidad accent-* controla el color de acento que utiliza el navegador para renderizar el check o el punto de selección:

<div class="flex items-center gap-2">
  <input type="checkbox" id="terms"
         class="w-4 h-4 rounded border-gray-300 accent-blue-600
                focus:ring-2 focus:ring-blue-200">
  <label for="terms" class="text-sm text-gray-700">
    Acepto los términos y condiciones
  </label>
</div>

<div class="flex items-center gap-2 mt-3">
  <input type="radio" name="plan" id="plan-basic"
         class="w-4 h-4 border-gray-300 accent-blue-600">
  <label for="plan-basic" class="text-sm text-gray-700">Plan básico</label>
</div>

La utilidad field-sizing

Tailwind CSS 4 incluye la utilidad field-sizing-content que permite que los campos de formulario ajusten su tamaño automáticamente según el contenido. Esto resulta especialmente útil para áreas de texto que crecen a medida que el usuario escribe.

<textarea class="field-sizing-content w-full px-3 py-2
                 border border-gray-300 rounded-lg text-gray-900
                 focus:border-blue-500 focus:ring-2 focus:ring-blue-200
                 min-h-20 max-h-64"
          placeholder="El área crecerá automáticamente..."></textarea>

Con field-sizing-content, el <textarea> comienza con el tamaño mínimo definido por min-h-20 y crece de forma progresiva hasta max-h-64 conforme el usuario introduce texto. No se necesita JavaScript para este comportamiento.

La propiedad CSS field-sizing: content es relativamente nueva. Se recomienda verificar la compatibilidad del navegador antes de utilizarla en producción.

Variante file: para inputs de archivo

La variante file: permite estilizar el botón de selección de archivo dentro de un <input type="file">:

<input type="file"
       class="w-full text-sm text-gray-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-lg file:border-0
              file:text-sm file:font-medium
              file:bg-blue-50 file:text-blue-700
              hover:file:bg-blue-100 file:cursor-pointer">

Las utilidades con prefijo file: afectan únicamente al botón, no al texto del nombre de archivo. La combinación hover:file: aplica estilos al botón cuando el usuario pasa el cursor sobre él.

Variantes de validación

Variantes valid, invalid y sus versiones user-*

Las variantes valid: e invalid: responden al resultado de la validación nativa del navegador. Sin embargo, se aplican inmediatamente al cargar la página, lo que puede mostrar bordes rojos en campos vacíos antes de que el usuario interactúe.

Tailwind CSS 4 incorpora user-valid: y user-invalid: que solo se activan después de que el usuario ha interactuado con el campo:

<div class="space-y-1">
  <label class="block text-sm font-medium text-gray-700">Email</label>
  <input type="email" required
         class="w-full px-3 py-2 border rounded-lg border-gray-300
                user-valid:border-green-500 user-valid:ring-1
                user-valid:ring-green-200
                user-invalid:border-red-500 user-invalid:ring-1
                user-invalid:ring-red-200
                focus:outline-none transition-colors"
         placeholder="correo@ejemplo.com">
  <p class="hidden user-invalid:block text-sm text-red-600">
    Introduce una dirección de email válida.
  </p>
</div>

El mensaje de error permanece oculto con hidden y solo se muestra cuando el campo es inválido y el usuario ya ha interactuado con él, gracias a user-invalid:block.

Las variantes user-valid: y user-invalid: se corresponden con las pseudo-clases CSS :user-valid y :user-invalid, que el navegador activa solo tras la interacción del usuario.

Foco visible y accesibilidad de teclado

La variante focus-visible: aplica estilos únicamente cuando el foco proviene del teclado, no del ratón. Esta distinción es fundamental para la accesibilidad, ya que muestra indicadores de foco claros para usuarios de teclado sin añadir anillos innecesarios en clics de ratón.

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg
               focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-blue-600
               hover:bg-blue-700 transition-colors">
  Botón accesible
</button>

Es una práctica recomendada utilizar focus-visible: para los indicadores de foco, reservando focus: para cambios funcionales como el color de borde en campos de formulario.

Variantes ARIA para estados dinámicos

Tailwind CSS 4 soporta variantes ARIA que aplican estilos basándose en los atributos ARIA del elemento, sincronizando la presentación visual con el estado semántico.

<!-- Toggle switch -->
<button role="switch" aria-checked="false"
        class="relative w-11 h-6 rounded-full transition-colors
               bg-gray-300 aria-checked:bg-blue-600">
  <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full
               transition-transform aria-checked:translate-x-5"></span>
</button>

<!-- Pestañas -->
<div role="tablist" class="flex gap-1 border-b border-gray-200">
  <button role="tab" aria-selected="true"
          class="px-4 py-2 text-sm font-medium text-gray-500
                 aria-selected:text-blue-600 aria-selected:border-b-2
                 aria-selected:border-blue-600">
    General
  </button>
  <button role="tab" aria-selected="false"
          class="px-4 py-2 text-sm font-medium text-gray-500
                 aria-selected:text-blue-600 aria-selected:border-b-2
                 aria-selected:border-blue-600 hover:text-gray-700">
    Seguridad
  </button>
</div>

Las variantes aria-checked:, aria-selected:, aria-expanded: y aria-disabled: cubren los estados más comunes de componentes interactivos.

Estilizado de elementos inert y disabled

El atributo HTML inert marca un elemento y sus descendientes como no interactivos. Tailwind CSS 4 incluye la variante inert: para estilizar visualmente estos elementos:

<fieldset inert class="mt-6 space-y-4 inert:opacity-50 inert:pointer-events-none">
  <p class="text-sm font-medium text-gray-700">Opciones premium (no disponible)</p>
  <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
  <button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Activar</button>
</fieldset>

La variante disabled: funciona de forma similar pero es específica de elementos de formulario individuales:

<input type="text" disabled value="Campo deshabilitado"
       class="w-full px-3 py-2 border border-gray-200 rounded-lg
              bg-gray-50 text-gray-400 disabled:cursor-not-allowed">

Formulario de contacto accesible

Un formulario que integra todas las técnicas cubiertas: validación con user-valid:/user-invalid:, foco accesible, field-sizing-content y variantes file:.

<form class="max-w-lg mx-auto bg-white rounded-2xl shadow-lg p-8">
  <h2 class="text-2xl font-bold text-gray-900 mb-6">Contacto</h2>

  <div class="mb-5">
    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
      Nombre <span class="text-red-500">*</span>
    </label>
    <input type="text" id="name" required minlength="2"
           class="w-full px-3 py-2 border border-gray-300 rounded-lg
                  placeholder:text-gray-400
                  user-valid:border-green-500 user-invalid:border-red-500
                  focus:outline-none focus:ring-2 focus:ring-blue-200
                  focus-visible:ring-blue-400 transition-colors"
           placeholder="Tu nombre completo">
    <p class="mt-1 text-sm text-red-600 hidden user-invalid:block">
      El nombre debe tener al menos 2 caracteres.
    </p>
  </div>

  <div class="mb-5">
    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
      Email <span class="text-red-500">*</span>
    </label>
    <input type="email" id="email" required
           class="w-full px-3 py-2 border border-gray-300 rounded-lg
                  placeholder:text-gray-400
                  user-valid:border-green-500 user-invalid:border-red-500
                  focus:outline-none focus:ring-2 focus:ring-blue-200
                  transition-colors"
           placeholder="correo@ejemplo.com">
  </div>

  <div class="mb-5">
    <label for="msg" class="block text-sm font-medium text-gray-700 mb-1">
      Mensaje <span class="text-red-500">*</span>
    </label>
    <textarea id="msg" required minlength="10"
              class="field-sizing-content w-full px-3 py-2
                     border border-gray-300 rounded-lg
                     user-valid:border-green-500 user-invalid:border-red-500
                     focus:outline-none focus:ring-2 focus:ring-blue-200
                     min-h-24 max-h-64 transition-colors"
              placeholder="Mínimo 10 caracteres"></textarea>
  </div>

  <div class="mb-5">
    <label class="block text-sm font-medium text-gray-700 mb-1">Adjunto</label>
    <input type="file"
           class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
                  file:rounded-lg file:border-0 file:bg-blue-50
                  file:text-blue-700 hover:file:bg-blue-100">
  </div>

  <div class="mb-6 flex items-start gap-2">
    <input type="checkbox" id="privacy" required
           class="mt-1 w-4 h-4 rounded border-gray-300 accent-blue-600">
    <label for="privacy" class="text-sm text-gray-600">
      Acepto la política de privacidad
    </label>
  </div>

  <button type="submit"
          class="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg
                 hover:bg-blue-700 active:bg-blue-800
                 focus-visible:outline-2 focus-visible:outline-offset-2
                 focus-visible:outline-blue-600
                 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
    Enviar mensaje
  </button>
</form>

Este formulario asocia cada campo con su <label> mediante for/id, utiliza focus-visible: para indicadores de foco por teclado, activa la validación visual solo tras la interacción del usuario, y el área de texto crece automáticamente con field-sizing-content.