Checkbox component

package.json

@@ -22,7 +22,8 @@
     "storybook": "storybook dev -p 6006",
     "test": "vitest",
     "test:coverage": "vitest --coverage --coverage.all=false",
-    "test:ci": "vitest run --coverage --silent"
+    "test:ci": "vitest run --coverage --silent",
+    "test:ui": "vitest --ui --coverage --silent"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.20.0",
@@ -77,6 +78,7 @@
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "3.1.1",
+    "@vitest/ui": "3.1.1",
     "eslint": "9.23.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",

src/common/components/Form/Checkbox.tsx

@@ -0,0 +1,118 @@
+import { Control, FieldValues, Path, useController } from 'react-hook-form';
+import { cva } from 'class-variance-authority';
+
+import { BaseComponentProps } from 'common/utils/types';
+import { cn } from 'common/utils/css';
+import Label from './Label';
+import FieldError from './FieldError';
+import HelpText from '../Text/HelpText';
+import FAIcon from '../Icon/FAIcon';
+
+/**
+ * Define the `Checkbox` component base and variant styles.
+ */
+const checkboxVariants = cva('flex size-4 appearance-none items-center justify-center rounded-sm', {
+  variants: {
+    checked: {
+      true: 'bg-blue-600',
+      false: 'bg-gray-300',
+    },
+    disabled: {
+      true: 'cursor-not-allowed opacity-50',
+      false: 'cursor-pointer',
+    },
+  },
+  defaultVariants: {
+    checked: false,
+    disabled: false,
+  },
+});
+
+/**
+ * Properties for the `Checkbox` component.
+ * @param {Control} control - Object containing methods for registering components
+ * into React Hook Form.
+ * @param {boolean} [disabled] - Optional. Indicates if the checkbox is disabled. Default: `false`
+ * @param {string} label - The label text.
+ * @param {string} name - Name of the form control.
+ * @param {boolean} [required] - Optional. Indicates if the checkbox is required. Default: `false`
+ * @param {string} [supportingText] - Optional. Help text or instructions.
+ */
+export interface CheckboxProps<T extends FieldValues> extends BaseComponentProps {
+  control: Control<T>;
+  disabled?: boolean;
+  label: string;
+  name: string;
+  required?: boolean;
+  supportingText?: string;
+}
+
+/**
+ * The `Checkbox` component renders a button that serves as a checkbox input.
+ * It is used to capture boolean input from a user.
+ */
+const Checkbox = <T extends FieldValues>({
+  className,
+  control,
+  disabled = false,
+  label,
+  name,
+  required = false,
+  supportingText,
+  testId = 'checkbox',
+}: CheckboxProps<T>): JSX.Element => {
+  const { field, fieldState } = useController({ control, name: name as Path<T> });
+  const isChecked = field.value === true;
+
+  const handleClick = () => {
+    if (!disabled) {
+      field.onChange(!isChecked);
+    }
+  };
+
+  return (
+    <div className={cn(className)} data-testid={testId}>
+      <div className="mb-2 flex items-center gap-2">
+        <button
+          type="button"
+          name={name}
+          className={cn(checkboxVariants({ checked: isChecked, disabled }))}
+          onClick={handleClick}
+          role="checkbox"
+          aria-labelledby={`${name}-label`}
+          aria-checked={isChecked}
+          aria-disabled={disabled}
+          disabled={disabled}
+          data-testid={`${testId}-button`}
+        >
+          {isChecked && (
+            <FAIcon
+              icon="check"
+              size="sm"
+              fixedWidth
+              className="text-white"
+              testId={`${testId}-icon`}
+            />
+          )}
+        </button>
+        <Label
+          id={`${name}-label`}
+          htmlFor={name}
+          required={required}
+          className="m-0"
+          testId={`${testId}-label`}
+        >
+          {label}
+        </Label>
+      </div>
+      <div className="flex flex-wrap items-center">
+        <FieldError message={fieldState.error?.message} testId={`${testId}-error`} />
+        {supportingText && (
+          <HelpText testId={`${testId}-supporting-text`}>{supportingText}</HelpText>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Checkbox;

src/common/components/Form/Label.tsx

@@ -1,8 +1,24 @@
 import { LabelHTMLAttributes } from 'react';
+import { cva } from 'class-variance-authority';
 
 import { cn } from 'common/utils/css';
 import { BaseComponentProps } from 'common/utils/types';
 
+/**
+ * Define the `Label` component base and variant styles.
+ */
+const labelVariants = cva('mb-1 block text-sm', {
+  variants: {
+    required: {
+      true: 'font-bold after:content-["*"]',
+      false: 'font-medium',
+    },
+  },
+  defaultVariants: {
+    required: false,
+  },
+});
+
 /**
  * Properties for the `Label` component.
  * @param {boolean} [required] - Optional. Indicates if the label is for a required field.
@@ -17,24 +33,17 @@ export interface LabelProps extends BaseComponentProps, LabelHTMLAttributes<HTML
 /**
  * The `Label` component renders a HTML `label` element. It is used to describe
  * a form control.
- * @param {LabelProps} props - Component properties.
- * @returns JSX
  */
 const Label = ({
   children,
   className,
-  htmlFor,
   required = false,
   testId = 'label',
+  ...props
 }: LabelProps): JSX.Element => {
   return (
-    <label
-      htmlFor={htmlFor}
-      className={cn('mb-1 block text-sm font-medium', { 'font-bold': required }, className)}
-      data-testid={testId}
-    >
+    <label className={cn(labelVariants({ required }), className)} data-testid={testId} {...props}>
       {children}
-      {required && '*'}
     </label>
   );
 };