feat(FE-147): add CheckboxInput component

2026-05-20 13:32:00 +00:00 · 2025-10-23 12:51:39 +07:00
parent 1e2ea79a6a
commit 204369e0fe
1 changed files with 89 additions and 0 deletions
@@ -0,0 +1,89 @@
+'use client';
+
+import { HTMLProps, useEffect, useRef } from 'react';
+import { cn } from '@/lib/helper';
+
+interface CheckboxInputProps extends HTMLProps<HTMLInputElement> {
+  name: string;
+  label?: string;
+  indeterminate?: boolean;
+  classNames?: {
+    wrapper?: string;
+    inputWrapper?: string;
+    checkbox?: string;
+    label?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  errorMessage?: string;
+}
+
+const CheckboxInput = ({
+  indeterminate,
+  name,
+  label,
+  className,
+  classNames,
+  isValid,
+  isError,
+  errorMessage,
+  ...rest
+}: CheckboxInputProps) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === 'boolean') {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return (
+    <div
+      className={cn('flex flex-col items-center gap-1', classNames?.wrapper)}
+    >
+      <div
+        className={cn(
+          'flex flex-row justify-center items-center gap-2',
+          classNames?.inputWrapper
+        )}
+      >
+        <input
+          type='checkbox'
+          ref={ref}
+          id={name}
+          name={name}
+          className={cn(
+            'checkbox cursor-pointer',
+            {
+              'border-error': isError,
+              'border-success': isValid,
+            },
+            className,
+            classNames?.checkbox
+          )}
+          {...rest}
+        />
+
+        {label && (
+          <label
+            htmlFor={name}
+            className={cn(
+              'text-inherit',
+              {
+                'text-error': isError,
+                'text-success': isValid,
+              },
+              classNames?.label
+            )}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+
+      {errorMessage && <span className='text-error'>{errorMessage}</span>}
+    </div>
+  );
+};
+
+export default CheckboxInput;