# FormRenderer

<PageBadges />

`FormRenderer` valida y prepara un schema, crea el motor de formularios, renderiza campos y
secciones, y produce registros estructurados en submission.

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

## Propiedades esenciales

| Propiedad          | Finalidad                                                                   |
| ------------------ | --------------------------------------------------------------------------- |
| `schema`           | form0 schema que contiene `form.elements`.                                  |
| `initialValues`    | Valores de campo iniciales no repetibles.                                   |
| `initialSnapshot`  | Restaurar valores sin procesar, estado repetible y marcas de tiempo juntos. |
| `overrideValues`   | Aplicar valores autoritativos sobre valores iniciales.                      |
| `onSubmit`         | Recibe el registro estructurado y los metadatos de submission.              |
| `onSnapshotChange` | Observe la semilla y el cambio de usuario snapshots.                        |
| `mode`             | Comience en el modo `edit` o `readonly`.                                    |

## UI y estado de propiedad del consumidor

- `headerAccessory` representa un nodo React, o una función que recibe `{ mode }`, entre el resumen
  y formar el cuerpo.
- `recordMetadataFields` muestra metadatos de registro de solo lectura. Un descriptor con `displayValue` nunca
  ingresa los valores del motor, snapshots, o los valores enviados.
- `externalDirty` incluye cambios propios de la aplicación en la confirmación de descarte de superposición.
- `submitBlockedReason` desactiva y protege submission mientras no se resuelve un requisito externo.
- `onSchemaReady` recibe el schema preparado después de que se hayan asegurado las claves estables.

## Propiedades del elemento de formulario

Las propiedades de formulario estándar adicionales, como `id`, `aria-*` y los controladores de eventos, se reenvían a
el renderizado `<form>` . No utilice esta ruta para la configuración del motor.

Continuar con [Valores, snapshots, y submission](/es/bindings/react/values-snapshots-submission) o
[Modos, ubicación y navegación](/es/bindings/react/modes-placement-navigation).