CheckBox Component

Author: priyang12

src/lib/Components/CheckBox/CheckBox.scss

@@ -0,0 +1,50 @@
+.checkbox {
+   cursor: pointer;
+   appearance: none;
+   width: 18px;
+   height: 18px;
+   border: 2px solid #ccc;
+   border-radius: 4px;
+   background-color: #fff;
+   transition: border-color 0.2s, box-shadow 0.2s;
+
+   &:hover {
+      border-color: var(--text-secondary);
+      box-shadow: 0 0 0 3px var(--primary-200);
+   }
+
+   &:focus-visible {
+      outline: none;
+      border-color: var(--primary-800);
+      box-shadow: 0 0 0 3px var(--primary-200);
+   }
+
+   &:checked {
+      background-color: var(--primary-400);
+      border-color: var(--primary-400);
+
+      &::after {
+         content: '';
+         display: block;
+         width: 4px;
+         height: 8px;
+         border: solid var(--text-primary);
+         border-width: 0 2px 2px 0;
+         transform: rotate(45deg);
+         margin: 2px auto;
+      }
+   }
+
+   &-small {
+      width: 14px;
+      height: 14px;
+   }
+   &-medium {
+      width: 18px;
+      height: 18px;
+   }
+   &-large {
+      width: 24px;
+      height: 24px;
+   }
+}

src/lib/Components/CheckBox/CheckBox.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import CheckBox from './CheckBox';
+
+export default {
+   title: 'Components/CheckBox',
+   component: CheckBox,
+   decorators: [(story) => <div className="container">{story()}</div>],
+} as Meta<typeof CheckBox>;
+
+export const Template: StoryFn<typeof CheckBox> = (args) => (
+   <CheckBox {...args} checked />
+);
+
+export const Controlled: StoryFn<typeof CheckBox> = (args) => {
+   const [isChecked, setIsChecked] = React.useState(false);
+   return (
+      <CheckBox
+         checked={isChecked}
+         onChange={(e) => setIsChecked(e.target.checked)}
+         {...args}
+      />
+   );
+};

src/lib/Components/CheckBox/CheckBox.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CheckBox from './CheckBox';
+
+describe('CheckBox', () => {
+   it('renders without crashing', () => {
+      render(<CheckBox />);
+   });
+
+   it('renders a checkbox input element', () => {
+      render(<CheckBox />);
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+   });
+
+   it('toggles when clicked (uncontrolled)', async () => {
+      render(<CheckBox checked={false} />);
+      const checkbox = screen.getByRole('checkbox');
+
+      expect(checkbox).not.toBeChecked();
+
+      await userEvent.click(checkbox);
+
+      expect(checkbox).toBeChecked();
+   });
+});

src/lib/Components/CheckBox/CheckBox.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { useToggle } from '../../../Hooks';
+import { useFormContext } from '../FormControl';
+import { callAll } from '../../Utils/AllFunctionsCall';
+import './CheckBox.scss';
+
+/**
+ * Props for the CheckBox component.
+ *
+ * Extends standard HTML `<input type="checkbox">` props and includes
+ * support for size-based styling and form context integration.
+ *
+ * @property boxSize - Defines the visual size of the checkbox. Options are `'small'`, `'medium'`, or `'large'`.
+ */
+export interface CheckBoxProps extends React.ComponentPropsWithoutRef<'input'> {
+   /** Defines the visual size of the checkbox. */
+   boxSize?: 'small' | 'medium' | 'large';
+}
+
+/**
+ * A reusable checkbox component that supports both controlled and uncontrolled behavior.
+ * It also integrates with the `FormControl` context to support validation, error states,
+ * and form-level change tracking.
+ *
+ * @example
+ * // Controlled usage
+ * <CheckBox checked={isChecked} onChange={(e) => setChecked(e.target.checked)} />
+ *
+ * @example
+ * // Uncontrolled usage
+ * <CheckBox defaultChecked />
+ *
+ */
+function CheckBox({
+   checked,
+   boxSize = 'medium',
+   className,
+   ...props
+}: CheckBoxProps) {
+   const { value: checkValue, toggleValue: toggleCheck } = useToggle(checked);
+   const { isAlert, inputChange } = useFormContext();
+
+   const HandleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+         toggleCheck();
+
+         // Manually fire synthetic change for FormControl context
+         const syntheticEvent = {
+            target: { value: String(!checkValue) },
+         } as React.ChangeEvent<HTMLInputElement>;
+
+         if (inputChange) inputChange(syntheticEvent);
+      }
+   };
+
+   const HandleOnClick = (e: React.MouseEvent<HTMLInputElement>) => {
+      toggleCheck();
+   };
+
+   const { onKeyDown, onClick, onChange, ...resetProps } = props;
+
+   return (
+      <input
+         className={clsx(`checkbox checkbox-${boxSize}`, className, {
+            'checkbox-alert': isAlert,
+         })}
+         type="checkbox"
+         tabIndex={0}
+         onKeyDown={callAll(onKeyDown, HandleKeyDown)}
+         onClick={callAll(onClick, HandleOnClick)}
+         onChange={callAll(onChange, inputChange)}
+         value={String(checkValue)}
+         checked={checkValue}
+         {...resetProps}
+      />
+   );
+}
+
+export default CheckBox;

src/lib/Components/CheckBox/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckBox } from './CheckBox';
+export type { CheckBoxProps } from './CheckBox';

src/lib/Components/FormControl/FormControl.stories.tsx

@@ -6,6 +6,7 @@ import { TextArea } from '../../Components/TextArea';
 import { Slider } from '../Slider';
 import { Select } from '../Select';
 import { Options } from '../Select';
+import { CheckBox } from '../CheckBox';
 import type { Meta, StoryFn } from '@storybook/react';
 import { Template as Switch } from '../Switch/Switch.stories';
 import { useToggle } from '../../../Hooks';
@@ -156,3 +157,23 @@ export const SelectControl: StoryFn<typeof FormControl> = (args) => (
 //       </FormControl>
 //    );
 // };
+
+export const CheckBoxControl: StoryFn<typeof FormControl> = (args) => {
+   return (
+      <FormControl
+         style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+         }}
+         //
+         validate={(value) =>
+            value !== 'false' ? 'Please check Agreement' : ''
+         }
+         {...args}
+      >
+         <CheckBox boxSize="medium" checked />
+         <Label htmlFor="Data field">Agreement</Label>
+      </FormControl>
+   );
+};

src/lib/Components/index.ts

@@ -36,3 +36,4 @@ export * from './Subheading';
 export * from './Paragraph';
 export * from './Blockquote';
 export * from './PinInput';
+export * from './CheckBox';

todo.md

@@ -29,6 +29,7 @@
 -  [x] Refactor Accordion
 -  [x] Calendar
 -  [x] Pin Input
+-  [x] CheckBox
 
 ### helper Components