Form Layout
How a whole form is arranged: the space between fields, sections with a title, fields side by side, a settings layout with the sections' titles beside their fields, questions that appear after a choice, and the buttons at the end. Specification: docs/components/form-layout.md
Basics
A .canon-form (on the <form>) stacks what it holds a step apart: fields, fieldsets, repeaters, rows of fields, and the actions at the end, a larger step under the rest. Fields are as wide as the form; the form is as wide as its place.
Sections
A .canon-form-section (<section>, named by its title with aria-labelledby) starts with a .canon-form-section-header: a title (a heading at the page's level) and an optional description. Sections are a larger step apart, divided by a line.
Settings layout
data-layout="aside" on the form: each section's header in a side column (a third of the form, --canon-form-aside), its fields beside it. For settings pages, read section by section. When the form is narrower than 40rem, the sections stack as above.
Rows
A .canon-form-row puts fields side by side, their boxes in line whatever their labels, descriptions and messages. Columns share the width equally; --canon-form-columns sets them like grid-template-columns. When the form is narrower than 24rem, the row stacks.
Narrow
Reveal
A <fieldset class="canon-form-reveal"> right after a choice shows its fields while that choice is checked: a radio's follow-up question, a checkbox's details. canon.js disables it while it is hidden, so its fields are neither checked nor sent. Without JavaScript the hidden fields are still sent, so don't make them required unless the server checks which choice was made.
Sticky actions
data-sticky on the actions of a long form: they stay at the bottom of the window (here, of the scrolling box) while the fields scroll under them.
Size
data-size on the form or a container sizes its fields and its steps.
Edge cases
Right to left: the aside column is on the right, and a reveal hangs from the choice on the right.