Formularios

Una solicitud pública o un checkout pertenece a data-mode="transactional", aunque no haya login. El encabezado promocional puede usar marketing fuera del área de tarea; el formulario no hereda la hero.

Captura y validación

Una etiqueta persistente por campo. Agrupar por significado. Pedir solo datos necesarios y explicar uso si no es evidente. Marcar opcionales. Validar al enviar o al salir cuando ayuda; no castigar cada tecla.

Error con aria-invalid, texto asociado mediante aria-describedby, resumen cuando hay varios errores y foco en el primer campo inválido tras enviar. Conservar valores y permitir corregir. El toast no sustituye al error del campo.

Pasos y progreso

Informar etapa actual, total y próxima acción. Atrás conserva datos. Mostrar guardado o recuperación solo cuando existe de verdad. No confundir porcentaje decorativo con progreso persistido.

Usar lg-step, lg-step-marker y lg-step-count de components.css: tres piezas separadas por 12 px, marcador de 24 px y contador con par de contraste propio. aria-current="step" comunica la selección, además del color. El nombre puede ocupar varias líneas en escritorio. No concatenar número, nombre y pendientes como un único texto sin separación.

<button class="lg-step" aria-current="step" type="button">
  <span class="lg-step-marker" aria-hidden="true">1</span>
  <span>La sociedad</span>
  <span class="lg-step-count" aria-label="2 datos pendientes">2</span>
</button>

lg-choice ofrece estados de opciones mediante aria-checked o aria-pressed. El estado seleccionado conserva texto legible al pasar el puntero. Los controles deshabilitados usan disabled-bg/text, sin atenuar todo el contenido. data-variant="segment" aplica selección neutra y geometría pill a opciones cortas. El consumidor debe conservar la conducta de teclado de su radio, checkbox o grupo.

lg-task-header/footer, lg-task-title/copy y lg-form-panel dan estructura al flujo. El panel contiene el formulario, no cada campo por separado. Etiquetas y ayudas usan 14 px; el texto de entrada mantiene 16 px en móvil para evitar zoom de Safari. Los grupos se separan 20–24 px y las tareas 40 px; etiqueta, ayuda y campo mantienen 8 px. No duplicar el margen exterior en cada párrafo.

Pagos

Moneda, concepto, impuestos/comisiones cuando apliquen y total antes de confirmar. CTA neutro con verbo preciso. Durante envío, evitar duplicación y anunciar procesamiento. Timeout o respuesta incierta: verificar el estado antes de invitar a pagar otra vez. Un pago pendiente no se declara fallido ni completado sin evidencia.

Documentos

Formatos y límite de tamaño antes de seleccionar. Progreso de carga, posibilidad de cancelar, archivo listo/error y reintento por archivo. No afirmar que un documento fue revisado al terminar de subirlo. Datos personales sensibles no se usan en capturas o piezas de marketing.

Paneles 20 px, campos 14 px, botones 44/24 o 52/28. Inter en título, cuerpo, instrucciones e importes. Ejemplo aplicado.

Un solo contorno de foco

En campos, el foco reemplaza visualmente el borde: borde transparente, box-shadow: none, outline: 2px solid var(--lg-focus) y outline-offset: 0. Evitar acumular el borde coloreado, ring de HeroUI y un outline externo. El tamaño del campo no cambia. Los botones y enlaces mantienen su foco de 2 px con offset de 3 px. Los errores conservan texto asociado e indicador semántico, incluso durante el foco.

El adaptador HeroUI aplica esta receta a inputs, textarea y triggers de select. Los selects usan align-items: center e interlínea 1.5 para centrar verticalmente valor e indicador, conservando alineación horizontal izquierda para facilitar lectura.

HTML nativo usa lg-field; los controles compuestos usan lg-field-shell en el contorno único. Sus colores provienen de field-bg/text/placeholder/border. En NextUI v2, poner el shell en inputWrapper o trigger, eliminar el shadow/ring del kit y conservar las asociaciones de etiqueta, ayuda y error. Los errores se indican con aria-invalid o data-invalid y texto persistente.

Preparación asistida por IA

Mostrar una actividad indeterminada vinculada a la tarea: una ficha de documento con la L oficial y acento índigo. Personalizarla con la estructura elegida y la actividad declarada; conservar el nombre propuesto en el panel. Un barrido discreto puede recorrer la ficha completa durante la solicitud, sin animar ni apagar cada texto. Mantener la misma ficha al pasar de reposo a preparación. No usar un contador, porcentaje o checklist completado por temporizador si el servidor no confirma ese avance. La animación solo se activa durante la solicitud y queda estática con movimiento reducido. Mantener nombre accesible, error persistente y opción de reintento.

El panel de propuesta refleja el nombre escrito de forma reactiva, incluido durante preparación, aclaraciones y resultados. Etiquetarlo como nombre propuesto; actualizarlo no confirma disponibilidad ni debe provocar otra llamada de IA. En móvil, conservarlo en el diálogo del asistente. Evitar anuncios de lector de pantalla por cada carácter y permitir nombres largos sin desbordamiento.

En escritorio, repartir entrada y propuesta en dos columnas legibles, sin un formulario angosto rodeado de vacío. En móvil el asistente abre un drawer accesible. Pedir la acción explícita de analizar, conservar Enter para saltos de línea y limitar las aclaraciones a las indispensables. Distinguir borrador de verificación legal y disponibilidad de nombres.