## Form
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- layout: vertical | horizontal | inline, default vertical. Label placement
- size: small | default | large, default default. Control height for every field (24 / 32 / 40)
- fields: FormItem[], default []. name / label / rules / control per row
- requiredMark: boolean | 'optional', default true. Show the required asterisk (or mark optional fields instead)
- validateStatus: error | warning | success | validating, default —. Per-Form.Item validation state — coloured border + help text
- initialValues: object, default —. Seed values
- onFinish: (values) => void, default —. Fires on a valid submit
- disabled: boolean, default false. Disables the whole form
Tokens: colorPrimary, borderRadius, controlHeight, colorBorder, colorError, Form.labelColor.
Use when: 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).