Checkbox Terms

Installation

Usage

import { useState } from "react";
import CheckboxTerms from "@/components/ruixen/checkbox-terms";
 
export default function MyComponent() {
  const [accepted, setAccepted] = useState(false);
 
  return (
    <CheckboxTerms
      checked={accepted}
      onCheckedChange={setAccepted}
      termsLink="/terms"
      privacyLink="/privacy"
      required
    />
  );
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when state changes
`termsText`	`string`	`"Terms of Service"`	Terms link text
`termsLink`	`string`	`"#"`	Terms page URL
`privacyText`	`string`	`"Privacy Policy"`	Privacy link text
`privacyLink`	`string`	`"#"`	Privacy page URL
`required`	`boolean`	`false`	Mark as required
`disabled`	`boolean`	`false`	Disable the checkbox
`className`	`string`	-	Additional CSS classes

Features

Pre-formatted terms acceptance text
Clickable links for terms and privacy
Required field indicator
Perfect for signup forms
Light and dark mode support