feat: allow OakCheckBox to be controlled

oaknational · Mar 25, 2024 · 248b30f · 248b30f
1 parent 6661973
commit 248b30f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx b/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx
@@ -29,7 +29,14 @@ export type BaseCheckBoxProps = {
   id: string;
   disabled?: boolean;
   value: string;
+  /**
+   * Uncontrolled checked state
+   */
   defaultChecked?: boolean;
+  /**
+   * Controlled checked state
+   */
+  checked?: boolean;
   onHovered?: (value: string, id: string, duration: number) => void;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;

diff --git a/src/components/molecules/OakCheckBox/OakCheckBox.tsx b/src/components/molecules/OakCheckBox/OakCheckBox.tsx
@@ -60,7 +60,8 @@ export const OakCheckBox = (props: OakCheckBoxProps) => {
     value,
     displayValue = value,
     disabled = false,
-    defaultChecked = false,
+    defaultChecked,
+    checked,
     onChange,
     onFocus,
     onBlur,
@@ -121,6 +122,7 @@ export const OakCheckBox = (props: OakCheckBoxProps) => {
             onFocus={onFocus}
             onBlur={onBlur}
             defaultChecked={defaultChecked}
+            checked={checked}
             disabled={disabled}
           />
         }

diff --git a/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap b/src/components/molecules/OakCheckBox/__snapshots__/OakCheckbox.test.tsx.snap
@@ -118,7 +118,6 @@ input:checked + .c7 {
   >
     <input
       className="c3 c4 c5 c6"
-      defaultChecked={false}
       disabled={false}
       id="checkbox-1"
       name="checkbox-1"