# Form
> Generated from form.contract.json — do not edit by hand.

A labelled, validated set of fields — sign-in, settings, create dialogs — rendered through the shared Form.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `layout` | vertical | horizontal | inline | `vertical` | Label placement |
| `size` | small | default | large | `default` | Control height for every field (24 / 32 / 40) |
| `fields` | FormItem[] | `[]` | name / label / rules / control per row |
| `requiredMark` | boolean | 'optional' | `true` | Show the required asterisk (or mark optional fields instead) |
| `validateStatus` | error | warning | success | validating | `—` | Per-Form.Item validation state — coloured border + help text |
| `initialValues` | object | `—` | Seed values |
| `onFinish` | (values) => void | `—` | Fires on a valid submit |
| `disabled` | boolean | `false` | Disables the whole form |

## Visual standard (measured)
- Controls: height 32 · radius 8 · 1px #E3E3E3 border
- Label: #4A4A4A, above the field (vertical layout)
- Submit: primary Button #6A1EBB
- Error: #F5222D border + message below the field
- Item gap: 20px between items
- Size: control height 24 (small) · 32 (default) · 40 (large)
- Validation: error / warning / success — coloured border + help text

## When to use
- **Form** — two or more related fields submitted together, with validation
- **a single Input/Select** — one value that applies on its own — no submit step
- **Settings pattern** — a settings surface — see the Settings pattern for grouping and spacing

Label every field with a noun phrase above the control (vertical layout reads best on narrow surfaces). Validate on blur and on submit; show the error below the field with how to fix it. One primary submit per form.