Form

A set of composable layout primitives for building forms: handling spacing, labeling, error display, and section grouping. Optionally pair with the useZodForm hook for Zod schema validation powered by react-hook-form.

Installation

npx dafink-ui add form

Also installs: Input, Button

Requires: zod, react-hook-form, @hookform/resolvers

Demos

We will never share your email.

Manual state, no validation

useZodForm is optional; the layout primitives work with plain useState just as well, for a one-off field that doesn't need a schema.

Mixed field types

Select and Switch already render their own label; wrap them in FormField for spacing and FormSection for grouping. For the optional Textarea, FormLabel adds a muted "(optional)" suffix instead of a hint below the field.

Notification preferences

Controls how often we email you about account activity.

Disabled fields

FormDescription doubles as an explanation for why a field is locked; pair it with disabled instead of just hiding the reason.

Account

Contact sales to change your plan.

Composition

<Form>
<FormSection>
<FormField>
<FormLabel />
<FormControl />
<FormDescription />
<FormMessage />
</FormField>
</FormSection>
</Form>

Props

NameTypeDefaultDescription
classNamestring""Additional classes merged onto the form element.
schemaz.ZodType-useZodForm(schema, options): a Zod schema describing the form shape. Passed to zodResolver internally so validation runs on submit (and on change/blur if configured via options.mode).
optionsOmit<UseFormProps<z.infer<TSchema>>, 'resolver'>undefineduseZodForm(schema, options): any react-hook-form useForm option (defaultValues, mode, etc.) except resolver, which useZodForm sets for you.