Checkbox

A checkbox is a form element that allows the user to toggle between two states: checked and unchecked.

Code

import { AnimatePresence, motion } from "motion/react";
import React from "react";

export interface CheckboxContextType {
	isChecked: boolean;
}

export const CheckboxContext = React.createContext<CheckboxContextType>(
	{} as CheckboxContextType
);

export function useCheckbox() {
	return React.useContext(CheckboxContext);
}

export interface CheckboxProps extends React.ComponentProps<"input"> {
	children: React.ReactNode;
}

export function Checkbox({
	children,
	className,
	style,
	id,
	defaultChecked,
	checked,
	onChange,
	...props
}: CheckboxProps) {
	const [isChecked, setIsChecked] = React.useState(defaultChecked || false);
	const inputRef = React.useRef<HTMLInputElement>(null);

	const state = checked ?? isChecked;

	return (
		<CheckboxContext.Provider value={{ isChecked: state }}>
			<button
				className={className}
				style={style}
				role="checkbox"
				data-checked={state}
				type="button"
				onClick={() => {
					inputRef.current?.click();
				}}
				id={id}
			>
				<input
					type="checkbox"
					aria-hidden
					{...props}
					style={{ display: "none" }}
					checked={state}
					onChange={e => {
						setIsChecked(e.target.checked);
						onChange?.(e);
					}}
					ref={inputRef}
				/>
				{children}
			</button>
		</CheckboxContext.Provider>
	);
}

export interface CheckboxIndicatorProps
	extends React.ComponentProps<typeof motion.span> {}

export function CheckboxIndicator(props: CheckboxIndicatorProps) {
	const { isChecked } = useCheckbox();

	return (
		<AnimatePresence>
			{isChecked ? <motion.span {...props} /> : null}
		</AnimatePresence>
	);
}

Example