Skip to Content
FrontendBundlesComponentsUI PrimitivesCheckbox

Checkbox

Thin wrappers around Radix UI’s checkbox primitives.

Import

import {
  CheckboxRoot,
  CheckboxIndicator,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Checkbox";

Props

All Radix UI Checkbox props, including:

PropTypeDescription
checkedboolean | "indeterminate"Controlled checked state
defaultCheckedbooleanUncontrolled default
onCheckedChange(checked: boolean) => voidChange handler
disabledbooleanDisable the checkbox
requiredbooleanForm required

Usage

import { CheckboxRoot, CheckboxIndicator } from "...";
import { LuCheck } from "react-icons/lu";
 
<CheckboxRoot
  id="terms"
  checked={accepted}
  onCheckedChange={setAccepted}
>
  <CheckboxIndicator>
    <LuCheck className="w-3 h-3" />
  </CheckboxIndicator>
</CheckboxRoot>
<label htmlFor="terms">Accept terms and conditions</label>

For boolean form fields in CRUD forms, prefer BooleanToggle which integrates with React Hook Form and provides a richer UI with Yes/No buttons.

Last updated on
SelectBadge