EMS Design SystemBack to Application

Form Layout

Structured form with grouped fields and actions. Form layouts provide a consistent way to organize form fields and actions.

Purpose

Form layouts provide a consistent structure for organizing form fields and actions. They help users understand the form's purpose and guide them through the input process. Well-designed form layouts:

  • Group related fields together
  • Provide clear labels and instructions
  • Include consistent action buttons
  • Support validation and error states
  • Guide users through multi-step processes when needed
When to use
  • When collecting structured data from users
  • When creating, editing, or configuring items
  • When users need to input multiple related fields
  • When form validation and error handling are required
Best Practices

Layout

  • Group related fields together with clear section headings
  • Use a single-column layout for simple forms
  • Consider multi-column layouts for related fields on larger screens
  • Maintain a consistent layout across similar forms
  • Place form actions at the bottom, aligned to the right or left consistently

Labels and Help Text

  • Use clear, concise labels that describe the field's purpose
  • Position labels consistently (above or to the left of fields)
  • Provide help text for fields that may need explanation
  • Indicate required fields consistently (e.g., with an asterisk)

Validation and Errors

  • Validate input as users complete fields when appropriate
  • Display validation errors clearly next to the relevant field
  • Use color, icons, and text to communicate validation status
  • Provide clear guidance on how to fix validation errors
Accessibility

Form layouts should follow these accessibility guidelines:

  • Use proper HTML form elements for semantic structure
  • Associate labels with form controls using the 'for' attribute
  • Provide clear focus indicators for keyboard navigation
  • Ensure error messages are announced by screen readers
  • Use fieldset and legend elements to group related controls when appropriate
  • Maintain a logical tab order for keyboard navigation
  • Provide sufficient color contrast for all text and UI elements