media contract

Form

Composite of inputs + actions with validation, submission, and error summarisation.

Variants

inline
Single-line form (search bar, simple subscribe)
stacked
Vertical labels + fields (default)
horizontal
Label on the left, field on the right
multi-step
Stepper + per-step validation

Sizes

  • sm
  • md
  • lg

Slots

fields
errors
Top-of-form summary when ≥3 errors
actions
Submit + cancel

Example

<Form onSubmit={handle}><Field><Label>Email</Label><Input /></Field><FormActions><Button variant="ghost">Cancel</Button><Button type="submit">Save</Button></FormActions></Form>

Usage rule

Validate on blur for individual fields, on submit for the whole form.

The full Form contract has 6 more rules, plus the do-not patterns. Get the full recipe.

Related

Get the Form contract in your project.