Hit areas
Anything that looks clickable must be clickable across its whole visible extent, and the target behind a small control must be big enough for a thumb.
The floor is 24 by 24 pixels; 44 is the target for anything primary on a touch screen; 40 is a good desktop target where density permits. A checkbox and its label share one hit target. Where the visible element is smaller, the hit area grows with a pseudo-element on the wrapping label or button, never on the input itself, which cannot render one.
Two interactive elements never overlap. Where an extended hit area would collide with a neighbour, it shrinks to the largest size that does not. And any decorative layer over a control – a scrim, a glow, a sheen – gets `pointer-events: none`, or the control underneath looks live and does nothing.
- 24px floor, 44px for primary touch targets, 40px on desktop
- Expand with a pseudo-element on the wrapper; or give the box real size and let it be the target
- `touch-action: manipulation` on interactive elements to remove the double-tap delay