Form layout and validation

Use a single-column form by default. It is easier to scan, works at narrow content widths, and keeps labels, values, and validation messages in a predictable reading order.

Use a two-column layout only when fields are short, closely related, and the form has enough horizontal space. Keep related fields together (for example, first and last name); let longer fields such as addresses span both columns.

Choose a field and layout

1. Start with the field type that matches the value: text field, checkbox, radio button, or select/combobox.
2. Group related inputs under a clear section heading when a form has more than one task.
3. Put the primary action after the final field. Keep Cancel or a safe exit nearby when abandoning work is meaningful.
4. Use a modal for a short, focused task; use a page or pane when the user needs more context or a longer workflow.

Validation rules

• Mark required fields before submission and explain the requirement in the label or helper text; do not rely on an asterisk alone.
• Validate as soon as it helps the user correct a value, but do not show an error before they have had a reasonable chance to complete the field.
• Place a concise error message next to its field, identify what is wrong, and state how to fix it.
• Preserve entered values after validation fails. On submit, move focus to an error summary or the first invalid field.
• Do not use color as the only error signal. Pair the error treatment with text and a programmatic association between the input and its message.

For the component details and states, see Text Fields.