# AutoForm

> A form built from a form hook — one control per field, chosen from each field's real datatype.

`<AutoForm>` renders one control per field. The fields come from the form's value keys; **each control is chosen from the field's datatype**.

```tsx title="app/airports.tsx"
<AutoForm form={useUpdateAirportForm({ formValues: { code: "", name: "", active: true } })} />
```

## Datatype → control

That datatype is real: the form hook validates against the write JSON Schema, which carries `type`, `format`, `enum`, `maxLength` and the compiler's `x-rastack-relation` FK marker. `getFieldStructure` surfaces all of it:

| Schema | FormType | Control |
| --- | --- | --- |
| `boolean` | `boolean` | checkbox |
| `integer` / `number` | `number` | number input |
| `string` | `text` | text input (with `maxLength`) |
| `string, format: date` | `date` | date picker |
| `string, format: date-time` | `datetime` | datetime picker |
| `string, format: email` | `email` | email input |
| `string, format: uri` | `url` | url input |
| `enum: [...]` | `select` | dropdown (options from the enum) |
| `x-rastack-relation` | scalar + `relation` | scalar input; override to a picker |

> **Note:** This enrichment is not auto-form-only — **any** code reading `useForm().getFormField(name)` now gets `{ type, maxLength, options, relation, nullable, format }`.

## Overriding fields

Submit, validation, disabled/loading state and touched-gated errors are all wired from the hook. Override any field — label, control, options for an FK picker, or a fully custom render:

```tsx title="app/terminals.tsx"
<AutoForm
  form={useUpdateTerminalForm({ formValues: { label: "", airport: 0, active: true } })}
  columns={2}
  fields={[
    "label",
    { name: "airport", label: "Airport", input: "select", options: airportOptions },
    { name: "active", label: "In service" },
  ]}
  onCancel={close}
/>
```

## Headless

```tsx title="headless"
const model = useAutoForm(form, { exclude: ["internalId"] });
// { fields: [{ name, id, label, input, field, options? }],
//   submit, reset, canSubmit, isSubmitting, errors }
```

---

_Source: [https://reactapistack.com/docs/auto-form](https://reactapistack.com/docs/auto-form) · Full docs as one file: [llms-full.txt](https://reactapistack.com/llms-full.txt)_