Forms

Forms are where Binds users do most of their work: creating templates, inviting people, configuring integrations. A good form is short, labelled, forgiving and clear about what went wrong.

Structure

• One column. Group related fields under a heading, and keep the primary action at the end.
• Every field has a visible label. Placeholders are examples, never labels.
• Mark required fields, or mark the optional ones when most are required.
• Use the control that fits the answer: a switch for an immediate on/off setting, a checkbox for agreement, radio buttons for two to four options, a select for more.

Validation

• Validate when a field loses focus and again on submit. Do not validate while the user is still typing their first attempt.
• Keep the submit button enabled. On submit, show every error next to its field and move focus to the first one.
• Errors say what is wrong and how to fix it. They are linked to the field so screen readers announce them.
• Never clear what the user typed.

Components

On phones

• Set the keyboard type and autofill hints for each field (email, one-time code, name).
• Keep the primary action reachable above the keyboard, and let the keyboard’s return key move to the next field.
• Long forms become steps. Show progress with a stepper and save between steps.