update SwitchField to allow updates on controlled component

.changeset/fifty-keys-move.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+update SwitchField to allow user updates on controlled component

docs/src/pages/components/switchfield/examples/SwitchFieldIsCheckedExample.tsx

@@ -1,5 +1,25 @@
-import { SwitchField } from '@aws-amplify/ui-react';
+import { SwitchField, Button } from '@aws-amplify/ui-react';
+import * as React from 'react';
 
 export const SwitchFieldIsCheckedExample = () => {
-  return <SwitchField label="This is a switch" isChecked={true} />;
+  const [isChecked, setIsChecked] = React.useState(true);
+
+  return (
+    <>
+      <SwitchField
+        label="This is a switch"
+        isChecked={isChecked}
+        onChange={(e) => {
+          setIsChecked(e.target.checked);
+        }}
+      />
+      <Button
+        onClick={() => {
+          setIsChecked(true);
+        }}
+      >
+        Switch On
+      </Button>
+    </>
+  );
 };

docs/src/pages/components/switchfield/react.mdx

@@ -43,9 +43,11 @@ The most basic usage simply includes a SwitchField component passing in a requir
 
 <Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>
 
-### isChecked
+### Controlled component
 
-The `isChecked` property is a `boolean` value that defines if the switch is on or off. This is a boolean property and being set to either true or false will change this into a controlled switchField which can only be switched on or off using this controlled value.
+The `SwitchFIeld` can be a controlled component by passing in the controlled boolean value as the `isChecked` prop.
+To allow the user to toggle a controlled `SwitchField`, the `onChange` handler must be passed in and update the controlled
+value. An example of this pattern is displayed below.
 
 <Example>
   <SwitchFieldIsCheckedExample />

packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx

@@ -94,6 +94,23 @@ describe('Switch Field', () => {
   });
 
   describe('Input', () => {
+    let updateControlledValue;
+    const ControlledSwitch = () => {
+      const [isChecked, setIsChecked] = React.useState(true);
+      const changeFunction = (e) => {
+        setIsChecked(e.target.checked);
+      };
+      updateControlledValue = setIsChecked;
+
+      return (
+        <SwitchField
+          label={label}
+          isChecked={isChecked}
+          onChange={changeFunction}
+        />
+      );
+    };
+
     it('should create a checkbox input element', async () => {
       const { container } = render(<SwitchField label={label} />);
 
@@ -128,14 +145,34 @@ describe('Switch Field', () => {
     });
 
     it('should set the input to checked with the isChecked prop', async () => {
-      const { container } = render(
-        <SwitchField label={label} isChecked={true} />
-      );
+      const { container } = render(<ControlledSwitch />);
 
       const field = container.getElementsByTagName('input')[0];
       expect(field).toBeChecked();
     });
 
+    it('should update the checked value when a controlled value is updated', async () => {
+      render(<ControlledSwitch />);
+
+      let input = await screen.findByLabelText(label);
+      expect(input).toBeChecked();
+
+      updateControlledValue(false);
+      input = await screen.findByLabelText(label);
+      expect(input).not.toBeChecked();
+    });
+
+    it('should update the checked value with a click event', async () => {
+      render(<ControlledSwitch />);
+
+      let input = await screen.findByLabelText(label);
+      expect(input).toBeChecked();
+
+      userEvent.click(input);
+      input = await screen.findByLabelText(label);
+      expect(input).not.toBeChecked();
+    });
+
     it('should set the input to checked with the defaultChecked prop', async () => {
       const { container } = render(
         <SwitchField label={label} defaultChecked={true} />

packages/react/src/primitives/SwitchField/useSwitch.ts

@@ -12,12 +12,11 @@ export const useSwitch = (props) => {
         event.preventDefault();
         return;
       }
-      if (!isControlled) {
-        typeof onChange === 'function' && onChange(event);
-        setIsOn(event.target.checked);
-      }
+
+      typeof onChange === 'function' && onChange(event);
+      setIsOn(event.target.checked);
     },
-    [onChange, isControlled, isDisabled]
+    [onChange, isDisabled]
   );
 
   if (isControlled && isOn !== isChecked) {