Form

Sistema de formulários com validação integrada. Combina React Hook Form + Zod + componentes Form do @workspace/ui. Gerencia labels, mensagens de erro e estados de forma acessível.

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod/v4";
import {
  Form, FormControl, FormDescription,
  FormField, FormItem, FormLabel, FormMessage,
} from "@workspace/ui/components/form";

const schema = z.object({
  name: z.string().min(2, { error: "Mínimo 2 caracteres" }),
  email: z.email({ error: "E-mail inválido" }),
});

function MyForm() {
  const form = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="name"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nome</FormLabel>
              <FormDescription>Nome completo da consultora.</FormDescription>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
}

Anatomia

Estrutura de um campo de formulário.

Nome completoFormLabel

Nome conforme documento.

FormDescription

Ana Paula CarvalhoFormControl

Mínimo 2 caracteres.

FormMessage

Padrão de uso no SYSGO

Fluxo de formulário nos portais.

Etapa	Componente	Descrição
1. Schema	`z.object()`	Definição do schema Zod com regras
2. Hook	`useForm()`	React Hook Form com zodResolver
3. Provider	`Form`	Provê contexto do formulário
4. Campo	`FormField`	Conecta um campo ao controller
5. Layout	`FormItem`	Container do campo com gap
6. Label	`FormLabel`	Rótulo com estado de erro
7. Ajuda	`FormDescription`	Texto auxiliar abaixo do label
8. Input	`FormControl`	Wrapper que conecta aria-attributes
9. Erro	`FormMessage`	Mensagem de erro de validação

API Reference

Prop	Type	Default	Descrição
`Form`	`FormProvider`	—	Provider do React Hook Form (spread do useForm())
`FormField.control`	`Control`	—	Control do useForm()
`FormField.name`	`string`	—	Nome do campo (path no schema)
`FormField.render`	`({ field }) => ReactNode`	—	Render prop com o field controller
`FormItem`	`div`	—	Container do campo (grid gap-2)
`FormLabel`	`Label`	—	Label com estado de erro automático
`FormControl`	`Slot`	—	Wrapper que conecta aria-describedby e aria-invalid
`FormDescription`	`p`	—	Texto auxiliar (text-muted-foreground)
`FormMessage`	`p`	—	Mensagem de erro (text-destructive)