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.
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.
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.
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.
Prettifyweb
