Formularios

48 campos react-hook-form con validación integrada, cero dependencias externas y textos en español por props.

import { FormTextField, FormCurrencyField, FormDateField } from "@fesa/components/forms";

La librería de campos unificada del ecosistema (~19.000 LOC que antes existían duplicadas en fesa.com.pa y el starter). Cero dependencias externas para los editores: rich text, firma, crop de imagen, markdown y emoji picker son implementaciones propias.

El contrato base

Todos los campos comparten estas props (BaseFormFieldProps):

Prop	Tipo	Requerida	Descripción
`control`	`Control<TFieldValues>`	sí	El `control` de react-hook-form
`name`	`TName`	sí	Nombre tipado contra el schema
`label`	`ReactNode`	—	Etiqueta del campo
`description`	`ReactNode`	—	Texto de ayuda bajo el campo
`placeholder`	`string`	—	Placeholder
`disabled`	`boolean`	—	Deshabilita el campo
`required`	`boolean`	—	Marca visual de requerido
`tooltip`	`TooltipConfig \| string`	—	Ayuda contextual junto al label
`className`	`string`	—	Clases extra

Uso mínimo

const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) });

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormTextField control={form.control} name="name" label="Nombre" required />
    <FormCurrencyField control={form.control} name="price" label="Precio" />
    <FormSubmitButton>Guardar</FormSubmitButton>
  </form>
</Form>

Los campos por categoría

Básicos (15)

Texto, textarea, número, select, checkbox, radio, switch, slider, toggle, confirmación y condicionales.

Fecha y hora (8)

Fecha y rangos con presets, hora, duración, recurrencia y horarios semanales.

Financieros (4)

Moneda multi-divisa, porcentaje, IBAN y tarjeta de crédito (Luhn propio).

Identidad y red (8)

Teléfono con países, URL, IP, redes sociales, menciones, OTP, contraseña y máscaras.

Contenido (8)

Rich text, markdown, código, JSON, emoji, color, rating y tags — editores propios.

Selección avanzada (6)

Combobox local y async (server actions), multi-select, autocomplete, transfer y árbol.

Multimedia y ubicación (7)

Archivos, avatar, crop en canvas, firma, dirección estructurada y coordenadas.

Estructura (24)

Secciones, wizards, listas repetibles, botones, alertas, skeletons y pestañas de idioma.

Recetas

La página de recetas de formularios cubre: formulario completo con zod + server action, wizard multipaso, listas repetibles y campos condicionales.

Catálogo vivo

El módulo form-demo de fesa.com.pa (/dashboard/form-demo) ejercita los 48 campos en una sola página — úsalo como referencia visual al elegir campo.