Forms

Forms

• Enter submits. When a text input is focused, Enter submits if it’s the only control. If there are many controls, apply to the last control.

  Add tech

  Name Add technician

• Textarea behavior. In <textarea>, ⌘/⌃+Enter submits; Enter inserts a new line.
• Labels everywhere. Every control has a <label> or is associated with one. A placeholder is never a label.

  Add tech

  Name Add technician

• Label activation. Clicking a <label> focuses the associated control. No dead zone between the text and the input.

  Add tech

  Name Add technician

• Submission rule. Keep submit enabled until the request starts; then disable it, show a spinner, keep the original label, & include an idempotency key.
• Don’t block typing. Even if a field only accepts numbers, allow any input & show validation after. Blocking keystrokes is confusing because the user gets no explanation.

  Customer phone

  Phone

• Don’t pre-disable submit. Allow submitting incomplete forms to surface validation. Focus the first invalid field.

  Add tech

  Name Add technician

• Error placement. Show errors next to their fields with aria-invalid and aria-describedby. Never a red border alone. The copy tells the user how to fix it.

  Add tech

  Name Add technician

• Error replaces help. Help sits under the field. When the field is invalid, the error takes that seat. One slot. Do not stack help and error. Do not toast a missing name. Shopify’s form cleanliness: the sentence under the well is the only commentary.
• Affixes live in the well. $, %, /hr, and units sit inside the field, as quiet prefixes or suffixes. They are not a second box. They are not a label. The value stays tabular.
• A cluster is space, not a card. Related fields share a heading and a gap. Do not wrap each input in its own sheet. Polaris groups by proximity. We already forbade a line between jobs; the same law applies to a name and a phone.
• Placeholders are examples. A placeholder shows the shape of the answer: Mike Reyes, 114 Oak, $186.00. It is never the label. “Enter name” is a missing label. Shopify’s cleanliness: the field already has a name above it.
• Mark optional, not required. Most fields on a job are required. Stars on every row is noise. Mark the rare skip with the word optional. Polaris does the same for merchants.
• A banner is a page problem. Offline, a failed save for the whole sheet, a permission that blocks the room: those are banners. A missing name stays under Name. Shopify’s banners are page-level. Field errors are not.
• Autocomplete & names. Set autocomplete & meaningful name values. Stay compatible with password managers and 2FA autofill.
• Spellcheck selectively. Disable for emails, codes, usernames, invoice numbers, and job IDs.
• Correct types & input modes. Use the right type & inputmode. Money uses inputmode="decimal" on type="text", not a spinner.
• Placeholders signal emptiness. End with an ellipsis, the character in Ellipsis. Set the value to an example: name@company.com, (706) 555-0142.

  Customer phone

  Phone

• Unsaved changes. Warn before navigation when data could be lost. Never lose typed input to a re-render.
• Trim before validate. Autocomplete and text expansion add trailing spaces. Trim so a valid value is not rejected.