1---
2title: Use Boundaries to Group Related Content
3impact: MEDIUM
4tags: ux, common-region, boundaries, grouping
5---
6 
7## Use Boundaries to Group Related Content
8 
9Elements sharing a clearly defined boundary are perceived as a group.
10 
11**Incorrect (flat list with no visual grouping):**
12 
13```tsx
14function Settings() {
15  return (
16    <div>
17      <Toggle label="Dark mode" />
18      <Toggle label="Notifications" />
19      <Input label="Email" />
20      <Input label="Password" />
21    </div>
22  );
23}
24```
25 
26**Correct (bounded sections):**
27 
28```tsx
29function Settings() {
30  return (
31    <div>
32      <section className={styles.group}>
33        <h3>Appearance</h3>
34        <Toggle label="Dark mode" />
35      </section>
36      <section className={styles.group}>
37        <h3>Notifications</h3>
38        <Toggle label="Notifications" />
39      </section>
40      <section className={styles.group}>
41        <h3>Account</h3>
42        <Input label="Email" />
43        <Input label="Password" />
44      </section>
45    </div>
46  );
47}
48```
49 
50Reference: [Law of Common Region](https://lawsofux.com/law-of-common-region/)
51