Campos y validación

Componentes visibles

El ejemplo compone un formulario real: CrmSectionCard, CrmCompactInput de texto, correo y número, un campo deshabilitado y CrmCompactTextarea con CrmFieldHint. Pulsa Validar formulario sin nombre para ver el error.

Debajo, CrmFieldShell agrupa un CrmReadOnlyChip y la acción CrmFieldEndCreateButton; el botón genera otra referencia local. CrmColorField abre las muestras de color y su editor personalizado.

Cuándo usar

Compón formularios con etiquetas persistentes y ayudas concretas. CrmFieldShell agrupa controles más complejos; sus hijos deben conservar su propia etiqueta accesible.

Propiedades y variantes

Estados y accesibilidad

Los errores explican cómo corregir el campo; las etiquetas siguen visibles. Valida también en servidor en formularios reales.

Evitar

No uses placeholders como única etiqueta, colores de error sin texto ni controles nativos paralelos a estas primitivas.

Geometría compartida

Inputs, textareas, selectores y sus opciones usan --vee-radius-control (14 px). Las secciones usan --vee-radius-card (24 px), los desplegables --vee-radius-panel (16 px), y los chips de una línea --vee-radius-pill. El ejemplo incluye un selector junto a los inputs para comparar sus esquinas.

CrmNativeInput admite appearance="dark" para contraseñas y otros tipos de input nativo encapsulado. La variante usa exclusivamente el control oscuro, sin mezclar sombras ni estados hover/focus del control claro. Conserva aria-label para el nombre accesible. La demo de modales muestra esta variante sobre una página clara mediante Abrir modal oscuro.

Acabado glass global

Inputs, contraseñas, textareas, selectores y multiselectores comparten glass: reflejo diagonal tenue, borde suave, transparencia, blur y sombra exterior discreta. En modo claro, fondo casi blanco y borde gris tenue; el importe usa verde claro. En oscuro se mantiene el fondo profundo; el reflejo mantiene poca variación para evitar una franja de degradado visible. CRM_GLASS_INPUT_SURFACE_CLASS_NAME y el alias histórico CRM_INSET_INPUT_SURFACE_CLASS_NAME utilizan vee-glass-control. El baseline también cubre RizzUI directo y campos nativos existentes.

Los tokens --vee-glass-fill, --vee-glass-fill-hover, --vee-glass-border, --vee-glass-reflection y --vee-shadow-glass tienen variantes claras y oscuras. El foco de teclado refuerza el borde existente en slate, sin contorno exterior duplicado ni halo celeste; abrir con el mouse no añade un contorno; errores de RizzUI y aria-invalid conservan borde rojo; campos deshabilitados se atenúan. No anides efectos: los inputs y la moneda dentro de vee-glass-composite son transparentes.

Los dropdowns (vee-glass-menu y listas RizzUI) tienen mayor opacidad y blur para conservar legibilidad sobre el contenido. Los campos especializados con color semántico conservan su significado; las regiones de agrupación inset y las acciones primarias conservan sus roles.

Campos de tarjetas Kanban

CardFieldContent layout="compact" muestra icono y etiqueta gris de 10 px arriba, alineados a la izquierda, y el valor debajo a todo el ancho disponible. Los textos no reservan espacio lateral para un icono dentro del valor. Responsable y contacto mantienen el avatar y la etiqueta debajo del nombre dentro del control. Edición, menús, nombres accesibles y la preferencia de ocultar etiquetas se conservan. La variante above mantiene otros formularios.

En Kanban, los textos libres son planos (sin borde, reflejo ni padding lateral), incluso durante la edición, y la etiqueta queda inmediatamente encima. Los selectores centran verticalmente su valor; el importe se alinea a la izquierda. En campos con avatar, nombre y etiqueta interior no tienen margen entre líneas.

Los campos con avatar (responsable y contacto asociado) se presentan sin borde, fondo glass ni sombra, también al abrirlos. Mantienen avatar, valor y etiqueta interior, cursor de interacción y foco de teclado mediante subrayado neutro.

