Form

Un formulaire décrit par ses champs.

Il ne connaît aucune bibliothèque de formulaires : il reçoit un FormAdapter, ou en monte un lui-même. C'est ce qui lui permet de servir un projet sous react-hook-form et un projet sans rien, avec le même code.

Installation

sia-ui add form

Ou par le paquet, sans rien copier :

import { Form, formFieldNames } from "@sia-ui/react-web";

Utilisation

<Form
  columns={2}
  defaultValues={{ nom: "", email: "" }}
  validate={createValidator({ nom: [required()], email: [required(), email()] })}
  onSubmit={(values) => api.post("/clients", { body: values })}
  fields={[
    { name: "nom", label: "Nom du client", required: true },
    { name: "email", label: "Adresse e-mail", type: "email", required: true },
  ]}
/>

Props de Form

Prop	Type	Défaut	Description
* fields	FormEntry[]	—
actions	ReactNode	—	Remplace entièrement la barre de boutons.
alertProps	Partial<Omit<AlertProps, "children" | "onDismiss">>	—	Les props de l'Alert qui annonce un échec d'envoi. Sans children, le message d'échec, ni onDismiss, qui l'efface.
asyncValidationDelay	number	400	Millisecondes sans frappe avant une vérification validateAsync. 400 par défaut.
className	string	—
clearText	ReactNode	—	Le texte du bouton de remise à zéro. Par défaut, reset de la locale.
columns	number	1
defaultValues	FormShape	—
fieldProps	Partial<Omit<FieldProps, "name" | "value" | "defaultValue" | "onValueChange" | "error" | "onBlur" | "success" | "field" | "message">>	—	Les props communes à tous les champs — orientation, libellé « facultatif », controlProps. Chaque champ déclaré dans fields l'emporte sur elles. Sans ce que le formulaire branche lui-même : le nom, la valeur, le changement et la sortie de champ (field), ni les messages d'erreur et de validation, qui sont propres à chaque champ.
form	FormAdapter<TValues>	—	L'adaptateur de formulaire. Sans lui, un useLocalForm est monté en interne à partir de defaultValues, validate et onSubmit. Avec lui — react-hook-form, Formik, votre propre magasin — le formulaire ne fait plus que rendre.
loading	boolean	false
onSubmit	(values: TValues) => any	—	L'envoi. Rendre des erreurs par champ les pose sous les champs. Lever une erreur l'affiche dans une alerte en tête des boutons — et une HttpError de @sia-ui/api voit en plus ses erreurs de champ posées à leur place.
requireDirty	boolean	true	Désactive l'envoi tant que rien n'a changé.
requireValid	boolean	true	Désactive l'envoi tant qu'une erreur est en vigueur.
showClear	boolean	false
spinnerProps	Partial<Omit<SpinnerProps, "label">>	—	Les props du Spinner d'une vérification validateAsync en cours. Sans label, repris de la locale comme le texte qui l'accompagne.
submitProps	ButtonProps	—	Les props du bouton d'envoi. disabled s'ajoute aux conditions du formulaire au lieu d'être remplacé par elles.
submitText	ReactNode	—	Le texte du bouton d'envoi. Par défaut, save de la locale.
validate	FormValidator<TValues>	—	La validation. Un schéma Zod s'y branche en cinq lignes.

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.