Checkbox

A simple native checkbox prepared for indeterminate states

import { Checkbox } from "@/components/checkbox";

export default function CheckboxPreview() {
  return <Checkbox />;
}

Dependencies

composeRefs

Source Code

import { useEffect, useRef } from "react";

import { composeRefs } from "@/lib/compose-refs";
import { cva } from "@/lib/utils/classnames";

interface CheckboxProps extends Omit<React.ComponentPropsWithRef<"input">, "type"> {
  indeterminate?: boolean;
}

const checkboxStyle = cva({
  base: [
    "focus-visible:ring-(length:--ring-width) relative flex size-5 shrink-0 appearance-none items-center justify-center rounded-sm border border-border bg-background shadow-xs outline-none ring-ring transition enabled:cursor-pointer enabled:not-checked:hover:border-mix-border/8",
    // checked
    "checked:enabled:hover:mix-with-accent-foreground checked:enabled:border-accent checked:enabled:bg-accent checked:enabled:hover:border-mix-accent/8",
    // indeterminate
    "indeterminate:enabled:hover:mix-with-accent-foreground indeterminate:enabled:border-accent indeterminate:enabled:bg-accent indeterminate:enabled:hover:border-mix-accent/8",
    // checked checkmark
    "before:absolute before:text-accent-foreground checked:before:font-bold checked:before:text-xs checked:before:content-['✓']",
    // indeterminate dash
    "indeterminate:before:h-0.5 indeterminate:before:w-1.5 indeterminate:before:bg-accent-foreground",
    // disabled
    "disabled:cursor-not-allowed disabled:border-foreground/5 disabled:bg-foreground/10 disabled:indeterminate:before:bg-foreground/50 disabled:checked:before:text-foreground/50",
  ],
});

const Checkbox = ({ ref, indeterminate, className, ...props }: CheckboxProps) => {
  const internalRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (internalRef.current) {
      internalRef.current.indeterminate = !!indeterminate;
    }
  }, [indeterminate]);

  return (
    <input
      type="checkbox"
      ref={composeRefs(ref, internalRef)}
      className={checkboxStyle({ className })}
      {...props}
    />
  );
};

export { Checkbox };

API Reference

Extends the native input element with type="checkbox".

Examples

Simple

import { Checkbox } from "@/components/checkbox";

export default function CheckboxPreview() {
  return <Checkbox />;
}

Disabled

import { Checkbox } from "@/components/checkbox";

export default function CheckboxDisabledPreview() {
  return (
    <div className="flex flex-col space-y-4">
      <Checkbox disabled />
      <Checkbox checked disabled />
    </div>
  );
}

All states

import { Checkbox } from "@/components/checkbox";

const labelClass = "font-medium text-base text-foreground";

export default function CheckboxAllStatesPreview() {
  return (
    <div className="flex flex-col space-y-4">
      <div className="flex items-center space-x-2">
        <Checkbox id="unchecked" />
        <label className={labelClass} htmlFor="unchecked">
          Unchecked
        </label>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox id="checked" checked onChange={() => {}} />
        <label className={labelClass} htmlFor="checked">
          Checked
        </label>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox id="indeterminate" indeterminate />
        <label className={labelClass} htmlFor="indeterminate">
          Indeterminate
        </label>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox id="disabled" disabled />
        <label className={labelClass} htmlFor="disabled">
          Disabled
        </label>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-checked" checked disabled />
        <label className={labelClass} htmlFor="disabled-checked">
          Checked Disabled
        </label>
      </div>

      <div className="flex items-center space-x-2">
        <Checkbox id="disabled-indeterminate" indeterminate disabled />
        <label className={labelClass} htmlFor="disabled-indeterminate">
          Indeterminate Disabled
        </label>
      </div>
    </div>
  );
}

Best Practices

Labels:
- Always provide clear labels
- Make labels clickable
- Use consistent label positioning
Accessibility:
- Ensure keyboard navigation
- Use fieldset for groups

Calendar

Color Picker