Carregando…

Form

Inputs

React Hook Form context wiring — Form/FormField/FormItem/FormLabel/FormControl/FormMessage.

Instalação via CLI

$ npx kikitocn add form

Interno:

@/lib/utilsreact-hook-form@radix-ui/react-slot

Exemplo de uso

FormExample.tsx

import { Form } from "@/components/ui/cn/form/Form";

export function FormExample() {
  return (
    <Form />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`Form`	`FormProvider (react-hook-form)`	—	Alias direto de FormProvider — envolve o form inteiro com o objeto retornado por useForm()
`FormField`	`<TFieldValues>(props: ControllerProps) => JSX.Element`	—	Wrapper de Controller — conecta 1 campo pelo `name` e disponibiliza contexto pro resto da família
`FormItem`	`React.HTMLAttributes<HTMLDivElement>`	—	Container vertical de 1 campo (label + control + description + message)
`FormLabel`	`React.LabelHTMLAttributes<HTMLLabelElement>`	—	Label com htmlFor automático; fica text-danger quando o campo tem erro
`FormControl`	`React.ComponentPropsWithoutRef<typeof Slot>`	—	Injeta id/aria-describedby/aria-invalid no filho real via Slot (asChild) — envolver o Input/Select/etc
`FormDescription`	`React.HTMLAttributes<HTMLParagraphElement>`	—	Texto de apoio — some automaticamente quando há erro (dá lugar ao FormMessage)
`FormMessage`	`React.HTMLAttributes<HTMLParagraphElement>`	—	Mensagem de erro (de formState) ou children — não renderiza nada se ambos vazios
`useFormField`	`() => { id, name, formItemId, formDescriptionId, formMessageId, ...fieldState }`	—	Hook pra qualquer filho customizado consultar o estado/ids do campo atual

Carregando…

React Hook Form + Zod