Forms and validation

How to compose a form

• Field: wraps every control, with its FieldLabel, a FieldDescription when the field needs a hint, and a FieldError for validation.
• Supported controls: Input, Textarea, Select, Native Select, Combobox, Checkbox, Radio Group, Switch, Slider, Input Group, Input OTP, Date Picker and File Upload.
• FieldSet with a FieldLegend: ties related fields together, visually and for screen readers, and describes them as one group.

Example

Grouping fields with FieldSet

Do and Don't

Do

• Put the label above the field, in sentence case, with no colon.
• If there is a field error, write the problem and the way out, in one sentence. It goes under the field and replaces the description, if one exists.
• Check a field's validity when focus leaves it, and every field in the form on submit. Once a field shows an error, check it on every change, so the error clears the moment it's fixed.
• Add "(optional)" after the label of an optional field, and leave required fields' labels unchanged.
• Set required on every required control in the code, so screen readers announce it.
• Label the form submit button with a verb that names the result: Create source vs Submit.
• If a submit triggers errors, show every error and move focus to the first invalid field.
• While the form saves, disable the submit button and switch its label to what's in progress, such as Saving. See Loading.

Don't

• Put a hint as the field placeholder. It vanishes as soon as the user types.
• Validate on the first keystroke.
• Mark required fields with an asterisk.
• Disable the submit button until the form is valid. The user can't tell what's missing.