Cena Research Institute | Cardiovascular Trial Site & CRO in Houston

Basic Usage

Checkboxes are controlled components that require state management for interactive use.

Controlled Checkbox

Accept terms and conditions

States

Checkboxes support checked, unchecked, and disabled states.

Unchecked

Checked

Disabled

With Labels

Checkboxes should always be paired with labels for accessibility.

With Label

I agree to the terms and conditions

Usage

"use client";

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";

export function MyComponent() {
  const [agreed, setAgreed] = useState(false);

  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" checked={agreed} onCheckedChange={setAgreed} />
      <label htmlFor="terms" className="text-sm">
        I agree to the terms
      </label>
    </div>
  );
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Whether the checkbox is checked
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when checked state changes
`disabled`	`boolean`	`false`	Whether the checkbox is disabled

Material 3 Features

State Layers: Hover (8%) and press (12%) states using Material 3 opacity tokens
Focus Ring: Proper focus indicators for keyboard navigation
Theme Support: Automatically adapts to light and dark themes
Accessibility: Full keyboard navigation and ARIA support via Radix UI