Form pages: input, validation, and submission

Form pages easily end up "built but hard to use." Pick the right layout first, then the right input controls, and finally spell out the feedback for validation and submission.

Pick the layout first

• Single Page Form: create or edit one record, with up to twenty fields that don't depend on each other in order, submitted once when everything's filled in.
• Wizard: the task has a clear order and a later step depends on the result of an earlier one, or there are so many fields they can be split into three to five groups. Put Steps at the top so users know how many steps there are and how many are left.
• Settings Page: lots of options that are independent of each other, and users come back now and then to change just one or two.

With only four or five fields, don't split them into three steps. For view-only details, don't use a form. Use a description list.

Then pick the input controls

• Input: short content written on one line, like a name, phone number, or email. Use the matching input types for phone and email so phones show the right keyboard.
• Textarea: content that might be several sentences, like notes or feedback. If there's a character limit, show a counter.
• Input Number: values you step up and down, like a quantity or a number of days. Phone numbers and verification codes are made of digits, but they still use a regular input.
• Select, Radio, Checkbox: use a dropdown for six or more options, radio buttons for two to five mutually exclusive options, and checkboxes when more than one can be picked.
• Switch: settings that take effect as soon as they're flipped. Options that only take effect after clicking "Save" use checkboxes. Don't mix the two in the same Form.
• Date Picker: booking dates, due dates. For dates far in the past, like a birthday, make it quick to jump between years.
• Upload: state the format and size limits up front, show progress while uploading, and show a thumbnail once an image is done.

Validation and submission

Form Validation should show a specific message next to the field, like "Phone number must be 10 digits," not just a Toast that disappears after a few seconds. Once the submit Button is clicked, it goes into a Loading State and a Disabled State at the same time, so it can't be submitted twice on a slow network. If submission fails, explain why with an Alert above the form, and scroll to the first field with an error.

How to describe it to AI

Build a single page form for creating a customer, with the fields in two groups: basic info (name, phone number, email, and city as a select) and follow-up info (customer tier as radio buttons A/B/C, next follow-up date as a date picker, notes as a textarea). Validate the phone number and email when they lose focus, and show error messages below the input. After the submit button is clicked, show a loading state and disable it. If it fails, explain why in an alert at the top of the form.

Change the sign-up flow into a wizard with three steps: account info, profile, and review and submit, with a steps bar at the top. When "Next" is clicked, validate the current step first, and keep what's already been filled in when going back a step.