Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit parts
Form validation
A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes.
Seats open in 11 days. Want one email that morning?
Anatomy
A group of radios or checks in a fieldset is one entry.
Variants
- One field
- No script: the browser’s own checks
States
- Rest
- Error
- Error, focus
- Fixed
Props and options
| Name | Kind | Description |
|---|---|---|
| required · type · pattern · min · max · minlength · maxlength · step | attribute | The rules, the browser’s own. Nothing is checked that the browser does not check. |
| data-error-required · -type · -pattern · -min · -max · -minlength · -maxlength · -step | attribute | The words for each way a field can fail, saying how to put it right. data-error for any; the browser’s message when there is none. |
| fieldset | element | A group with one name is one entry, named by its legend and linked to its first option. Put its words on the fieldset. |
| validateMessage · validateLabel · validateSummary | function | The rules, pure: the words for a failure, a label without its “*”, and the summary’s heading and lines. |
Usage notes
Press Create workspace with the form empty: the summary takes the focus, and each line takes you to its field. Fix one and watch it leave the list. Try “Lode Ops” as the name, “ana@” as the email, or 0 seats.
Accessibility
- Built on the constraint validation API, so the rules are the browser’s and the same ones hold with the script off.
- On a submit that fails, the summary takes the focus: a group named by its heading (“3 fields need attention”), then a list of links, each “Label: what to do”. A link moves the focus to its field with the label in view.
- Once tried, a field in error is checked as you type and clears the moment it is right; a field that was right is checked when you leave it, so nobody is told off mid-word.
- The lamp beside each error and the red ring are a second signal; the words are always there.
- With reduced motion the summary appears without rising and a link jumps to its field instead of gliding.
Related parts
Alert
A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
Combobox
A field that filters a long list as you type. It starts as a plain select, so it posts with the form and works without a script; then the options card slides out of a slot under the well, the letters that match print heavier and the chosen option’s lamp is lit. Several choices sit in the well as tags.