# Label Activation

**MUST** · **ID:** `forms-label-activation` · **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-label-activation

> MUST: Clicking a <label> focuses the associated control

Clicking a label should focus its associated input

When labels are properly associated with their inputs, clicking the label text focuses the input. This increases the clickable area and improves usability, especially for checkboxes and radio buttons which have small hit targets.

## Bad — do not do this

`forms-label-activation-bad`

```tsx
import { useState } from 'react';

export function LabelActivationBad() {
  const [agreed, setAgreed] = useState(false);
  const [newsletter, setNewsletter] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex items-start gap-3">
        <input
          id="bad-terms"
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
          className="mt-1 w-4 h-4 text-primary border-border rounded focus-visible:ring-2 focus-visible:ring-ring"
        />
        <span className="text-sm text-foreground">
          I agree to the terms and conditions
        </span>
      </div>
      <div className="flex items-start gap-3">
        <input
          id="bad-newsletter"
          type="checkbox"
          checked={newsletter}
          onChange={(e) => setNewsletter(e.target.checked)}
          className="mt-1 w-4 h-4 text-primary border-border rounded focus-visible:ring-2 focus-visible:ring-ring"
        />
        <span className="text-sm text-foreground">
          Subscribe to newsletter
        </span>
      </div>
      <p className="text-xs text-muted-foreground">
        Label text not clickable - must click small checkbox
      </p>
    </div>
  );
}
```

## Good — do this

`forms-label-activation-good`

```tsx
import { useState } from 'react';

export function LabelActivationGood() {
  const [agreed, setAgreed] = useState(false);
  const [newsletter, setNewsletter] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex items-start gap-3">
        <input
          id="good-terms"
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
          className="mt-1 w-4 h-4 text-primary border-border rounded focus-visible:ring-2 focus-visible:ring-ring"
        />
        <label htmlFor="good-terms" className="text-sm text-foreground cursor-pointer">
          I agree to the terms and conditions
        </label>
      </div>
      <div className="flex items-start gap-3">
        <input
          id="good-newsletter"
          type="checkbox"
          checked={newsletter}
          onChange={(e) => setNewsletter(e.target.checked)}
          className="mt-1 w-4 h-4 text-primary border-border rounded focus-visible:ring-2 focus-visible:ring-ring"
        />
        <label htmlFor="good-newsletter" className="text-sm text-foreground cursor-pointer">
          Subscribe to newsletter
        </label>
      </div>
      <p className="text-xs text-success">
        Click the label text to toggle checkbox
      </p>
    </div>
  );
}
```

## References

- [MDN: Label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label)