Formularios
Campos react-hook-form listos para usar.
import { FormTextField, FormCurrencyField, FormDateField } from "@fesa/components/forms";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>