CrmMoneyInput admite tonos semánticos income, expense, internal-transfer, external-transfer y reconciliation. El monto y la moneda comparten una sola superficie glass de color estable en reposo, hover y foco; egresos usan rojo oscuro desaturado rgba(82, 43, 56, 0.94) con texto blanco, incluso cuando la moneda está fijada por la cuenta. Los controles internos son transparentes y no agregan un segundo borde de foco. La demo incluye el egreso con moneda fija.

El botón de calculadora junto al monto comparte el tono glass semántico, sin borde visible, con icono de 24 px (28 px en escritorio). La envolvente del egreso usa un tinte gris rojizo tenue para integrar el conjunto.

CrmMoneyCalculatorModal usa PlatformFormModal con el título «Calculadora», sin textos auxiliares. Muestra el símbolo de moneda una sola vez junto al número principal, historial únicamente cuando hay una operación pendiente y teclas de 20–24 px. Aplicar conserva el redondeo a dos decimales.

Los buscadores con prefijo usan CrmCompactInput y una sola capa glass en el contenedor RizzUI. El input interno es transparente, sin borde, outline ni sombra, incluso en foco. Al hacer clic o enfocar el campo se mantiene el borde sutil del material; no aparecen aros adicionales. La demo incluye el buscador con icono.

Los campos y dropdowns comparten fondo blanco al 92 % (98 % en hover) en modo claro mediante --vee-glass-fill y --vee-glass-fill-hover. Inputs, textareas, selectores y multiselectores se distinguen así del fondo gris de sus tarjetas, conservando reflejo, borde y blur glass. CrmCompactInput mantiene el mismo acabado. El modo oscuro y los controles con color semántico conservan sus tonos.

CrmMoneyInput permite currencyOptions para reutilizar el selector integrado con las monedas del tenant. Sin opciones explícitas conserva PEN/USD. Cada opción define código y etiqueta; nunca se interpreta una moneda personalizada como dólares. La demo incluye PEN, USD y EUR.

Fecha y hora en tarjeta

PlatformDateTimeField muestra una tarjeta cuadrada con el día destacado, el mes y un reloj con la hora. El clic o teclado abre PlatformFormModal, con calendario y campo Hora. Cancelar y cerrar descartan el borrador; Listo aplica el valor al formulario. La demo incluye edición y consulta deshabilitada.

Recibe value={{ date: '2026-10-18', time: '14:30' }} y onChange. date es una fecha civil YYYY-MM-DD; time es HH:mm o null para registros que no tienen hora. showTime={false} permite una fecha sin hora. minDate, maxDate, disabled, label, locale y className permiten reutilizarlo. El año completo permanece en el nombre accesible y el modal; la tarjeta usa el día y el mes.

La selección de calendario conserva el día civil en cualquier zona del navegador. La conversión a un instante y su persistencia pertenecen al consumidor: no inferir una hora de negocio desde la fecha de creación. getLocalDateTimeFieldValue convierte un instante a valor civil en una zona explícita. El formato y la validación se comparten en date-time-value.ts.

Labels globales compactos

Los encabezados de los campos usan 12 px, peso normal (400) y altura de línea de 16 px, la misma escala y gris atenuado que las ayudas. El token --vee-field-label-color usa --vee-text-muted y se adapta al tema. Los tokens --vee-field-label-font-size, --vee-field-label-font-weight y --vee-field-label-line-height definen el contrato global en claro y oscuro. CRM_COMPACT_LABEL_CLASS incorpora vee-field-label; lo reutilizan inputs, textarea, selectores, campos compuestos, fecha y dinero. El baseline también cubre los labels de los controles RizzUI directos, incluidos los usados por DatePicker.

El ajuste cambia las etiquetas, sin modificar los valores de los campos ni los textos de las opciones, checkboxes o botones. La demo compara el input compartido, un Input RizzUI directo, selectores, dinero y la tarjeta de fecha.

CrmFieldLabel compone texto e icono decorativo de 12 px con separación de 6 px. CrmCompactInput, CrmCompactTextarea, CrmFieldShell y CrmMoneyInput aceptan labelIcon; el texto sigue siendo el nombre accesible del control. PlatformDateTimeField incluye calendario por defecto y admite reemplazarlo con labelIcon. Los iconos heredan el gris del label; los iconos de las opciones conservan sus colores semánticos. La demo muestra ejemplos en texto, descripción, monto, fecha y campo compuesto.

