Law of Proximity

Objects that are near each other tend to be grouped together.

Key Principles

1Group related elements together using whitespace.
2Separate unrelated elements with clear visual distance.
3Use consistent spacing to establish visual hierarchy.
4Apply proximity in forms, navigation, and content layouts.

Try It

Compare the two forms. Grouped fields are easier to scan because proximity signals relatedness.

✓ Grouped by proximity

Personal Info

First name

Last name

Address

Street

City

Zip code

✗ Equal spacing

First name

Last name

Street

City

Zip code

Code Pattern

tsx

1// ✅ Good: Related fields grouped with shared spacing
2<form className="space-y-6">
3  <fieldset className="space-y-2">
4    <legend className="font-semibold">Personal Info</legend>
5    <input placeholder="First name" />
6    <input placeholder="Last name" />
7    <input placeholder="Email" />
8  </fieldset>
9
10  <fieldset className="space-y-2">
11    <legend className="font-semibold">Address</legend>
12    <input placeholder="Street" />
13    <input placeholder="City" />
14    <input placeholder="Zip code" />
15  </fieldset>
16</form>
17
18// ❌ Bad: All fields equally spaced
19<form className="space-y-2">
20  <input placeholder="First name" />
21  <input placeholder="Last name" />
22  <input placeholder="Email" />
23  <input placeholder="Street" />
24  <input placeholder="City" />
25  <input placeholder="Zip code" />
26</form>

Use whitespace to group related form fields and separate unrelated ones.

AI Analyzer

Analyzing against Law of Proximity