diff --git a/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx b/src/components/atoms/InternalCheckBox/InternalCheckBox.tsx index 89ce3afe..993ebca8 100644 --- 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) => void; onFocus?: (event: React.FocusEvent) => void; diff --git a/src/components/molecules/OakCheckBox/OakCheckBox.tsx b/src/components/molecules/OakCheckBox/OakCheckBox.tsx index 23d7d227..b7624088 100644 --- 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 index 5b0bc8d6..49493c81 100644 --- 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 { >