diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx index dfd40544..a49fe11e 100644 --- a/src/Checkbox.tsx +++ b/src/Checkbox.tsx @@ -27,6 +27,7 @@ export const Checkbox: FunctionComponent = props => { as="input" type="checkbox" id={id} + checked={checked} onChange={handleChange} position="absolute" css={{ clip: 'rect(1px, 1px, 1px, 1px)' }} diff --git a/src/Toggle.tsx b/src/Toggle.tsx index 0f563616..33bc1ce6 100644 --- a/src/Toggle.tsx +++ b/src/Toggle.tsx @@ -53,6 +53,7 @@ export const Toggle: FunctionComponent = props => { as="input" type="checkbox" id={id} + checked={checked} onChange={handleChange} position="absolute" css={{ clip: 'rect(1px, 1px, 1px, 1px)' }} diff --git a/src/__tests__/Checkbox.spec.tsx b/src/__tests__/Checkbox.spec.tsx index 5105394e..46137609 100644 --- a/src/__tests__/Checkbox.spec.tsx +++ b/src/__tests__/Checkbox.spec.tsx @@ -64,4 +64,14 @@ describe('Checkbox component', () => { expect(onChange).toHaveBeenLastCalledWith(false); wrapper.unmount(); }); + + it('passes checked prop to inner Input', () => { + let wrapper = mount(); + expect(wrapper.find('input')).toHaveProp('checked', true); + wrapper.unmount(); + + wrapper = mount(); + expect(wrapper.find('input')).toHaveProp('checked', false); + wrapper.unmount(); + }); }); diff --git a/src/__tests__/Toggle.spec.tsx b/src/__tests__/Toggle.spec.tsx index da6baa5c..5f1e1388 100644 --- a/src/__tests__/Toggle.spec.tsx +++ b/src/__tests__/Toggle.spec.tsx @@ -61,4 +61,14 @@ describe('Toggle component', () => { expect(onChange).toHaveBeenLastCalledWith(false); wrapper.unmount(); }); + + it('passes checked prop to inner Input', () => { + let wrapper = mount(); + expect(wrapper.find('input')).toHaveProp('checked', true); + wrapper.unmount(); + + wrapper = mount(); + expect(wrapper.find('input')).toHaveProp('checked', false); + wrapper.unmount(); + }); });