Forms

Forms are where bookings actually happen, so they deserve care. This pattern covers how to lay out fields, handle validation, and place actions using the base Input, Button and Alert components.

Example

Layout

• One column. Stack fields vertically. Multi-column forms slow people down and break on small screens.
• Group related fields. Use headings or spacing to separate sections such as "Traveller details" and "Payment".
• Label every field. Persistent labels above the field; never placeholder-only.
• Order logically. Follow the order people expect — name before passport, contact before payment.

Validation

Validate at the right moment and explain clearly how to fix problems.

• Validate a field on blur, once the person has finished with it — not on every keystroke.
• On submit, validate everything, move focus to the first error, and summarise with an Alert if several fields failed.
• Error messages name the fix: "Enter a valid email address", not "Invalid".

Actions

• Place the primary action (Wow Yellow) at the bottom-left of the form, aligned with the fields.
• Use at most one primary action. Secondary actions ("Save and exit") use the secondary or ghost variant.
• Avoid a "Reset" button — accidental data loss is rarely worth it.

Usage

Accessibility

• Each field uses the Input component, so labels, help text and errors are correctly associated for screen readers.
• On submit failure, move keyboard focus to the first invalid field (or the error summary Alert) so the problem is announced.
• Mark required fields in the label, and don't rely on the asterisk alone — state the requirement in help text where it matters.
• Ensure the form is fully operable by keyboard, in a logical tab order.