Skip to component
GGamma

Task check

A native checkbox with a quiet completion animation and supporting detail.

New
Live previewUse keyboard to interact

Implementation

1"use client";2 3import { useId, useState, type InputHTMLAttributes } from "react";4import { Check } from "lucide-react";5 6export type TaskCheckProps = Omit<7  InputHTMLAttributes<HTMLInputElement>,8  "type" | "onChange" | "children"9> & {10  label: string;11  detail?: string;12  onCheckedChange?: (checked: boolean) => void;13};14 15/** Native checkbox with a deliberate completion response. */16export function TaskCheck({17  label,18  detail,19  checked,20  defaultChecked = false,21  onCheckedChange,22  id,23  className = "",24  ...inputProps25}: TaskCheckProps) {26  const generatedId = useId();27  const inputId = id ?? generatedId;28  const [internalChecked, setInternalChecked] = useState(