Form

Composants de formulaire construits sur react-hook-form et Zod. Fournit une gestion automatique des labels, descriptions, messages d'erreur et accessibilite (aria).

Preview

Formulaire avec validation Zod. Essayez de soumettre le formulaire vide pour voir les messages d'erreur.

Architecture

Le systeme de formulaire repose sur un ensemble de composants imbriques qui communiquent via le contexte React.

<Form>                    {/* = FormProvider de react-hook-form */}
  <FormField>             {/* Connecte un champ au formulaire via Controller */}
    <FormItem>            {/* Conteneur avec espacement (space-y-2) */}
      <FormLabel />       {/* Label avec lien automatique via htmlFor */}
      <FormControl />     {/* Slot qui transmet id, aria-describedby, aria-invalid */}
      <FormDescription /> {/* Texte d'aide sous le champ */}
      <FormMessage />     {/* Message d'erreur (affiche automatiquement) */}
    </FormItem>
  </FormField>
</Form>

Props

Form

Prop	Type	Default	Description
...methods	UseFormReturn	—	Resultat de useForm() de react-hook-form. Passe via spread : <Form {...form}>.

FormField

Prop	Type	Default	Description
control	Control	—	L'objet control retourne par useForm().
name	string	—	Nom du champ dans le schema. Doit correspondre a une cle du schema Zod.
render	({ field }) => ReactNode	—	Fonction de rendu qui recoit les props du champ (value, onChange, onBlur, ref).

FormItem

Prop	Type	Default	Description
className	string	—	Classes CSS additionnelles. Par defaut : space-y-2.

FormLabel

Prop	Type	Default	Description
className	string	—	Classes CSS additionnelles. Devient rouge (text-destructive) en cas d'erreur.

FormControl

Prop	Type	Default	Description
children	ReactNode	—	L'input ou le composant de formulaire. Recoit automatiquement id, aria-describedby et aria-invalid.

FormDescription

Prop	Type	Default	Description
children	ReactNode	—	Texte d'aide affiche sous le champ. text-sm text-muted-foreground.

FormMessage

Prop	Type	Default	Description
children	ReactNode	—	Contenu de remplacement. Par defaut, affiche automatiquement le message d'erreur du champ. text-sm text-destructive.