Forms
What is decided so far
Forms are not designed as a pattern yet. This is what the build follows today, from the components it uses.
Labels and fields
- A label above every input (see Text field). Input text is 16px so phones never zoom in.
- The standard focus ring: border-focus, 2px, 2px away.
Errors
- Buttons are never disabled to signal missing input: they stay enabled and explain what is missing.
- Pressing the button, or Enter, shows the errors under their fields (text-error, an icon and words; the field border in border-error) and moves focus to the first one.
Dialogs on phones
- A form in a dialog fills the visible screen on phones, with its title on the left and Close on the right.
- The footer sticks to the bottom, above the on-screen keyboard: Delete at the left as Danger; Cancel and the primary action at the right. Editing on phones has no Cancel.
- Delete never asks to confirm: it closes the dialog and shows an undo toast.