Update themed components with refs and css

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,9 +1,10 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import { Checkbox } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function MattrixwvCheckbox({
+const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	id,
 	className,
 	labelClassName,
@@ -16,7 +17,7 @@ export default function MattrixwvCheckbox({
 	strokeWidth = 2,
 	value,
 	children
-}: CheckboxProps){
+}, ref ) => {
 	return (
 		<Checkbox
 			id={id}
@@ -29,6 +30,7 @@ export default function MattrixwvCheckbox({
 			defaultChecked={defaultChecked}
 			onChange={onChange}
 			value={value}
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -49,6 +51,7 @@ export default function MattrixwvCheckbox({
 				<svg
 					viewBox="0 0 14 14"
 					fill="none"
+					aria-label="checkbox"
 				>
 					<path
 						d="M3 8L6 11L11 3.5"
@@ -68,4 +71,8 @@ export default function MattrixwvCheckbox({
 			}
 		</Checkbox>
 	);
-}
+});
+
+MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
+
+export default MattrixwvCheckbox;