# FormRenderer

<PageBadges />

`FormRenderer` valide et prépare un schema, crée le moteur de formulaire, rend les champs et
et produit des enregistrements structurés sur submission.

```jsx
<FormRenderer
  schema={schema}
  initialValues={{ name: "Ada" }}
  mode="edit"
  theme="standard"
  colorMode="system"
  labelPosition="top"
  onSubmit={saveRecord}
/>
```

## Propriétés essentielles

| Biens              | Objet                                                                       |
| ------------------ | --------------------------------------------------------------------------- |
| `schema`           | Un form0 schema contenant `form.elements`.                                  |
| `initialValues`    | Valeurs initiales des champs non répétables.                                |
| `initialSnapshot`  | Restaurer les valeurs brutes, l'état répétable et les horodatages ensemble. |
| `overrideValues`   | Appliquer des valeurs faisant autorité sur les valeurs initiales.           |
| `onSubmit`         | Recevez l'enregistrement structuré et les métadonnées submission.           |
| `onSnapshotChange` | Observer les graines et le changement d'utilisateur snapshots.              |
| `mode`             | Démarrez en mode `edit` ou `readonly`.                                      |

## UI appartenant aux consommateurs et État

- `headerAccessory` rend un nœud React, ou une fonction recevant `{ mode }`, entre le résumé
  et former le corps.
- `recordMetadataFields` affiche des métadonnées d'enregistrement en lecture seule. Un descripteur avec `displayValue` jamais
  entre les valeurs du moteur, snapshots ou les valeurs soumises.
- `externalDirty` inclut les modifications propres à l'application dans la confirmation des rejets de superposition.
- `submitBlockedReason` désactive et protège submission tant qu'une exigence externe n'est pas résolue.
- `onSchemaReady` reçoit le schema préparé après que les clés stables ont été assurées.

## Propriétés de l'élément de formulaire

Les propriétés de formulaire standard supplémentaires telles que `id`, `aria-*`, et les gestionnaires d'événements sont transférés à
le rendu `<form>`. N'utilisez pas ce chemin pour la configuration du moteur.

Continuer avec [Valeurs, snapshots et submission](/fr/bindings/react/values-snapshots-submission) ou
[Modes, placement et navigation](/fr/bindings/react/modes-placement-navigation).