Checkbox

MIGRATION NOTICE

If you were using this component before, please switch to using FormCheckbox instead. FormCheckbox provides the same visual checkbox along with additional features like labels, validation support, and error messages. The standalone Checkbox component is now simply a visual element and does not include form-related functionality. Expect the same to happen to the Radio component in the future, where it will be replaced by a FormRadio component with enhanced features.

'use client';

import { Clickable } from '@/ui/Clickable';
import { Checkbox } from '@/ui/forms/checkboxes/Checkbox';
import { useState } from 'react';

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="space-y-4">
      <Clickable onClick={() => setChecked(!checked)}>
        <Checkbox id="demo" name="demo" checked={checked} />
      </Clickable>
    </div>
  );
}

Installation

npmpnpmyarnbun
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/checkbox.json
Copy

Usage

Copyimport { Checkbox } from '@/docs/lib/ui/forms/checkboxes/checkbox';
import { useState } from 'react';
 
export function Component() {
  const [checked, setChecked] = useState(false);
 
  return (
    <Checkbox
      name="name"
      value="value"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

API Reference

Checkbox

Examples

'use client';

import { Checkbox } from '@/ui/forms/checkboxes/Checkbox';

export function CheckboxDisabledDemo() {
  return (
    <div className="space-y-4">
      Disabled unchecked
      <Checkbox name="disabled-unchecked" value="disabled" disabled></Checkbox>
      Disabled checked
      <Checkbox name="disabled-checked" value="disabled-checked" disabled checked></Checkbox>
    </div>
  );
}

Form Usage

For form usage with validation support, labels, and error messages, see FormCheckbox.

Notes

• Controlled Component: This is a fully controlled component. You must manage the checked state and onChange handler in the parent component.
• Native onChange: Uses standard HTML input onChange behavior. Access the checked state via event.target.checked.
• Simple Visual: This component renders just the checkbox visual. For form features like labels and validation, use FormCheckbox.
• Custom Styling: Accepts className prop for style overrides and customization.
• Client Component: This component uses React hooks and must be used in a client component (requires "use client" directive in Next.js App Router).