Form Element

Paquete: @tiendana/web-foundation

Contenedor de campo de formulario con etiqueta flotante, estados de validación y soporte para grupos de input. Es la capa CSS sobre la que trabaja tdn-form-element en Angular, pero también se puede usar con HTML puro y clases.

Características

✅ Etiqueta flotante - La etiqueta sube sobre el borde cuando el campo está enfocado o tiene valor
✅ Estados como modificadores BEM - --focus, --active, --invalid, --dirty, --disabled, --pending
✅ Estilo de error - Borde, etiqueta y halo rojos cuando el campo es inválido y fue modificado
✅ Input group - Prefijos y sufijos con .input-group y .addon
✅ Indicador de carga - Spinner mientras se ejecuta una validación asíncrona
✅ Variantes - .document-input y .cellphone para campos con selector acoplado
✅ Modo plain - Desactiva la etiqueta flotante

Demo

Cargando demo...

Ver código

Con Angular no escribes las clases

tdn-form-element calcula estas clases desde el control que contiene y las aplica al host. Solo debes escribirlas a mano si usas HTML sin Angular.

Estructura

Los hijos directos de .tdn-form-element que reciben el estilo del campo son input, textarea, select, .form-control, .tdn-select, .tdn-input-date y .tdn-input-file. La etiqueta debe ser el <label> hijo directo y debe ir antes del control: el selector que oculta el placeholder mientras la etiqueta está abajo es label + input.

<div class="tdn-form-element">
  <label for="field">Etiqueta</label>
  <input id="field" type="text">
  <div class="errors">Mensaje de error</div>
</div>

Modificadores de estado

Clase	Efecto
.tdn-form-element--focus	El control tiene el foco. La etiqueta sube al borde superior (top: -10px) con el fondo --input-bg
.tdn-form-element--active	El control tiene valor. Mismo efecto de etiqueta flotante que --focus
.tdn-form-element--invalid	El control tiene errores de validación. Por sí sola no pinta nada: el estilo de error requiere también --dirty
.tdn-form-element--dirty	El usuario modificó el valor
.tdn-form-element--disabled	La etiqueta toma --input-bg-disabled como fondo y --input-font-color-disabled como color
.tdn-form-element--pending	Muestra un spinner a la derecha del campo (ver más abajo)

tdn-form-element también agrega --valid y --touched al host; web-foundation no define estilos para ellos, quedan disponibles para tus propias reglas.

Las clases cortas ya no aplican

Los estados se escriben siempre con el prefijo completo (.tdn-form-element--invalid). Reglas como .tdn-form-element.invalid.dirty, .disabled o .pending no tienen efecto en la hoja actual.

Estilo de error

El error se muestra cuando el campo cumple .tdn-form-element--invalid y .tdn-form-element--dirty:

• El borde del control y del .input-group pasa a --input-error-border-color.
• La etiqueta se pinta en rojo.
• Si además el campo está en --focus o --active, el control y el .input-group reciben un halo de 4px con --input-error-shadow-color.
• El bloque de mensajes ([tdnErrors] o .errors) usa texto rojo de 10px, alineado a la derecha.

Esta regla vive dentro del modo con etiqueta flotante; con el atributo plain no se aplica.

Cargando demo...

Ver código

Estado pending

Con .tdn-form-element--pending se dibuja un ::after con el spinner input-loader.svg anclado a la derecha del campo. Angular lo activa mientras corren validadores asíncronos.

Propiedad CSS	Default	Descripción
--form-element-pending-loader-size	20px	Tamaño del spinner
--form-element-pending-right-pos	8px	Separación desde el borde derecho

Cargando demo...

Ver código

Input group

.input-group envuelve el control junto a uno o más .addon (iconos, prefijos). El borde y el fondo pasan al grupo, y los iconos dentro de .addon toman --input-icon-color.

Cargando demo...

Ver código

Modo plain

El atributo plain desactiva la etiqueta flotante: la etiqueta queda sobre el control como un <label> normal y el placeholder siempre es visible.

<div class="tdn-form-element" plain>
  <label for="notes">Notas</label>
  <textarea id="notes" placeholder="Escribe una nota"></textarea>
</div>

Variantes

Clase	Uso
.document-input	Campo de documento: .input-group con un .tdn-select de tipo de documento como addon y un .dv para el dígito de verificación. Fija --tdn-select-dropdown-width: 200px
.cellphone	Campo de teléfono con selector de indicativo como addon. Fija --tdn-select-dropdown-width: 300px

Ambas variantes fijan --input-min-height y --input-max-height en 36px y un min-width de 150px. El ancho de la lista del selector se explica en Select.

Propiedades CSS personalizadas

Se declaran en :root; puedes sobrescribirlas en un ancestro para tematizar un formulario.

Propiedad	Valor por defecto	Descripción
--input-focus-color	var(--color-natura)	Borde de foco de tdn-input-tag y tdn-input-time (los controles de .tdn-form-element no lo usan)
--input-focus-shadow-color	rgba(var(--color-natura-rgb), 0.2)	Halo de foco de tdn-input-tag y tdn-input-time (los controles de .tdn-form-element no lo usan)
--input-error-shadow-color	rgba(253, 78, 78, 0.26)	Halo del estado de error
--input-error-border-color	#fd4e4e	Borde del estado de error
--input-border-radius	9px	Radio del control
--input-font-size	14px	Tamaño de texto
--input-min-height / --input-max-height	36px / 40px	Alto del control
--input-border	#c3c3c3	Color del borde en reposo
--input-bg	var(--color-trust)	Fondo del control y de la etiqueta flotante
--input-bg-disabled	#f3f3f3	Fondo de la etiqueta deshabilitada
--input-font-color-disabled	#141414	Color de la etiqueta deshabilitada
--input-icon-color	#7d7d7d	Color de los iconos de .addon

Contenedores de formulario

Clase	Descripción
.form-wrapper	Tarjeta de formulario: fondo --bg-1dp, padding --spacing-md, margen de 16px
.form-actions	Barra de acciones: fondo --bg-1dp, flex, con .errors en rojo

Accesibilidad

• Asocia siempre la etiqueta con for e id: la etiqueta es pointer-events: none mientras está abajo, por lo que el clic llega al control.
• El color rojo del error no debe ser el único indicador: incluye siempre el texto del mensaje en el bloque .errors.

Ver También

• tdn-form-element - Componente Angular que aplica estas clases
• Select - Selector con lista desplegable
• Datepicker - Campo de fecha con calendario