Form layout^pattern

Fields, groups, help, errors and the action row.

Patterns

Examples

Copy the code into a product and change the content – the layout and tokens carry over.

One column, labels above, help before errors, grouped choices in a fieldset, actions at the end.

One column, labels above fields. Two columns only for short pairs that belong together (first and last name).
Say once at the top whether fields are required or optional, then mark only the exceptions.
Help text before errors: tell people what's needed before they get it wrong.
Validate on submit, then on change for fields that have an error. Move focus to an error summary or the first invalid field.
Actions at the end, left-aligned, primary first. Don't disable the submit button – let it show the errors.