<?xml version="1.0" encoding="utf-8"?>

Avoid clutter and add enough spacing between elements

Avoid clutter and add enough spacing between elements Bad Practice
Avoid clutter and add enough spacing between elements Best Practice

If you smash a bunch of elements together, it can create a cluttered mess of a form. Proper component spacing prevents this. Take time to organize and space your input elements in a way that allows them some breathing room while keeping them visually grouped in a logical way. The distance between inputs in a form should be larger than any spacing between component elements.

Pro Tip: Add at least 4px between input borders and helper text for a neat and uncluttered look.

Improve your UX & Product skills with interactive courses that actually work