Terms Checkbox Pro

Terms compliance shouldn't be a UX afterthought.

• Disables submit until users agree — actually

• Inline links inside the label (up to 5)

• Works with Framer Forms and any button

• Gate multiple buttons at once by layer name or selector

• Captcha-compatible (gate registry protocol)

• Accessible: native input, ARIA, keyboard, reduced motion

• Pixel-perfect alignment, no wrap bugs

• Four checkmark icons + full styling controls

• Drop-and-go defaults — works on the canvas instantly

Terms Checkbox is a drop-in consent component for Framer forms and any CTA on the page. It renders inline Terms of Service / Privacy Policy / Cookies links inside the label, and — unlike Framer's native checkbox or other Marketplace alternatives — actually disables the submit button until users tick the box.

It also plays well with others: a shared data-gate-* registry lets it coexist with Captcha components, custom validators, or any future gate. No fights over disabled state, no race conditions.

What you get

• Real submit gating. The button is .disabled (form mode) or click-blocked (any-button mode) — not just a required attribute that fails after the user clicks.

• Inline links inside the label. Up to 5 links via {1}, {2}, {3} tokens. Click a link without toggling the checkbox.

• Works beyond <form>. Auto-detects the closest button when no form is present, or target by Framer layer name / CSS selector — gating all matches at once (one Terms can lock down every "Buy" button on a landing page).

• Captcha-compatible. Cooperative gate registry — multiple validators on one button, no overrides.

• Accessible by default. Real <input type="checkbox">, aria-invalid, aria-disabled, focus-visible, keyboard support, prefers-reduced-motion.

• Pixel-perfect alignment. Box height locks to one line of label text — clean even when the label wraps to multiple lines on mobile.

• Full styling control. Size, radius, gap, four checkmark icons, font, label color, link color, hover color, three underline modes.

• Variant-safe. A MutationObserver re-locates the gated element if Framer swaps variants or re-renders.

• No external dependencies. No CDN calls. SSR-safe. Single-file TypeScript drop-in.

Why you'll love it

• Drop and go. Sensible defaults — checkbox + label with two links, "I agree to the Terms and Privacy Policy". Add your URLs and ship.

• Composes. Need Captcha, age confirmation, and Terms on the same form? They cooperate, not collide.

• Universal. Newsletter sign-ups, lead magnets, booking forms, multi-step wizards, "Continue to Checkout" CTAs, modal triggers — anywhere consent matters.

• Clean handoff. A real form input means real FormData, real validation, real assistive-tech support.

Suitable for

Newsletter sign-ups · Lead magnets · Booking forms · Free trials · Sign-up pages · Checkout flows · Membership applications · Any high-conversion landing page that needs explicit consent.