diff --git a/UNRELEASED.md b/UNRELEASED.md
index 2ff6214bf7f..2ec5de018c5 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Updated `react` and `react-dom` to version 16.14.0. This is now the minimum version of React required to use the `@shopify/polaris` library.
 - Dropping support for node 10.x
+- Made `autoComplete` prop in `TextField` a required string ([#4267](https://github.com/Shopify/polaris-react/pull/4267)). If you do not want the browser to autofill a user's information (for example an email input which is a customer's email, but not the email of the user who is entering the information), we recommend setting `autoComplete` to `"off"`.
 
 ### Enhancements
 
diff --git a/examples/create-react-app-ts-react-testing/src/App.tsx b/examples/create-react-app-ts-react-testing/src/App.tsx
index 3bdbb40f06a..b7a9e445fb6 100644
--- a/examples/create-react-app-ts-react-testing/src/App.tsx
+++ b/examples/create-react-app-ts-react-testing/src/App.tsx
@@ -99,12 +99,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -113,6 +115,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/create-react-app/src/App.js b/examples/create-react-app/src/App.js
index d4af13d515c..d32f5f846af 100644
--- a/examples/create-react-app/src/App.js
+++ b/examples/create-react-app/src/App.js
@@ -92,12 +92,14 @@ export function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -106,6 +108,7 @@ export function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/next.js/pages/index.js b/examples/next.js/pages/index.js
index 60180f28b36..a8780ae6957 100644
--- a/examples/next.js/pages/index.js
+++ b/examples/next.js/pages/index.js
@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'next.js'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/examples/webpack/src/App.js b/examples/webpack/src/App.js
index 1d82d125258..2ad0521454b 100644
--- a/examples/webpack/src/App.js
+++ b/examples/webpack/src/App.js
@@ -29,12 +29,9 @@ export default function App() {
     [],
   );
 
-  const toggleConnection = useCallback(
-    () => {
-      setConnected(!connected);
-    },
-    [connected],
-  );
+  const toggleConnection = useCallback(() => {
+    setConnected(!connected);
+  }, [connected]);
 
   const breadcrumbs = [{content: 'Sample apps'}, {content: 'webpack'}];
   const primaryAction = {content: 'New product'};
@@ -95,12 +92,14 @@ export default function App() {
                   label="First name"
                   placeholder="Tom"
                   onChange={handleFirstChange}
+                  autoComplete="given-name"
                 />
                 <TextField
                   value={last}
                   label="Last name"
                   placeholder="Ford"
                   onChange={handleLastChange}
+                  autoComplete="family-name"
                 />
               </FormLayout.Group>
 
@@ -109,6 +108,7 @@ export default function App() {
                 label="Email"
                 placeholder="example@email.com"
                 onChange={handleEmailChange}
+                autoComplete="email"
               />
 
               <ChoiceList
diff --git a/playground/DetailsPage.tsx b/playground/DetailsPage.tsx
index 686d54048d5..838a7aa8c22 100644
--- a/playground/DetailsPage.tsx
+++ b/playground/DetailsPage.tsx
@@ -577,11 +577,13 @@ export function DetailsPage() {
                 label="Title"
                 value="M60-A"
                 onChange={() => setIsDirty(true)}
+                autoComplete="off"
               />
               <TextField
                 label="Description"
                 value={descriptionValue}
                 onChange={handleChange}
+                autoComplete="off"
                 multiline
               />
             </FormLayout>
@@ -653,11 +655,13 @@ export function DetailsPage() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="off"
             multiline
           />
         </FormLayout>
diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
index dd7de0edffc..44e5be9514b 100644
--- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
+++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx
@@ -621,7 +621,7 @@ describe('<ComboBox/>', () => {
 function noop() {}
 
 function renderTextField() {
-  return <TextField label="" onChange={noop} />;
+  return <TextField label="" onChange={noop} autoComplete="off" />;
 }
 
 function renderNodeWithId() {
diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx
index 5597c8b7988..880fe3513da 100644
--- a/src/components/Autocomplete/components/TextField/TextField.tsx
+++ b/src/components/Autocomplete/components/TextField/TextField.tsx
@@ -11,7 +11,7 @@ export function TextField(props: TextFieldProps) {
         <BaseTextField
           {...props}
           role="combobox"
-          autoComplete={false}
+          autoComplete="off"
           ariaAutocomplete="list"
           ariaActiveDescendant={selectedOptionId}
           ariaControls={comboBoxId}
diff --git a/src/components/Autocomplete/tests/Autocomplete.test.tsx b/src/components/Autocomplete/tests/Autocomplete.test.tsx
index bfc942b6623..95f141d0988 100644
--- a/src/components/Autocomplete/tests/Autocomplete.test.tsx
+++ b/src/components/Autocomplete/tests/Autocomplete.test.tsx
@@ -151,7 +151,9 @@ describe('<Autocomplete/>', () => {
   function noop() {}
 
   function renderTextField() {
-    return <Autocomplete.TextField label="" onChange={noop} />;
+    return (
+      <Autocomplete.TextField label="" onChange={noop} autoComplete="off" />
+    );
   }
 
   function handleOnSelect(this: any, updatedSelection: string[]) {
diff --git a/src/components/ChoiceList/README.md b/src/components/ChoiceList/README.md
index e63693e2903..87b417f0cc2 100644
--- a/src/components/ChoiceList/README.md
+++ b/src/components/ChoiceList/README.md
@@ -322,6 +322,7 @@ function SingleOrMultiChoiceListWithChildrenContextExample() {
         labelHidden
         onChange={handleTextFieldChange}
         value={textFieldValue}
+        autoComplete="off"
       />
     ),
     [handleTextFieldChange, textFieldValue],
@@ -372,6 +373,7 @@ function SingleOrMultuChoiceListWithChildrenContextWhenSelectedExample() {
           labelHidden
           onChange={handleTextFieldChange}
           value={textFieldValue}
+          autoComplete="off"
         />
       ),
     [handleTextFieldChange, textFieldValue],
diff --git a/src/components/Filters/Filters.tsx b/src/components/Filters/Filters.tsx
index ad65dab43d2..a9efe1bf107 100644
--- a/src/components/Filters/Filters.tsx
+++ b/src/components/Filters/Filters.tsx
@@ -287,6 +287,7 @@ class FiltersInner extends Component<CombinedProps, State> {
             clearButton
             onClearButtonClick={onQueryClear}
             disabled={disabled}
+            autoComplete="off"
           />
         )}
       </ConnectedFilterControl>
diff --git a/src/components/Filters/README.md b/src/components/Filters/README.md
index e4880e96c7e..fcfb3d4d003 100644
--- a/src/components/Filters/README.md
+++ b/src/components/Filters/README.md
@@ -211,6 +211,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -423,6 +424,7 @@ function DataTableFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -555,6 +557,7 @@ function FiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -681,6 +684,7 @@ function DisableAllFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -816,6 +820,7 @@ function DisableSomeFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -829,6 +834,7 @@ function DisableSomeFiltersExample() {
           label="Vendor"
           value={vendor}
           onChange={handleVendorChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -960,6 +966,7 @@ function Playground() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1131,6 +1138,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1331,6 +1339,7 @@ function ResourceListFiltersExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/Form/README.md b/src/components/Form/README.md
index 15ba3eefef2..4faf1c6b79f 100644
--- a/src/components/Form/README.md
+++ b/src/components/Form/README.md
@@ -65,6 +65,7 @@ function FormOnSubmitExample() {
           onChange={handleEmailChange}
           label="Email"
           type="email"
+          autoComplete="email"
           helpText={
             <span>
               We’ll use this email address to inform you on future changes to
@@ -100,6 +101,7 @@ function FormWithoutNativeValidationExample() {
           onChange={handleUrlChange}
           label="App URL"
           type="url"
+          autoComplete="off"
         />
 
         <Button submit>Submit</Button>
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 0a56066ecd1..7e0870bf5c7 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -102,8 +102,13 @@ Use to stack form fields vertically, which makes them easier to scan and complet
 
 ```jsx
 <FormLayout>
-  <TextField label="Store name" onChange={() => {}} />
-  <TextField type="email" label="Account email" onChange={() => {}} />
+  <TextField label="Store name" onChange={() => {}} autoComplete="off" />
+  <TextField
+    type="email"
+    label="Account email"
+    onChange={() => {}}
+    autoComplete="email"
+  />
 </FormLayout>
 ```
 
@@ -130,8 +135,18 @@ Field groups will wrap automatically on smaller screens.
 ```jsx
 <FormLayout>
   <FormLayout.Group>
-    <TextField type="number" label="Minimum order" onChange={() => {}} />
-    <TextField type="number" label="Maximum order" onChange={() => {}} />
+    <TextField
+      type="number"
+      label="Minimum order"
+      onChange={() => {}}
+      autoComplete="off"
+    />
+    <TextField
+      type="number"
+      label="Maximum order"
+      onChange={() => {}}
+      autoComplete="off"
+    />
   </FormLayout.Group>
 </FormLayout>
 ```
@@ -157,10 +172,10 @@ For very short inputs, the width of the inputs may be reduced in order to fit mo
 ```jsx
 <FormLayout>
   <FormLayout.Group condensed>
-    <TextField label="Length" onChange={() => {}} />
-    <TextField label="Width" onChange={() => {}} />
-    <TextField label="Height" onChange={() => {}} />
-    <TextField label="Unit" onChange={() => {}} />
+    <TextField label="Length" onChange={() => {}} autoComplete="off" />
+    <TextField label="Width" onChange={() => {}} autoComplete="off" />
+    <TextField label="Height" onChange={() => {}} autoComplete="off" />
+    <TextField label="Unit" onChange={() => {}} autoComplete="off" />
   </FormLayout.Group>
 </FormLayout>
 ```
diff --git a/src/components/FormLayout/components/Group/tests/Group.test.tsx b/src/components/FormLayout/components/Group/tests/Group.test.tsx
index ef592a2fbcc..dbe1e5cb3a7 100644
--- a/src/components/FormLayout/components/Group/tests/Group.test.tsx
+++ b/src/components/FormLayout/components/Group/tests/Group.test.tsx
@@ -12,7 +12,7 @@ describe('<Group />', () => {
   let item: any;
 
   beforeAll(() => {
-    children = <TextField onChange={noop} label="test" />;
+    children = <TextField onChange={noop} label="test" autoComplete="off" />;
     title = 'Title';
     helpText = 'Help text';
     item = mountWithAppProvider(
diff --git a/src/components/FormLayout/components/Item/tests/Item.test.tsx b/src/components/FormLayout/components/Item/tests/Item.test.tsx
index cb7d28448cc..895f980beb6 100644
--- a/src/components/FormLayout/components/Item/tests/Item.test.tsx
+++ b/src/components/FormLayout/components/Item/tests/Item.test.tsx
@@ -7,7 +7,9 @@ import {Item} from '../Item';
 
 describe('<Item />', () => {
   it('renders its children', () => {
-    const children = <TextField onChange={noop} label="test" />;
+    const children = (
+      <TextField onChange={noop} label="test" autoComplete="off" />
+    );
     const item = mountWithAppProvider(<Item>{children}</Item>);
     expect(item.contains(children)).toBe(true);
   });
diff --git a/src/components/FormLayout/tests/FormLayout.test.tsx b/src/components/FormLayout/tests/FormLayout.test.tsx
index 016dc0ca970..f79ce9a08c5 100644
--- a/src/components/FormLayout/tests/FormLayout.test.tsx
+++ b/src/components/FormLayout/tests/FormLayout.test.tsx
@@ -7,7 +7,9 @@ import {FormLayout} from '../FormLayout';
 
 describe('<FormLayout />', () => {
   it('renders its children', () => {
-    const children = <TextField onChange={noop} label="test" />;
+    const children = (
+      <TextField onChange={noop} label="test" autoComplete="off" />
+    );
     const formLayout = mountWithAppProvider(
       <FormLayout>{children}</FormLayout>,
     );
diff --git a/src/components/Frame/README.md b/src/components/Frame/README.md
index 2725d9c6c9c..bde4a651b9c 100644
--- a/src/components/Frame/README.md
+++ b/src/components/Frame/README.md
@@ -245,12 +245,14 @@ function FrameExample() {
                 label="Full name"
                 value={nameFieldValue}
                 onChange={handleNameFieldChange}
+                autoComplete="name"
               />
               <TextField
                 type="email"
                 label="Email"
                 value={emailFieldValue}
                 onChange={handleEmailFieldChange}
+                autoComplete="email"
               />
             </FormLayout>
           </Card>
@@ -292,11 +294,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="off"
             multiline
           />
         </FormLayout>
@@ -579,12 +583,14 @@ function FrameExample() {
                 label="Full name"
                 value={nameFieldValue}
                 onChange={handleNameFieldChange}
+                autoComplete="name"
               />
               <TextField
                 type="email"
                 label="Email"
                 value={emailFieldValue}
                 onChange={handleEmailFieldChange}
+                autoComplete="email"
               />
             </FormLayout>
           </Card>
@@ -626,11 +632,13 @@ function FrameExample() {
             label="Subject"
             value={supportSubject}
             onChange={handleSubjectChange}
+            autoComplete="off"
           />
           <TextField
             label="Message"
             value={supportMessage}
             onChange={handleMessageChange}
+            autoComplete="off"
             multiline
           />
         </FormLayout>
diff --git a/src/components/IndexTable/README.md b/src/components/IndexTable/README.md
index 7c69e72bb47..46c3b1c75a0 100644
--- a/src/components/IndexTable/README.md
+++ b/src/components/IndexTable/README.md
@@ -603,6 +603,7 @@ function IndexTableWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -864,6 +865,7 @@ function IndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1049,6 +1051,7 @@ function SmallScreenIndexTableWithAllElementsExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md
index af5a543b6a1..983d61cb9be 100644
--- a/src/components/Layout/README.md
+++ b/src/components/Layout/README.md
@@ -416,8 +416,13 @@ Use for settings pages. When settings are grouped thematically in annotated sect
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} />
-        <TextField type="email" label="Account email" onChange={() => {}} />
+        <TextField label="Store name" onChange={() => {}} autoComplete="off" />
+        <TextField
+          type="email"
+          label="Account email"
+          onChange={() => {}}
+          autoComplete="email"
+        />
       </FormLayout>
     </Card>
   </Layout.AnnotatedSection>
@@ -441,8 +446,13 @@ Use for settings pages that need a banner or other content at the top.
   >
     <Card sectioned>
       <FormLayout>
-        <TextField label="Store name" onChange={() => {}} />
-        <TextField type="email" label="Account email" onChange={() => {}} />
+        <TextField label="Store name" onChange={() => {}} autoComplete="off" />
+        <TextField
+          type="email"
+          label="Account email"
+          onChange={() => {}}
+          autoComplete="email"
+        />
       </FormLayout>
     </Card>
   </Layout.AnnotatedSection>
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 35500d4c463..9bf36b32b41 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -369,6 +369,7 @@ function ModalWithPrimaryActionExample() {
                 onFocus={handleFocus}
                 value={DISCOUNT_LINK}
                 onChange={() => {}}
+                autoComplete="off"
                 connectedRight={
                   <Button primary onClick={handleClick}>
                     Copy link
diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx
index 1babc944a22..b98cab9d76f 100644
--- a/src/components/Pagination/tests/Pagination.test.tsx
+++ b/src/components/Pagination/tests/Pagination.test.tsx
@@ -188,7 +188,7 @@ describe('<Pagination />', () => {
       const spy = jest.fn();
       const wrapper = mountWithAppProvider(
         <div>
-          <TextField label="test" value="" onChange={noop} />
+          <TextField label="test" value="" onChange={noop} autoComplete="off" />
           <Pagination
             nextTooltip="j"
             previousKeys={[Key.KeyJ]}
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 8b3d4e51f8b..70f9f27f1bd 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -263,6 +263,7 @@ function PopoverFormExample() {
             label="Tags"
             value={tagValue}
             onChange={handleTagValueChange}
+            autoComplete="off"
           />
           <Button size="slim">Add filter</Button>
         </FormLayout>
diff --git a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
index 34255fe5b3e..917fd515381 100644
--- a/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
+++ b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
@@ -236,7 +236,14 @@ describe('<PopoverOverlay />', () => {
         activator={activator}
         onClose={spy}
       >
-        (<TextField label="Store name" value="Click me" onChange={() => {}} />)
+        (
+        <TextField
+          label="Store name"
+          value="Click me"
+          onChange={() => {}}
+          autoComplete="off"
+        />
+        )
       </PopoverOverlay>,
     );
 
@@ -267,6 +274,7 @@ describe('<PopoverOverlay />', () => {
           label="Store name"
           value="Click me"
           onChange={() => {}}
+          autoComplete="off"
         />
         )
       </PopoverOverlay>,
diff --git a/src/components/RangeSlider/README.md b/src/components/RangeSlider/README.md
index 07b4dc7efe6..a611bb2169f 100644
--- a/src/components/RangeSlider/README.md
+++ b/src/components/RangeSlider/README.md
@@ -352,6 +352,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleLowerTextFieldChange}
             onBlur={handleLowerTextFieldBlur}
+            autoComplete="off"
           />
           <TextField
             label="Max money spent"
@@ -363,6 +364,7 @@ function DualThumbRangeSliderExample() {
             step={step}
             onChange={handleUpperTextFieldChange}
             onBlur={handleUpperTextFieldBlur}
+            autoComplete="off"
           />
         </Stack>
       </div>
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 0dfbc97453e..4a8baa5eb01 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -595,6 +595,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -710,6 +711,7 @@ function ResourceListWithFilteringExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
@@ -1094,6 +1096,7 @@ function ResourceListExample() {
           label="Tagged with"
           value={taggedWith}
           onChange={handleTaggedWithChange}
+          autoComplete="off"
           labelHidden
         />
       ),
diff --git a/src/components/ResourceList/components/FilterControl/FilterControl.tsx b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
index e88283077ad..ed5d4808b15 100644
--- a/src/components/ResourceList/components/FilterControl/FilterControl.tsx
+++ b/src/components/ResourceList/components/FilterControl/FilterControl.tsx
@@ -159,6 +159,7 @@ export function FilterControl({
         onBlur={onSearchBlur}
         focused={focused}
         disabled={selectMode}
+        autoComplete="off"
       />
       {appliedFiltersWrapper}
     </FormLayout>
diff --git a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
index df2a817bead..e4f99bf8dc3 100644
--- a/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/DateSelector/DateSelector.tsx
@@ -202,7 +202,7 @@ export const DateSelector = memo(function DateSelector({
           value={dateTextFieldValue}
           error={userInputDateError}
           prefix={<Icon source={CalendarMinor} color="subdued" />}
-          autoComplete={false}
+          autoComplete="off"
           onChange={handleDateFieldChange}
           onBlur={handleDateBlur}
         />
diff --git a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
index ef0c53bf5b0..e07e467b5d8 100644
--- a/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
+++ b/src/components/ResourceList/components/FilterControl/components/FilterValueSelector/FilterValueSelector.tsx
@@ -86,6 +86,7 @@ export function FilterValueSelector({
             value={value}
             type={filter.textFieldType}
             onChange={onChange}
+            autoComplete="off"
           />
         </Stack>
       );
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
index 778f35b1e93..c2c8baa41c3 100644
--- a/src/components/Select/README.md
+++ b/src/components/Select/README.md
@@ -294,6 +294,7 @@ function SeparateValidationErrorExample() {
             value={weight}
             onChange={handleWeightChange}
             error={Boolean(!weight && unit)}
+            autoComplete="off"
           />
           <Select
             id={unitSelectID}
diff --git a/src/components/Spinner/README.md b/src/components/Spinner/README.md
index dd2df44e3c5..d22e06baa9d 100644
--- a/src/components/Spinner/README.md
+++ b/src/components/Spinner/README.md
@@ -109,6 +109,7 @@ function SpinnerWithFocusManagement() {
           focused={textFieldFocused}
           onChange={handleUrlChange}
           label={label}
+          autoComplete="off"
         />
         <Button submit>Submit</Button>
       </FormLayout>
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index da6c5b5eebc..97a4e065372 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -64,6 +64,45 @@ Text fields should:
 - Only ask for information that’s really needed
 - Validate input as soon as merchants have finished interacting with a field (but not before)
 
+### Autocomplete
+
+The autocomplete attribute in an `input` field controls two types of browser behavior:
+
+1.  **Browser autofill**: a feature that automatically populates form fields with previously-saved information, such as passwords, addresses, and credit card data.
+
+- Autofill is an important feature for our users. Google has found that ["users complete forms up to 30% faster"](https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en) when using autofill.
+- The WHATWG has a list of supported autofill values for the `autocomplete` attribute. [Review the section "4.10.18.7 Autofill"](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for all the input types and their corresponding autocomplete attribute values.
+
+2. **Browser autocomplete** - a feature that displays previously submitted values for that field.
+
+- When this is on for a field, a user is presented a list with previously submitted values for the input
+
+**Recommendation**
+
+> Always add an autocomplete attribute and value to inputs if the type is: color, date, datetime-local, email, month, number, password, range, search, tel, text, time, url, or week.
+
+#### Turning autofill/autocomplete off
+
+Even if you do not want the browser to autofill a user's information, it is recommended you still have an autocomplete attribute with the value off or nope.
+
+Unfortunately, [not all browsers support](https://caniuse.com/input-autocomplete-onoff) or respect autocomplete="off". This makes things challenging. Chrome, for example, [has a long outstanding bug](https://bugs.chromium.org/p/chromium/issues/detail?id=468153) and won't add support for off for now.
+
+| Browser | Support for `autocomplete="off"` | Details                                                                                                                                                             |
+| ------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Chrome  | Partial                          | Intentionally ignores `off` value when the user uses the browser's autofill functionality. [See bug](https://bugs.chromium.org/p/chromium/issues/detail?id=468153). |
+| Safari  | Partial                          | Ignores `off` value for `username`, `email` and `password` fields.                                                                                                  |
+| Firefox | Partial                          | Ignores `off` value for login forms. [See bug](https://bugzilla.mozilla.org/show_bug.cgi?id=956906).                                                                |
+| Edge    | Partial                          | Intentionally ignores `off` value when the user uses the browser's autofill functionality.                                                                          |
+
+Chrome does seem to turn autocomplete off when using the value nope (or any non valid string). However, we have seen some inconsistencies even with that support.
+
+**Recommendation (Chrome only)**
+
+- Turning off both **autofill** and **browser autocomplete** (previously submitted values) in Chrome
+  - Use `autocomplete=nope` and also **must have a `name` attribute**.
+- Turning off **browser autocomplete** (previously submitted values) in Chrome
+  - If you don't have `name` attribute and the field is not a typical autofill input (address, email, etc), use `autocomplete=off`.
+
 ---
 
 ## Content guidelines
@@ -179,7 +218,14 @@ function TextFieldExample() {
 
   const handleChange = useCallback((newValue) => setValue(newValue), []);
 
-  return <TextField label="Store name" value={value} onChange={handleChange} />;
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+    />
+  );
 }
 ```
 
@@ -211,6 +257,7 @@ function NumberFieldExample() {
       type="number"
       value={value}
       onChange={handleChange}
+      autoComplete="off"
     />
   );
 }
@@ -248,6 +295,7 @@ function EmailFieldExample() {
       type="email"
       value={value}
       onChange={handleChange}
+      autoComplete="email"
     />
   );
 }
@@ -285,6 +333,7 @@ function MultilineFieldExample() {
       value={value}
       onChange={handleChange}
       multiline={4}
+      autoComplete="off"
     />
   );
 }
@@ -338,6 +387,7 @@ function HiddenLabelExample() {
         value={value}
         disabled={selected === 'no'}
         onChange={handleTextChange}
+        autoComplete="off"
         connectedRight={
           <Select
             label="Unit of time"
@@ -372,6 +422,7 @@ function LabelActionExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       labelAction={{content: 'Look up codes'}}
+      autoComplete="off"
     />
   );
 }
@@ -400,6 +451,7 @@ function RightAlignExample() {
         labelHidden
         value={textFieldValue}
         onChange={handleTextFieldChange}
+        autoComplete="off"
         align="right"
       />
     </Stack>
@@ -426,6 +478,7 @@ function PlaceholderExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       placeholder="Example: North America, Europe"
+      autoComplete="off"
     />
   );
 }
@@ -465,6 +518,7 @@ function HelpTextExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       helpText="We’ll use this address if we need to contact you about your account."
+      autoComplete="email"
     />
   );
 }
@@ -505,6 +559,7 @@ function PrefixExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       prefix="$"
+      autoComplete="off"
     />
   );
 }
@@ -550,6 +605,7 @@ function ConnectedFieldsExample() {
       type="number"
       value={textFieldValue}
       onChange={handleTextFieldChange}
+      autoComplete="off"
       connectedLeft={
         <Select
           value={selectValue}
@@ -620,6 +676,7 @@ function ValidationErrorExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       error="Store name is required"
+      autoComplete="off"
     />
   );
 }
@@ -706,6 +763,7 @@ function SeparateValidationErrorExample() {
               id={textFieldID}
               value={textFieldValue}
               onChange={handleTextFieldValueChange}
+              autoComplete="off"
             />
           </FormLayout.Group>
         </FormLayout>
@@ -740,7 +798,7 @@ function SeparateValidationErrorExample() {
 Use to show that a textfield is not available for interaction. Most often used in forms when information is required only in a particular state. For example, the text field next to Other in a choice list when Other is not selected.
 
 ```jsx
-<TextField label="Store name" disabled />
+<TextField label="Store name" disabled autoComplete="off" />
 ```
 
 ### Text field with character count
@@ -764,6 +822,7 @@ function TextFieldWithCharacterCountExample() {
       value={textFieldValue}
       onChange={handleTextFieldChange}
       maxLength={20}
+      autoComplete="off"
       showCharacterCount
     />
   );
@@ -794,6 +853,7 @@ function TextFieldWithClearButtonExample() {
       onChange={handleTextFieldChange}
       clearButton
       onClearButtonClick={handleClearButtonClick}
+      autoComplete="off"
     />
   );
 }
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 45b56584cfd..31c5d62edde 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -92,8 +92,8 @@ interface NonMutuallyExclusiveProps {
   role?: string;
   /** Limit increment value for numeric and date-time inputs */
   step?: number;
-  /** Enable automatic completion by the browser */
-  autoComplete?: boolean | string;
+  /** Enable automatic completion by the browser. Set to "off" when you do not want the browser to fill in info */
+  autoComplete: string;
   /** Mimics the behavior of the native HTML attribute, limiting the maximum value */
   max?: number | string;
   /** Maximum character length for an input */
@@ -417,7 +417,7 @@ export function TextField({
     onBlur,
     onKeyPress: handleKeyPress,
     style,
-    autoComplete: normalizeAutoComplete(autoComplete),
+    autoComplete,
     className: inputClassName,
     onChange: handleChange,
     ref: inputRef,
@@ -522,16 +522,6 @@ export function TextField({
   }
 }
 
-function normalizeAutoComplete(autoComplete?: boolean | string) {
-  if (autoComplete === true) {
-    return 'on';
-  } else if (autoComplete === false) {
-    return 'off';
-  } else {
-    return autoComplete;
-  }
-}
-
 function normalizeAriaMultiline(multiline?: boolean | number) {
   if (!multiline) return undefined;
 
diff --git a/src/components/TextField/tests/TextField.test.tsx b/src/components/TextField/tests/TextField.test.tsx
index 980c7814f1f..7813a3ecbd3 100644
--- a/src/components/TextField/tests/TextField.test.tsx
+++ b/src/components/TextField/tests/TextField.test.tsx
@@ -29,6 +29,7 @@ describe('<TextField />', () => {
         pattern={pattern}
         inputMode={inputMode}
         align="left"
+        autoComplete="name"
       />,
     ).find('input');
 
@@ -45,6 +46,7 @@ describe('<TextField />', () => {
     expect(input.prop('spellCheck')).toBe(false);
     expect(input.prop('pattern')).toBe(pattern);
     expect(input.prop('inputMode')).toBe(inputMode);
+    expect(input.prop('autoComplete')).toBe('name');
   });
 
   it('blocks props not listed as component props to pass on the input', () => {
@@ -58,6 +60,7 @@ describe('<TextField />', () => {
         placeholder="A placeholder"
         value="Some value"
         prefix="test-prefix"
+        autoComplete="off"
       />,
     ).find('input');
 
@@ -66,7 +69,7 @@ describe('<TextField />', () => {
 
   it('always has an `aria-labelledby` property', () => {
     const textField = mountWithAppProvider(
-      <TextField label="TextField" onChange={noop} />,
+      <TextField label="TextField" onChange={noop} autoComplete="off" />,
     );
     const property = textField.find('input').prop('aria-labelledby');
 
@@ -77,7 +80,12 @@ describe('<TextField />', () => {
     it('is called with the new value', () => {
       const spy = jest.fn();
       const element = mountWithAppProvider(
-        <TextField id="MyTextField" label="TextField" onChange={spy} />,
+        <TextField
+          id="MyTextField"
+          label="TextField"
+          onChange={spy}
+          autoComplete="off"
+        />,
       );
       (element.find('input') as any).instance().value = 'two';
       element.find('input').simulate('change');
@@ -89,7 +97,12 @@ describe('<TextField />', () => {
     it('is called when the input is focused', () => {
       const spy = jest.fn();
       mountWithApp(
-        <TextField label="TextField" onFocus={spy} onChange={noop} />,
+        <TextField
+          label="TextField"
+          onFocus={spy}
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')!
         .trigger('onFocus');
@@ -101,7 +114,12 @@ describe('<TextField />', () => {
     it('is called when the input is blurred', () => {
       const spy = jest.fn();
       const element = mountWithAppProvider(
-        <TextField label="TextField" onBlur={spy} onChange={noop} />,
+        <TextField
+          label="TextField"
+          onBlur={spy}
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       element.find('input').simulate('focus');
       element.find('input').simulate('blur');
@@ -112,7 +130,12 @@ describe('<TextField />', () => {
   describe('id', () => {
     it('sets the id on the input', () => {
       const id = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')
         .prop('id');
@@ -121,7 +144,7 @@ describe('<TextField />', () => {
 
     it('sets a random id on the input when none is passed', () => {
       const id = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       )
         .find('input')
         .prop('id');
@@ -132,7 +155,7 @@ describe('<TextField />', () => {
     it('updates with the new id from props', () => {
       const id = 'input field';
       const textField = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
       textField.setProps({id});
       expect(textField.find('input').prop('id')).toBe(id);
@@ -141,7 +164,12 @@ describe('<TextField />', () => {
     it('updates with the previous id after the id prop has been removed', () => {
       const id = 'input field';
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id={id} onChange={noop} />,
+        <TextField
+          label="TextField"
+          id={id}
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       textField.setProps({});
       expect(textField.find('input').prop('id')).toBe(id);
@@ -151,7 +179,12 @@ describe('<TextField />', () => {
   describe('focused', () => {
     it('input is in focus state if focused is true', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} focused />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          focused
+        />,
       );
 
       expect(document.activeElement).toBe(element.find('input')!.domNode);
@@ -159,7 +192,7 @@ describe('<TextField />', () => {
 
     it('focuses input if focused is toggled', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
 
       element.setProps({focused: true});
@@ -169,7 +202,12 @@ describe('<TextField />', () => {
 
     it('blurs input if focused is toggled', () => {
       const element = mountWithApp(
-        <TextField label="TextField" onChange={noop} focused />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          focused
+        />,
       );
 
       element.setProps({focused: false});
@@ -179,28 +217,7 @@ describe('<TextField />', () => {
   });
 
   describe('autoComplete', () => {
-    it('defaults to no autoComplete attribute', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBeUndefined();
-    });
-
-    it('sets autoComplete to "off" when false', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" autoComplete={false} onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBe('off');
-    });
-
-    it('sets autoComplete to "on" when true', () => {
-      const textField = mountWithAppProvider(
-        <TextField label="TextField" autoComplete onChange={noop} />,
-      );
-      expect(textField.find('input').prop('autoComplete')).toBe('on');
-    });
-
-    it('sets autoComplete to string value when string is given', () => {
+    it('is passed to input as autoComplete', () => {
       const textField = mountWithAppProvider(
         <TextField
           label="TextField"
@@ -208,6 +225,7 @@ describe('<TextField />', () => {
           onChange={noop}
         />,
       );
+
       expect(textField.find('input').prop('autoComplete')).toBe('firstName');
     });
   });
@@ -215,7 +233,12 @@ describe('<TextField />', () => {
   describe('helpText', () => {
     it('connects the input to the help text', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" helpText="Some help" onChange={noop} />,
+        <TextField
+          label="TextField"
+          helpText="Some help"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const helpTextID = textField
         .find('input')
@@ -232,6 +255,7 @@ describe('<TextField />', () => {
           error={<span>Invalid</span>}
           label="TextField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop<string>('aria-invalid')).toBe(true);
@@ -242,7 +266,12 @@ describe('<TextField />', () => {
 
     it('connects the input to the error', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" error="Some error" onChange={noop} />,
+        <TextField
+          label="TextField"
+          error="Some error"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const errorID = textField.find('input').prop<string>('aria-describedby');
       expect(typeof errorID).toBe('string');
@@ -259,6 +288,7 @@ describe('<TextField />', () => {
             id={textFieldID}
             label="textField"
             onChange={noop}
+            autoComplete="off"
           />
           <InlineError message={errorMessage} fieldID={textFieldID} />
         </div>,
@@ -279,6 +309,7 @@ describe('<TextField />', () => {
           error="Some error"
           helpText="Some help"
           onChange={noop}
+          autoComplete="off"
         />,
       );
       const descriptions = textField
@@ -297,6 +328,7 @@ describe('<TextField />', () => {
           label="TextField"
           helpText="Some help"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -310,7 +342,12 @@ describe('<TextField />', () => {
   describe('prefix', () => {
     it('connects the input to the prefix and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" prefix="$" onChange={noop} />,
+        <TextField
+          label="TextField"
+          prefix="$"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -323,7 +360,13 @@ describe('<TextField />', () => {
 
     it('connects the input to the prefix, suffix, and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" prefix="$" suffix=".00" onChange={noop} />,
+        <TextField
+          label="TextField"
+          prefix="$"
+          suffix=".00"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -346,6 +389,7 @@ describe('<TextField />', () => {
           label="TextField"
           prefix={mockPrefixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -365,6 +409,7 @@ describe('<TextField />', () => {
           label="TextField"
           prefix={mockPrefixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -382,7 +427,12 @@ describe('<TextField />', () => {
   describe('suffix', () => {
     it('connects the input to the suffix and label', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" suffix="kg" onChange={noop} />,
+        <TextField
+          label="TextField"
+          suffix="kg"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       const labels = textField
         .find('input')
@@ -404,6 +454,7 @@ describe('<TextField />', () => {
           label="TextField"
           suffix={mockSuffixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -423,6 +474,7 @@ describe('<TextField />', () => {
           label="TextField"
           suffix={mockSuffixButton}
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -446,6 +498,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -463,6 +516,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -479,6 +533,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
         />,
       );
 
@@ -496,7 +551,12 @@ describe('<TextField />', () => {
   describe('type', () => {
     it('sets the type on the input', () => {
       const type = mountWithAppProvider(
-        <TextField label="TextField" type="email" onChange={noop} />,
+        <TextField
+          label="TextField"
+          type="email"
+          onChange={noop}
+          autoComplete="off"
+        />,
       )
         .find('input')
         .prop('type');
@@ -513,6 +573,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -528,6 +589,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').last().simulate('click');
@@ -543,6 +605,7 @@ describe('<TextField />', () => {
             type="number"
             value="not a number"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -563,6 +626,7 @@ describe('<TextField />', () => {
             label="TextField"
             type="number"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -578,6 +642,7 @@ describe('<TextField />', () => {
             step={6}
             value="4"
             onChange={noop}
+            autoComplete="off"
           />,
         );
         expect(element.find('input').prop('step')).toBe(6);
@@ -593,6 +658,7 @@ describe('<TextField />', () => {
             step={0.5}
             value="1.25"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -609,6 +675,7 @@ describe('<TextField />', () => {
             min={2}
             value="2"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -629,6 +696,7 @@ describe('<TextField />', () => {
             max={2}
             value="2"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -649,6 +717,7 @@ describe('<TextField />', () => {
             min={2}
             value="-1"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -669,6 +738,7 @@ describe('<TextField />', () => {
             max={2}
             value="12"
             onChange={spy}
+            autoComplete="off"
           />,
         );
 
@@ -685,6 +755,7 @@ describe('<TextField />', () => {
             id="MyNumberField"
             label="NumberField"
             type="number"
+            autoComplete="off"
             disabled
           />,
         );
@@ -698,6 +769,7 @@ describe('<TextField />', () => {
             id="MyNumberField"
             label="NumberField"
             type="number"
+            autoComplete="off"
             readOnly
           />,
         );
@@ -713,6 +785,7 @@ describe('<TextField />', () => {
             type="number"
             step={0}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         expect(element.find(Spinner)).toHaveLength(0);
@@ -728,6 +801,7 @@ describe('<TextField />', () => {
             value="3.02"
             step={1.044}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').first().simulate('click');
@@ -744,6 +818,7 @@ describe('<TextField />', () => {
             value="3.02"
             step={1.044}
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element.find('[role="button"]').last().simulate('click');
@@ -760,6 +835,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element
@@ -781,6 +857,7 @@ describe('<TextField />', () => {
             type="number"
             value="3"
             onChange={spy}
+            autoComplete="off"
           />,
         );
         element
@@ -822,6 +899,7 @@ describe('<TextField />', () => {
               type="number"
               value="3"
               onChange={spy}
+              autoComplete="off"
             />,
           );
           element
@@ -840,14 +918,25 @@ describe('<TextField />', () => {
   describe('multiline', () => {
     it('does not render a resizer if `multiline` is false', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+        />,
       );
       expect(textField.find(Resizer).exists()).toBe(false);
     });
 
     it('renders a resizer with `minimumLines` set to 1 if `multiline` is true', () => {
       const textField = mountWithApp(
-        <TextField label="TextField" id="MyField" onChange={noop} multiline />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+          multiline
+        />,
       );
       expect(textField).toContainReactComponentTimes(Resizer, 1, {
         minimumLines: 1,
@@ -861,6 +950,7 @@ describe('<TextField />', () => {
           id="MyField"
           onChange={noop}
           multiline={5}
+          autoComplete="off"
         />,
       );
 
@@ -878,6 +968,7 @@ describe('<TextField />', () => {
           onChange={noop}
           placeholder={placeholderText}
           multiline={5}
+          autoComplete="off"
         />,
       );
 
@@ -899,6 +990,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
 
@@ -926,6 +1018,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('textarea').prop('aria-multiline')).toBe(true);
@@ -942,6 +1035,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop('aria-multiline')).toBeUndefined();
@@ -957,6 +1051,7 @@ describe('<TextField />', () => {
           ariaActiveDescendant="Aria active descendant"
           ariaAutocomplete="Aria autocomplete"
           ariaControls="Aria controls"
+          autoComplete="off"
         />,
       );
       expect(textField.find('input').prop('aria-multiline')).toBeUndefined();
@@ -971,6 +1066,7 @@ describe('<TextField />', () => {
           id="MyField"
           onChange={noop}
           helpText="Help text"
+          autoComplete="off"
         />,
       );
 
@@ -982,7 +1078,13 @@ describe('<TextField />', () => {
 
     it('passes error to Labelled', () => {
       const textField = mountWithAppProvider(
-        <TextField label="TextField" id="MyField" onChange={noop} error />,
+        <TextField
+          label="TextField"
+          id="MyField"
+          onChange={noop}
+          autoComplete="off"
+          error
+        />,
       );
 
       expect(textField.find(Labelled).prop('error')).toBe(true);
@@ -994,6 +1096,7 @@ describe('<TextField />', () => {
           label="TextField"
           id="MyField"
           onChange={noop}
+          autoComplete="off"
           labelHidden
         />,
       );
@@ -1027,6 +1130,7 @@ describe('<TextField />', () => {
           onChange={noop}
           connectedLeft={connectedLeft}
           connectedRight={connectedRight}
+          autoComplete="off"
           prefix
         />,
       );
@@ -1042,7 +1146,7 @@ describe('<TextField />', () => {
 
     it('sets focus to the <input /> `onClick`', () => {
       const textField = mountWithApp(
-        <TextField label="TextField" onChange={noop} />,
+        <TextField label="TextField" onChange={noop} autoComplete="off" />,
       );
 
       expect(document.activeElement).not.toBe(textField.find('input')!.domNode);
@@ -1062,6 +1166,7 @@ describe('<TextField />', () => {
           onChange={noop}
           type="text"
           value="test value"
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1075,6 +1180,7 @@ describe('<TextField />', () => {
           label="TextField"
           type="text"
           onChange={noop}
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1094,6 +1200,7 @@ describe('<TextField />', () => {
           onChange={noop}
           onClearButtonClick={spy}
           value="test value"
+          autoComplete="off"
           clearButton
         />,
       );
@@ -1109,6 +1216,7 @@ describe('<TextField />', () => {
           onChange={noop}
           type="text"
           value="test value"
+          autoComplete="off"
         />,
       );
       expect(findByTestID(textField, 'clearButton').exists()).toBeFalsy();
@@ -1121,6 +1229,7 @@ describe('<TextField />', () => {
           onChange={noop}
           connectedLeft={<div />}
           connectedRight={<div />}
+          autoComplete="off"
         />,
       );
       expect(textField).toContainReactComponent('div', {
@@ -1132,7 +1241,12 @@ describe('<TextField />', () => {
   describe('requiredIndicator', () => {
     it('passes requiredIndicator prop to Labelled', () => {
       const element = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} requiredIndicator />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          autoComplete="off"
+          requiredIndicator
+        />,
       );
       const labelled = element.find(Labelled);
 
@@ -1143,14 +1257,24 @@ describe('<TextField />', () => {
   describe('monospaced', () => {
     it('passes monospaced prop to TextField', () => {
       const element = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} monospaced />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          monospaced
+          autoComplete="off"
+        />,
       );
       expect(element.prop('monospaced')).toBe(true);
     });
 
     it('applies the monospaced style', () => {
       const input = mountWithAppProvider(
-        <TextField label="TextField" onChange={noop} monospaced />,
+        <TextField
+          label="TextField"
+          onChange={noop}
+          monospaced
+          autoComplete="off"
+        />,
       ).find('input');
 
       expect(input.prop('className')).toContain('monospaced');
diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
index e8b9cb81071..e91a2bc8490 100644
--- a/src/components/Tooltip/README.md
+++ b/src/components/Tooltip/README.md
@@ -94,7 +94,7 @@ Use when the tooltip overlays interactive elements when active, for example a fo
       <Button>S</Button>
     </Tooltip>
   </ButtonGroup>
-  <TextField label="Product title" labelHidden multiline />
+  <TextField label="Product title" autoComplete="off" labelHidden multiline />
 </div>
 ```
 
diff --git a/src/components/TrapFocus/tests/TrapFocus.test.tsx b/src/components/TrapFocus/tests/TrapFocus.test.tsx
index 9d4711508d3..0ab42aecee8 100644
--- a/src/components/TrapFocus/tests/TrapFocus.test.tsx
+++ b/src/components/TrapFocus/tests/TrapFocus.test.tsx
@@ -113,7 +113,13 @@ describe('<TrapFocus />', () => {
     const trapFocus = mountWithApp(
       <TrapFocus>
         <button>First node</button>
-        <TextField label="" value="" onChange={noop} autoFocus />
+        <TextField
+          label=""
+          value=""
+          autoComplete="off"
+          onChange={noop}
+          autoFocus
+        />
       </TrapFocus>,
     );
 
@@ -124,7 +130,7 @@ describe('<TrapFocus />', () => {
     const trapFocus = mountWithApp(
       <TrapFocus>
         <a href="/">
-          <TextField label="" value="" onChange={noop} />
+          <TextField label="" value="" autoComplete="off" onChange={noop} />
         </a>
       </TrapFocus>,
     );
@@ -159,7 +165,13 @@ describe('<TrapFocus />', () => {
     it('allows default when trapping is false', () => {
       const trapFocus = mountWithApp(
         <TrapFocus trapping={false}>
-          <TextField label="" value="" onChange={noop} autoFocus />
+          <TextField
+            label=""
+            value=""
+            autoComplete="off"
+            onChange={noop}
+            autoFocus
+          />
         </TrapFocus>,
       );
 
@@ -175,7 +187,13 @@ describe('<TrapFocus />', () => {
     it('allows default when the related target is a child', () => {
       const trapFocus = mountWithApp(
         <TrapFocus>
-          <TextField label="" value="" onChange={noop} autoFocus />
+          <TextField
+            label=""
+            value=""
+            autoComplete="off"
+            onChange={noop}
+            autoFocus
+          />
         </TrapFocus>,
       );
 
diff --git a/src/components/VisuallyHidden/README.md b/src/components/VisuallyHidden/README.md
index bf47e597366..a7c39d5d539 100644
--- a/src/components/VisuallyHidden/README.md
+++ b/src/components/VisuallyHidden/README.md
@@ -51,8 +51,14 @@ Always provide a heading for a major page section such as a card. In rare cases
       label="Title"
       value="Artisanal Wooden Spoon"
       onChange={() => {}}
+      autoComplete="off"
+    />
+    <TextField
+      label="Description"
+      multiline
+      onChange={() => {}}
+      autoComplete="off"
     />
-    <TextField label="Description" multiline onChange={() => {}} />
   </FormLayout>
 </Card>
 ```