Forms
A form asks for a few things, in a sensible order, and tells people straight away what’s wrong and how to fix it. Jewel forms are one column of hairline fields, grouped under small labels.
- JS
js/components/form.js
01 — Example
Contact form
Press Send with the required fields empty to see validation; fill them in to see the busy state and the success message. Nothing is sent.
02 — Anatomy
The parts
| Part | What it does |
|---|---|
form.form[data-component="form"][novalidate] | The form. novalidate hands validation to form.js, which shows Jewel’s own messages. |
.form__group and .form__legend | A fieldset with a hairline above and a small label, for each group of related fields. |
.form__row--2 | Two short fields side by side from 48rem; one column on phones. |
.form__error, .form__status | The form’s own messages, styled as notices. |
.form__actions | Buttons, right-aligned, with the main action last. |
jewel:submit | Fires on a valid submit with { form, formData, waitUntil(promise) }. The button shows data-busy-label until the promise settles, then the form shows data-success or the error. |
03 — Built from
04 — Guidelines
Use it for
- One column, in the order people think of the answers.
- Labels above fields; mark either the required or the optional ones, whichever is fewer.
- Validate on submit, then as people fix each field.
- A button label that says what happens: Send, Post, Save changes.
Avoid
- Asking for anything you don’t need.
- Disabling the submit button until the form is valid. People can’t tell why.
- Clearing what people typed after an error.