Field
A form control with its label, description and messages: every box (text input, select, combobox, date, color, swatches, code, slider…) sits in a field the same way. Specification: docs/components/field.md
Basics
Inside a field, text inputs always have a placeholder attribute: empty, or with an example value.
Every control
Each box in a field: the label, its description and the message work the same way for every control. A control that is two inputs (a range) or a set of choices (swatches) names a group: the label is a <span id> and the field (or the swatches) is a role="group" labelled by it.
As on your ID.
At least 12 characters.
A sentence or two.
Where you live.
Who works on it.
Any number.
The first working day.
Check-in and check-out.
Weeks start on Monday.
Up to 50.
Used on buttons.
Shown on the tag.
Sent to your phone.
Applies to every room.
Per night.
With an error
A danger message under the box, aria-invalid="true" on the control and the message in its aria-describedby.
As on your ID.
At least 12 characters.
A sentence or two.
Where you live.
Who works on it.
Any number.
The first working day.
Check-in and check-out.
Weeks start on Monday.
Up to 50.
Used on buttons.
Shown on the tag.
Sent to your phone.
Applies to every room.
Per night.
Description and message
Letters, numbers and dashes only.
We'll send the invite here.
Required and optional
Add native required to the input and the label shows the marker. "(optional)" is your own text, inside the label so it is read with the name. Every part of a label: Label.
Label beside the box
data-label="start" on a form or any container puts every field's label beside its box, in a column a third wide (--canon-label-width), level with the box's first line. Descriptions stay under the label; messages and counters go under the box. A Fieldset's legend takes the label column, and a single checkbox or switch lines up with the boxes. With less than 32rem of room the labels go back above: drag the frame's corner to try it. On one field, data-label="start" always applies; data-label="above" inside puts a field back. Suited to forms people edit and scan (account details, settings, a record's properties); a form filled in once, top to bottom, reads faster with labels above.
Box anatomy
Trailing actions
Buttons powered by canon.js: clear (hidden while the box is empty), show password and copy.
A select beside the value
A Select box in the text input (here, a country code) is a control of its own: the label names the number, and the select needs its own name.
Label action and info
States
Type something that isn't an email address in the last field and leave it: the field shows the browser's message as an error.
Managed by your administrator.
Select
A native <select> in the box; the arrow is drawn for you.
Select: customizable picker
On computers with a mouse, the list opens as a styled dropdown; touch devices keep the native picker. Options can hold markup (a label and a description). Add <button><selectedcontent></selectedcontent></button> first in the select to show only the chosen option's label when it is closed. Browsers without support show the native picker.
Textarea
A Textarea in a field: the label, its description and messages work as for any box. Type into it to see it grow.
Up to 280 characters.
Character counter
An empty <p class="canon-field-counter"> after the message: canon.js shows how much of the control's maxlength is used, at the end of the message's row. With a counter, the limit doesn't stop typing or cut pasted text: people can go past it, the characters that are too many are marked in red, and the field shows its error at once, until they shorten it. (Without canon.js, maxlength stops typing as usual.) The last tenth of the limit is marked, and screen readers hear what is left after a pause in typing. Say the limit in the description, and give the field a message for the error.
Up to 160 characters.
Up to 20 characters.
Up to 80 characters.
Size
Fields and buttons share data-size, so a field and its button line up.
Expected length
Native size and maxlength say how long the value is expected to be; the box may size itself from them.
Standalone control
A box without a field, like a search in a toolbar. Without a visible label, name the input with aria-label.
Edge cases
This address receives every invoice, receipt and dunning email. Use a shared mailbox rather than a personal one so nothing is lost when people change roles.