# No Dead Zones on Controls

**MUST** · **ID:** `forms-no-dead-zones` · **Category:** forms
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/forms-no-dead-zones

> MUST: No dead zones on checkboxes/radios; label+control share one generous hit target

Checkboxes and radios share hit target with labels

Small checkboxes and radio buttons are hard to click. Make the entire label clickable by properly associating it with the input. This creates a much larger, more forgiving hit target and improves usability.

## Bad — do not do this

`forms-no-dead-zones-bad`

```tsx
export function NoDeadZonesBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Preferences</h3>
        <div className="space-y-3">
          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="bad-notifications"
              className="w-4 h-4"
            />
            <span className="text-sm">Enable notifications</span>
          </div>
          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="bad-newsletter"
              className="w-4 h-4"
            />
            <span className="text-sm">Subscribe to newsletter</span>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Only the tiny checkbox is clickable. The text next to it doesn't activate the control.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Only 16px checkbox is clickable - hard to tap
      </p>
    </div>
  );
}
```

## Good — do this

`forms-no-dead-zones-good`

```tsx
export function NoDeadZonesGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Preferences</h3>
        <div className="space-y-1">
          <label className="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-muted cursor-pointer">
            <input
              type="checkbox"
              className="w-4 h-4"
            />
            <span className="text-sm">Enable notifications</span>
          </label>
          <label className="flex items-center gap-3 p-2 -mx-2 rounded-lg hover:bg-muted cursor-pointer">
            <input
              type="checkbox"
              className="w-4 h-4"
            />
            <span className="text-sm">Subscribe to newsletter</span>
          </label>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          The entire row is clickable via the label element. Much easier to tap.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Label wraps checkbox + text - full row is clickable
      </p>
    </div>
  );
}
```

## References

- [Form Labels](https://www.w3.org/WAI/tutorials/forms/labels/)