CrmFieldShell y PlatformDateTimeField permiten hideLabel para ocultar visualmente la etiqueta conservando su contexto accesible. Los consumidores sin encabezados visibles deben mantener nombres accesibles en cada control y placeholders explicativos.

Selector de hora

PlatformTimeField reemplaza el picker nativo de hora en PlatformDateTimeField. Presenta un solo campo glass con reloj, etiqueta interior y hora en formato de 12 horas. Su desplegable reutiliza CardSelectChip: lista desplazable de horarios cada 30 minutos y botones AM/PM a la derecha. La selección actual conserva sus minutos exactos y también aparece en la lista si no coincide con media hora.

El campo «Hora exacta» permite escribir hh:mm y aplicar con Enter o «Aplicar hora». Las flechas, Inicio/Fin y Escape permiten navegar y cerrar el menú. AM/PM usa la acción primary global para su selección. Al elegir un horario se cierra el desplegable; cambiar AM/PM lo mantiene abierto. Medianoche se muestra como 12:00 AM y mediodía como 12:00 PM.

Recibe value (HH:mm de 24 horas o null), onChange, label, disabled y className. La presentación de 12 horas se convierte al mismo valor civil de 24 horas, sin cambiar zona horaria ni fecha. Cancelar el modal de fecha/hora sigue descartando todos los cambios. La demo Campos incluye edición y deshabilitado.

Los menús compuestos de CardSelectChip pueden declarar dropdownRole="dialog" cuando renderDropdownContent combina listas, acciones y campos; los selectores simples conservan listbox. El selector de hora usa este modo para AM/PM y hora exacta.

Las muestras de color globales sustituyen el antiguo celeste brillante por verde petróleo (#0f766e), con más contraste sobre los fondos claros del producto. La demo de Color del proyecto permite comprobar esta muestra.

PlatformDateTimeRangeField reúne el día e Inicio/Fin dentro de una tarjeta compacta. La duración aparece centrada entre ambas horas como «1h» o «45 min», interrumpiendo una línea horizontal gris suave (slate-300 al 80%, slate-600 en oscuro) alineada con el centro del texto. Cada hora abre un modal independiente con Cancelar/Listo; Fin permite indicar el día siguiente. Admite hideLabel, límites de fecha, estado deshabilitado y duración efectiva suministrada por el dominio para zonas horarias. PlatformDateTimeField admite embedded para componer la fecha sin duplicar superficies. La demo Campos permite editar el intervalo.

La variante compact de PlatformDateTimeField muestra día destacado y mes al lado en una tarjeta horizontal de 56 px de alto. Con showTime={false} y allowClear sirve para fechas opcionales: «Sin fecha» en el modal elimina el valor. Conserva límites, nombre accesible y edición con Cancelar/Listo. La demo Campos incluye esta variante.

fullWidth permite que la tarjeta compacta ocupe el ancho de su contenedor. En selectores de personas, reutilizar la presentación compartida de avatar, nombre y segunda línea de contexto (rol para socios, correo para cuentas). En HR, PartnerSelectField admite label para seleccionar también al organizador con la misma presentación.

Campos de tarjetas y detalle

El panel de leads reutiliza CardFieldContent y LeadCardFieldChip, los mismos componentes del Kanban, con edición según el tipo. labelAction permite colocar un asa o acción accesible junto a la etiqueta; el control conserva su superficie y su nombre accesible. Las asas se muestran al hover del label o al foco de teclado y permanecen visibles en dispositivos táctiles. Las secciones muestran su asa al hover/foco del título, abiertas o cerradas, sin activar un modo de organización; sus campos se distribuyen en dos columnas en escritorio. La flecha de colapso queda al extremo derecho, también en el historial.

En campos de identidad, preserveLeading conserva el avatar dentro del control aunque haya una etiqueta exterior. Es la variante del responsable y contacto en el panel de leads; mantiene UserAvatar y los selectores compartidos.

Las cabeceras del panel usan el estilo compacto de Tareas (mayúsculas, tracking y gris atenuado) y subtítulos para contadores. Los bloques iniciales se ocultan y recuperan desde Configurar panel; no se eliminan. Estado y responsable usan la misma superficie y altura mínima; responsable conserva avatar, nombre y correo.