Components

Form

React-hook-form wrapper. FormField binds Controller to a schema; FormItem / FormLabel / FormControl / FormDescription / FormMessage handle layout and errors. Pair with zod schemas for validation.

Updated Jul 10, 2026 by Leonardo Posada

Variants

How this rule will be listed.

const schema = z.object({ name: z.string().min(2) });
const form = useForm({ resolver: zodResolver(schema), defaultValues: { name: "" } });

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField control={form.control} name="name" render={({ field }) => (
      <FormItem>
        <FormLabel>Rule name</FormLabel>
        <FormControl><Input {...field} /></FormControl>
        <FormDescription>How this rule will be listed.</FormDescription>
        <FormMessage />
      </FormItem>
    )} />
    <Button type="submit">Save</Button>
  </form>
</Form>

When to use

  • Any Yuno form with real validation.
  • Multi-field flows where errors must anchor to inputs.

When not to use

  • Read-only key/value displays — use a plain grid.
  • Single-input trivial cases — use Input directly.

Usage

Do
  • Colocate the zod schema with the form for a single source of truth.
  • Use FormMessage below each field for inline errors.
Don't
  • Don't emulate hook-form manually — use the wrapper.
  • Don't hide required labels.