Nexus DSdocs

Checkbox

Installation

npm install @radix-ui/react-checkbox@^1.3.3 @tabler/icons-react@^3.36.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/icons.ts
lib/motion.ts
lib/utils.ts
components/checkbox/checkbox.tsx
components/checkbox/index.ts

The code below also uses:

npm install @radix-ui/react-label@^2.1.7
components/label/index.ts
components/label/label.tsx

Code

'use client';

import { Checkbox } from '@/components/checkbox/checkbox';
import { Label } from '@/components/label/label';

export default function CheckboxDemo() {
  return (
    <div className="nx:flex nx:items-center nx:gap-2">
      <Checkbox id="checkbox-demo-terms" />
      <Label htmlFor="checkbox-demo-terms">Accept terms and conditions</Label>
    </div>
  );
}

Props

Checkbox

Checkbox adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Checked

'use client';

import { Checkbox } from '@/components/checkbox/checkbox';
import { Label } from '@/components/label/label';

export default function CheckboxChecked() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox id="checkbox-checked-off" />
        <Label htmlFor="checkbox-checked-off">Unchecked</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox id="checkbox-checked-on" defaultChecked />
        <Label htmlFor="checkbox-checked-on">Checked</Label>
      </div>
    </div>
  );
}

Indeterminate

'use client';

import * as React from 'react';

import type { CheckedState } from '@radix-ui/react-checkbox';

import { Checkbox } from '@/components/checkbox/checkbox';
import { Label } from '@/components/label/label';

export default function CheckboxIndeterminate() {
  const [email, setEmail] = React.useState(true);
  const [sms, setSms] = React.useState(false);

  const allSelected = email && sms;
  const someSelected = email || sms;
  const allState: CheckedState = allSelected
    ? true
    : someSelected
      ? 'indeterminate'
      : false;

  function toggleAll(checked: CheckedState) {
    setEmail(checked === true);
    setSms(checked === true);
  }

  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox
          id="checkbox-indeterminate-all"
          checked={allState}
          onCheckedChange={toggleAll}
          aria-controls="checkbox-indeterminate-email checkbox-indeterminate-sms"
        />
        <Label htmlFor="checkbox-indeterminate-all">All notifications</Label>
      </div>
      <div className="nx:flex nx:flex-col nx:gap-3 nx:pl-6">
        <div className="nx:flex nx:items-center nx:gap-2">
          <Checkbox
            id="checkbox-indeterminate-email"
            checked={email}
            onCheckedChange={(checked) => setEmail(checked === true)}
          />
          <Label htmlFor="checkbox-indeterminate-email">Email</Label>
        </div>
        <div className="nx:flex nx:items-center nx:gap-2">
          <Checkbox
            id="checkbox-indeterminate-sms"
            checked={sms}
            onCheckedChange={(checked) => setSms(checked === true)}
          />
          <Label htmlFor="checkbox-indeterminate-sms">SMS</Label>
        </div>
      </div>
    </div>
  );
}

Disabled

'use client';

import { Checkbox } from '@/components/checkbox/checkbox';
import { Label } from '@/components/label/label';

export default function CheckboxDisabled() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox id="checkbox-disabled-unchecked" disabled />
        <Label htmlFor="checkbox-disabled-unchecked">Unchecked</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox id="checkbox-disabled-checked" disabled defaultChecked />
        <Label htmlFor="checkbox-disabled-checked">Checked</Label>
      </div>
      <div className="nx:flex nx:items-center nx:gap-2">
        <Checkbox
          id="checkbox-disabled-indeterminate"
          disabled
          checked="indeterminate"
        />
        <Label htmlFor="checkbox-disabled-indeterminate">Indeterminate</Label>
      </div>
    </div>
  );
}