Radio Button and Checkbox Created

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -0,0 +1,71 @@
+import type { CheckboxProps } from "$/types/Input";
+import { Checkbox } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function MattrixwvCheckbox({
+	id,
+	className,
+	labelClassName,
+	name,
+	size = "sm",
+	box = true,
+	onChange,
+	checked,
+	defaultChecked,
+	strokeWidth = 2,
+	value,
+	children
+}: CheckboxProps){
+	return (
+		<Checkbox
+			id={id}
+			className={clsx(
+				"group cursor-pointer",
+				"flex flex-row items-center justify-center gap-x-2"
+			)}
+			name={name}
+			checked={checked}
+			defaultChecked={defaultChecked}
+			onChange={onChange}
+			value={value}
+		>
+			<div
+				className={clsx(
+					className,
+					{
+						"rounded border": box
+					},
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			>
+				<svg
+					viewBox="0 0 14 14"
+					fill="none"
+				>
+					<path
+						d="M3 8L6 11L11 3.5"
+						strokeWidth={strokeWidth}
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+			</div>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Checkbox>
+	);
+}