From 1f3b13dd020cf88cc0ddd82d3cc891684bc63c53 Mon Sep 17 00:00:00 2001
From: Ian <ian.harrison@adhocteam.us>
Date: Mon, 11 Mar 2024 16:46:36 -0500
Subject: [PATCH] make v3 default for all web components (#1082)

* initial commit

* udpate mem date

* fix typo

* update story

* tweak css

* tweak css

* fix tests

* tweak margin selector

* update va-banner

* remove v1 statement-of-truth story

* bump semvers

* va-file-input to v1 default

* update tests
---
 packages/core/package.json                    |   2 +-
 packages/storybook/.storybook/preview.js      |   1 +
 .../stories/va-accordion-uswds.stories.jsx    |  73 +++--
 .../stories/va-accordion.stories.jsx          |  43 +--
 .../va-additional-info-uswds.stories.jsx      |   5 +-
 .../stories/va-additional-info.stories.jsx    |   5 +-
 .../stories/va-alert-expandable.stories.jsx   |   2 +-
 .../stories/va-alert-uswds.stories.jsx        |  13 +-
 .../storybook/stories/va-alert.stories.jsx    |  14 +-
 .../stories/va-back-to-top.stories.jsx        |   2 +-
 .../storybook/stories/va-banner.stories.jsx   |   2 +-
 .../stories/va-breadcrumbs-uswds.stories.jsx  |  19 +-
 .../stories/va-breadcrumbs.stories.jsx        |  12 +-
 .../stories/va-button-pair-uswds.stories.jsx  |   5 +-
 .../stories/va-button-pair.stories.jsx        |   5 +-
 .../stories/va-button-uswds.stories.jsx       |   5 +-
 .../storybook/stories/va-button.stories.jsx   |  11 +-
 .../storybook/stories/va-card.stories.jsx     |   2 +-
 .../va-checkbox-group-uswds.stories.jsx       |  46 +---
 .../stories/va-checkbox-group.stories.jsx     |  14 +-
 .../stories/va-checkbox-uswds.stories.jsx     |   8 +-
 .../storybook/stories/va-checkbox.stories.jsx |   5 +-
 .../storybook/stories/va-date.stories.jsx     |   2 +-
 .../stories/va-file-input-uswds.stories.jsx   |   7 +-
 .../stories/va-file-input.stories.jsx         |   7 +-
 .../stories/va-header-minimal.stories.jsx     |   2 +-
 .../stories/va-icon-uswds.stories.jsx         |   2 +-
 .../storybook/stories/va-link.stories.jsx     |   2 +-
 .../stories/va-loading-indicator.stories.jsx  |   2 +-
 .../stories/va-maintenance-banner.stories.jsx |   2 +-
 .../va-memorable-date-uswds.stories.jsx       |  31 +--
 .../stories/va-memorable-date.stories.jsx     |  15 +-
 .../stories/va-minimal-footer.stories.jsx     |   2 +-
 .../stories/va-modal-uswds.stories.jsx        |  11 +-
 .../storybook/stories/va-modal.stories.jsx    |  11 +-
 .../stories/va-need-help.stories.jsx          |   2 +-
 .../stories/va-number-input-uswds.stories.jsx |  33 +--
 .../stories/va-number-input.stories.jsx       |  13 +-
 .../va-official-gov-banner.stories.jsx        |   2 +-
 .../storybook/stories/va-omb-info.stories.jsx |   2 +-
 .../stories/va-on-this-page.stories.jsx       |   2 +-
 .../stories/va-pagination-uswds.stories.jsx   |  11 +-
 .../stories/va-pagination.stories.jsx         |   5 +-
 .../va-privacy-agreement-uswds.stories.jsx    |   5 +-
 .../stories/va-privacy-agreement.stories.jsx  |   3 +-
 .../stories/va-process-list-uswds.stories.jsx |  33 +--
 .../stories/va-process-list.stories.jsx       |  11 +-
 .../stories/va-progress-bar.stories.jsx       |   2 +-
 .../stories/va-promo-banner.stories.jsx       |   2 +-
 .../stories/va-radio-uswds.stories.jsx        |  70 ++---
 .../storybook/stories/va-radio.stories.jsx    |  33 ++-
 .../stories/va-search-input-uswds.stories.jsx |   5 +-
 .../stories/va-search-input.stories.jsx       |   9 +-
 ...a-segmented-progress-bar-uswds.stories.jsx |   3 +-
 .../va-segmented-progress-bar.stories.jsx     |   5 +-
 .../stories/va-select-uswds.stories.jsx       |  13 +-
 .../storybook/stories/va-select.stories.jsx   |   5 +-
 .../va-statement-of-truth-uswds.stories.jsx   |   4 +-
 .../stories/va-statement-of-truth.stories.jsx |  75 ------
 .../stories/va-summary-box-uswds.stories.jsx  |  11 +-
 .../stories/va-summary-box.stories.jsx        |   2 +-
 .../storybook/stories/va-table.stories.jsx    |   3 +-
 .../stories/va-telephone.stories.jsx          |   2 +-
 .../stories/va-text-input-uswds.stories.jsx   |  35 +--
 .../stories/va-text-input.stories.jsx         |  25 +-
 .../stories/va-textarea-uswds.stories.jsx     |  20 +-
 .../storybook/stories/va-textarea.stories.jsx |   6 +-
 packages/web-components/package.json          |   2 +-
 .../va-accordion/va-accordion-item.e2e.ts     |  36 +--
 .../va-accordion/va-accordion-item.tsx        |   2 +-
 .../va-accordion/va-accordion.e2e.ts          |  64 ++---
 .../components/va-accordion/va-accordion.scss |   6 +-
 .../components/va-accordion/va-accordion.tsx  |   2 +-
 .../test/va-additional-info.e2e.ts            |  32 +--
 .../va-additional-info/va-additional-info.tsx |   2 +-
 .../components/va-alert/test/va-alert.e2e.ts  |  56 ++--
 .../src/components/va-alert/va-alert-slot.css |   2 +-
 .../src/components/va-alert/va-alert.scss     |  40 +--
 .../src/components/va-alert/va-alert.tsx      |   7 +-
 .../va-banner/test/va-banner.e2e.ts           |   4 +-
 .../src/components/va-banner/va-banner.tsx    |   2 +
 .../va-breadcrumbs/test/va-breadcrumbs.e2e.ts |  40 +--
 .../va-breadcrumbs/va-breadcrumbs.scss        |   4 +-
 .../va-breadcrumbs/va-breadcrumbs.tsx         |   2 +-
 .../va-button-pair/test/va-button-pair.e2e.ts |  30 +--
 .../va-button-pair/va-button-pair.scss        |  28 +-
 .../va-button-pair/va-button-pair.tsx         |  14 +-
 .../va-button/test/va-button.e2e.ts           |  88 +++---
 .../src/components/va-button/va-button.scss   |  22 +-
 .../src/components/va-button/va-button.tsx    |  14 +-
 .../test/va-checkbox-group.e2e.ts             | 100 +++----
 .../va-checkbox-group/va-checkbox-group.scss  |   4 +-
 .../va-checkbox-group/va-checkbox-group.tsx   |   2 +-
 .../va-checkbox/test/va-checkbox.e2e.ts       |  76 +++---
 .../components/va-checkbox/va-checkbox.scss   |  10 +-
 .../components/va-checkbox/va-checkbox.tsx    |  10 +-
 .../va-crisis-line-modal.tsx                  |   1 -
 .../src/components/va-date/va-date.css        |   4 +-
 .../src/components/va-date/va-date.tsx        |  15 +-
 .../va-file-input/test/va-file-input.e2e.ts   |   2 +-
 .../va-file-input/va-file-input.tsx           |   2 +
 .../test/va-memorable-date.e2e.ts             | 116 ++++----
 .../va-memorable-date/va-memorable-date.scss  |  18 +-
 .../va-memorable-date/va-memorable-date.tsx   |  15 +-
 .../components/va-modal/test/va-modal.e2e.ts  |  48 ++--
 .../src/components/va-modal/va-modal.scss     |   2 +-
 .../src/components/va-modal/va-modal.tsx      |   4 +-
 .../test/va-number-input.e2e.ts               |  74 ++---
 .../va-number-input/va-number-input.scss      |   2 +-
 .../va-number-input/va-number-input.tsx       |   2 +-
 .../va-omb-info/test/va-omb-info.e2e.ts       |   2 +-
 .../components/va-omb-info/va-omb-info.tsx    |   3 +
 .../va-pagination/test/va-pagination.e2e.ts   |  50 ++--
 .../va-pagination/va-pagination.scss          |   2 +-
 .../va-pagination/va-pagination.tsx           |   6 +-
 .../test/va-privacy-agreement.e2e.ts          |  18 +-
 .../va-privacy-agreement.scss                 |   2 +-
 .../va-privacy-agreement.tsx                  |   7 +-
 .../test/va-process-list.e2e.ts               |  10 +-
 .../va-process-list/va-process-list.scss      |   2 +-
 .../va-process-list/va-process-list.tsx       |   2 +-
 .../test/va-radio-option.e2e.ts               |  28 +-
 .../va-radio-option/va-radio-option.scss      |  12 +-
 .../va-radio-option/va-radio-option.tsx       |   2 +-
 .../components/va-radio/test/va-radio.e2e.ts  | 254 +++++++++---------
 .../src/components/va-radio/va-radio.scss     |   6 +-
 .../src/components/va-radio/va-radio.tsx      |   2 +-
 .../test/va-search-input.e2e.ts               |  38 +--
 .../va-search-input/va-search-input.scss      |   8 +-
 .../va-search-input/va-search-input.tsx       |   2 +-
 .../test/va-segmented-progress-bar.e2e.ts     |  38 +--
 .../va-segmented-progress-bar.tsx             |   2 +-
 .../va-select/test/va-select.e2e.ts           |  26 +-
 .../src/components/va-select/va-select.scss   |  14 +-
 .../src/components/va-select/va-select.tsx    |  10 +-
 .../va-statement-of-truth.tsx                 |   2 -
 .../va-summary-box/test/va-summary-box.e2e.ts |  16 +-
 .../va-summary-box/va-summary-box.tsx         |   2 +-
 .../va-text-input/test/va-text-input.e2e.ts   | 106 ++++----
 .../va-text-input/va-text-input.scss          |  12 +-
 .../va-text-input/va-text-input.tsx           |  10 +-
 .../va-textarea/test/va-textarea.e2e.ts       |  70 ++---
 .../components/va-textarea/va-textarea.scss   |   8 +-
 .../components/va-textarea/va-textarea.tsx    |   2 +-
 .../web-components/src/mixins/focusable.css   |   2 +-
 .../src/mixins/form-field-error.css           |   2 +-
 .../src/mixins/uswds-error-border.scss        |  12 +-
 .../src/mixins/uswds-input-width.scss         |   2 +-
 148 files changed, 1282 insertions(+), 1358 deletions(-)
 delete mode 100644 packages/storybook/stories/va-statement-of-truth.stories.jsx

diff --git a/packages/core/package.json b/packages/core/package.json
index e8ba70b20..a1a962209 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "37.2.0",
+  "version": "38.0.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index c0712d752..916f93997 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -88,6 +88,7 @@ export const parameters = {
         'About',
         ['Introduction'],
         'Components',
+        'V1 Components',
         'Under development',
         'Deprecated',
       ],
diff --git a/packages/storybook/stories/va-accordion-uswds.stories.jsx b/packages/storybook/stories/va-accordion-uswds.stories.jsx
index 2a5d00c3c..9c2a09072 100644
--- a/packages/storybook/stories/va-accordion-uswds.stories.jsx
+++ b/packages/storybook/stories/va-accordion-uswds.stories.jsx
@@ -10,7 +10,7 @@ const accordionDocs = getWebComponentDocs('va-accordion');
 const accordionItem = getWebComponentDocs('va-accordion-item');
 
 export default {
-  title: 'USWDS/Accordion USWDS',
+  title: 'Components/Accordion USWDS',
   id: 'uswds/va-accordion',
   subcomponents: componentStructure(accordionItem),
   parameters: {
@@ -23,7 +23,7 @@ export default {
 
 const Template = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds id="first" header="First Amendment">
+    <va-accordion-item id="first" header="First Amendment">
         <p>
           Congress shall make no law respecting an establishment of religion, or
           prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -31,13 +31,13 @@ const Template = args => (
           petition the Government for a redress of grievances.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="second" header="Second Amendment">
+    <va-accordion-item id="second" header="Second Amendment">
         <p>
           A well regulated Militia, being necessary to the security of a free State, 
           the right of the people to keep and bear Arms, shall not be infringed.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="third" header="Third Amendment">
+    <va-accordion-item id="third" header="Third Amendment">
         <p>
           No Soldier shall, in time of peace be quartered in any house, without the 
           consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
@@ -49,7 +49,7 @@ const Template = args => (
 const BorderedTemplate = args => {  
   return (
     <va-accordion {...args}>
-      <va-accordion-item uswds id="first" bordered="true" header="First Amendment">
+      <va-accordion-item id="first" bordered="true" header="First Amendment">
           <p>
             Congress shall make no law respecting an establishment of religion, or
             prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -57,13 +57,13 @@ const BorderedTemplate = args => {
             petition the Government for a redress of grievances.
           </p>
       </va-accordion-item>
-      <va-accordion-item uswds id="second" bordered="true" header="Second Amendment">
+      <va-accordion-item id="second" bordered="true" header="Second Amendment">
           <p>
             A well regulated Militia, being necessary to the security of a free State, 
             the right of the people to keep and bear Arms, shall not be infringed.
           </p>
       </va-accordion-item>
-      <va-accordion-item uswds id="third" bordered="true" header="Third Amendment">
+      <va-accordion-item id="third" bordered="true" header="Third Amendment">
           <p>
             No Soldier shall, in time of peace be quartered in any house, without the 
             consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
@@ -75,7 +75,7 @@ const BorderedTemplate = args => {
 
 const TemplateSubheader = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds id="first" header="First Amendment" subheader="Subheader">
+    <va-accordion-item id="first" header="First Amendment" subheader="Subheader">
         <p>
           Congress shall make no law respecting an establishment of religion, or
           prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -83,13 +83,13 @@ const TemplateSubheader = args => (
           petition the Government for a redress of grievances.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="second" header="Second Amendment" subheader="Subheader">
+    <va-accordion-item id="second" header="Second Amendment" subheader="Subheader">
         <p>
           A well regulated Militia, being necessary to the security of a free State, 
           the right of the people to keep and bear Arms, shall not be infringed.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="third" header="Third Amendment" subheader="Subheader">
+    <va-accordion-item id="third" header="Third Amendment" subheader="Subheader">
         <p>
           No Soldier shall, in time of peace be quartered in any house, without the 
           consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
@@ -100,7 +100,7 @@ const TemplateSubheader = args => (
 
 const TemplateIconHeaders = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds id="first" header="First Amendment" subheader="Subheader">
+    <va-accordion-item id="first" header="First Amendment" subheader="Subheader">
       <i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
       <i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>  
       <p>
@@ -110,7 +110,7 @@ const TemplateIconHeaders = args => (
         petition the Government for a redress of grievances.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="second" header="Second Amendment" subheader="Subheader">
+    <va-accordion-item id="second" header="Second Amendment" subheader="Subheader">
       <i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
       <i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>  
       <p>
@@ -118,7 +118,7 @@ const TemplateIconHeaders = args => (
         the right of the people to keep and bear Arms, shall not be infringed.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="third" header="Third Amendment" subheader="Subheader">
+    <va-accordion-item id="third" header="Third Amendment" subheader="Subheader">
       <i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
       <i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>  
       <p>
@@ -131,7 +131,7 @@ const TemplateIconHeaders = args => (
 
 const TemplateHeadlineSlot = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds id="first">
+    <va-accordion-item id="first">
       <h6 slot="headline">First Amendment</h6>
       <p>
         Congress shall make no law respecting an establishment of religion, or
@@ -140,14 +140,14 @@ const TemplateHeadlineSlot = args => (
         petition the Government for a redress of grievances.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="second">
+    <va-accordion-item id="second">
       <h6 slot="headline">Second Amendment</h6>
       <p>
         A well regulated Militia, being necessary to the security of a free State, 
         the right of the people to keep and bear Arms, shall not be infringed.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="third">
+    <va-accordion-item id="third">
       <h6 slot="headline">Third Amendment</h6>
       <p>
         No Soldier shall, in time of peace be quartered in any house, without the 
@@ -160,7 +160,7 @@ const TemplateHeadlineSlot = args => (
 
 const TemplateLevel = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds level="5" id="first" header="First Amendment">
+    <va-accordion-item level="5" id="first" header="First Amendment">
       <p>
         Congress shall make no law respecting an establishment of religion, or
         prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -168,13 +168,13 @@ const TemplateLevel = args => (
         petition the Government for a redress of grievances.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds level="5" id="second" header="Second Amendment">
+    <va-accordion-item level="5" id="second" header="Second Amendment">
       <p>
         A well regulated Militia, being necessary to the security of a free State, 
         the right of the people to keep and bear Arms, shall not be infringed.
       </p>
     </va-accordion-item>
-    <va-accordion-item uswds level="5" id="third" header="Third Amendment">
+    <va-accordion-item level="5" id="third" header="Third Amendment">
         <p>
           No Soldier shall, in time of peace be quartered in any house, without the 
           consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
@@ -192,11 +192,11 @@ const I18nTemplate = args => {
 
   return (
     <div>
-      <va-button uswds onClick={e => setLang('es')} text="Español"/>
-      <va-button uswds onClick={e => setLang('en')} text="English"/>
-      <va-button uswds onClick={e => setLang('tl')} text="Tagalog"/>
-      <va-accordion uswds>
-        <va-accordion-item id="first" header="First Amendment" uswds>
+      <va-button onClick={e => setLang('es')} text="Español"/>
+      <va-button onClick={e => setLang('en')} text="English"/>
+      <va-button onClick={e => setLang('tl')} text="Tagalog"/>
+      <va-accordion>
+        <va-accordion-item id="first" header="First Amendment">
           <p>
             Congress shall make no law respecting an establishment of religion, or
             prohibiting the free exercise thereof; or abridging the freedom of
@@ -204,14 +204,14 @@ const I18nTemplate = args => {
             assemble, and to petition the Government for a redress of grievances.
           </p>
         </va-accordion-item>
-        <va-accordion-item id="second" header="Second Amendment" uswds>
+        <va-accordion-item id="second" header="Second Amendment">
           <p>
             A well regulated Militia, being necessary to the security of a free
             State, the right of the people to keep and bear Arms, shall not be
             infringed.
           </p>
         </va-accordion-item>
-        <va-accordion-item id="third" header="Third Amendment" uswds>
+        <va-accordion-item id="third" header="Third Amendment">
           <p>
             No Soldier shall, in time of peace be quartered in any house, without
             the consent of the Owner, nor in time of war, but in a manner to be
@@ -225,7 +225,7 @@ const I18nTemplate = args => {
 
 const ManyItemsTemplate = args => (
   <va-accordion {...args}>
-    <va-accordion-item uswds id="first" header="First Amendment">
+    <va-accordion-item id="first" header="First Amendment">
         <p>
           Congress shall make no law respecting an establishment of religion, or
           prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -233,26 +233,26 @@ const ManyItemsTemplate = args => (
           petition the Government for a redress of grievances.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="second" header="Second Amendment">
+    <va-accordion-item id="second" header="Second Amendment">
         <p>
           A well regulated Militia, being necessary to the security of a free State, 
           the right of the people to keep and bear Arms, shall not be infringed.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="third" header="Third Amendment">
+    <va-accordion-item id="third" header="Third Amendment">
         <p>
           No Soldier shall, in time of peace be quartered in any house, without the 
           consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="fourth" header="Fourth Amendment">
+    <va-accordion-item id="fourth" header="Fourth Amendment">
         <p>
         The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, 
         shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly 
         describing the place to be searched, and the persons or things to be seized.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="fifth" header="Fifth Amendment">
+    <va-accordion-item id="fifth" header="Fifth Amendment">
         <p>
         No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, 
         except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; 
@@ -261,7 +261,7 @@ const ManyItemsTemplate = args => (
         shall private property be taken for public use, without just compensation.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="sixth" header="Sixth Amendment">
+    <va-accordion-item id="sixth" header="Sixth Amendment">
         <p>
         In all criminal prosecutions, the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the State 
         and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to 
@@ -269,23 +269,23 @@ const ManyItemsTemplate = args => (
         for obtaining witnesses in his favor, and to have the Assistance of Counsel for his defence.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="seventh" header="Seventh Amendment">
+    <va-accordion-item id="seventh" header="Seventh Amendment">
         <p>
         In Suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, 
         and no fact tried by a jury, shall be otherwise re-examined in any Court of the United States, than according to the rules of the common law.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="eighth" header="Eighth Amendment">
+    <va-accordion-item id="eighth" header="Eighth Amendment">
         <p>
         Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="ninth" header="Ninth Amendment">
+    <va-accordion-item id="ninth" header="Ninth Amendment">
         <p>
         The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.
         </p>
     </va-accordion-item>
-    <va-accordion-item uswds id="tenth" header="Tenth Amendment">
+    <va-accordion-item id="tenth" header="Tenth Amendment">
         <p>
         The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
         </p>
@@ -297,7 +297,6 @@ const ManyItemsTemplate = args => (
 const defaultArgs = {
   'bordered': false,
   'open-single': undefined,
-  uswds: true
 };
 
 export const Default = Template.bind(null);
diff --git a/packages/storybook/stories/va-accordion.stories.jsx b/packages/storybook/stories/va-accordion.stories.jsx
index 811b8decf..1652e0775 100644
--- a/packages/storybook/stories/va-accordion.stories.jsx
+++ b/packages/storybook/stories/va-accordion.stories.jsx
@@ -10,7 +10,7 @@ const accordionDocs = getWebComponentDocs('va-accordion');
 const accordionItem = getWebComponentDocs('va-accordion-item');
 
 export default {
-  title: 'Components/Accordion',
+  title: 'V1 Components/Accordion',
   id: 'components/va-accordion',
   subcomponents: componentStructure(accordionItem),
   parameters: {
@@ -25,19 +25,19 @@ const Template = args => {
   const { headline, level, ...rest } = args;
   return (
     <va-accordion {...rest}>
-      <va-accordion-item id="first">
+      <va-accordion-item id="first" uswds="false">
         {headline}
         Congress shall make no law respecting an establishment of religion, or
         prohibiting the free exercise thereof; or abridging the freedom of
         speech, or of the press; or the right of the people peaceably to
         assemble, and to petition the Government for a redress of grievances.
       </va-accordion-item>
-      <va-accordion-item id="second" level={level} header="Second Amendment">
+      <va-accordion-item id="second" level={level} header="Second Amendment" uswds="false">
         A well regulated Militia, being necessary to the security of a free
         State, the right of the people to keep and bear Arms, shall not be
         infringed.
       </va-accordion-item>
-      <va-accordion-item id="third" level={level} header="Third Amendment">
+      <va-accordion-item id="third" level={level} header="Third Amendment" uswds="false">
         No Soldier shall, in time of peace be quartered in any house, without
         the consent of the Owner, nor in time of war, but in a manner to be
         prescribed by law.
@@ -54,6 +54,7 @@ const TemplateSubheader = args => {
         level={level}
         header="First Amendment"
         subheader="First Amendment Subheader"
+        uswds="false"
       >
         Congress shall make no law respecting an establishment of religion, or
         prohibiting the free exercise thereof; or abridging the freedom of
@@ -64,6 +65,7 @@ const TemplateSubheader = args => {
         level={level}
         header="Second Amendment"
         subheader="Second Amendment Subheader"
+        uswds="false"
       >
         A well regulated Militia, being necessary to the security of a free
         State, the right of the people to keep and bear Arms, shall not be
@@ -77,7 +79,7 @@ const TemplateIcons = args => {
   const { headline, level, ...rest } = args;
   return (
     <va-accordion {...rest}>
-      <va-accordion-item id="first">
+      <va-accordion-item id="first" uswds="false">
         {headline}
         <i slot="icon" className="fas fa-paperclip" aria-hidden="true"></i>
         Congress shall make no law respecting an establishment of religion, or
@@ -85,13 +87,13 @@ const TemplateIcons = args => {
         speech, or of the press; or the right of the people peaceably to
         assemble, and to petition the Government for a redress of grievances.
       </va-accordion-item>
-      <va-accordion-item id="second" level={level} header="Second Amendment">
+      <va-accordion-item id="second" level={level} header="Second Amendment" uswds="false">
         <i slot='icon' className="fas fa-info-circle vads-u-color--green"></i>	
         A well regulated Militia, being necessary to the security of a free
         State, the right of the people to keep and bear Arms, shall not be
         infringed.
       </va-accordion-item>
-      <va-accordion-item id="third" level={level} header="Third Amendment" subheader="Third Amendment Subheader">
+      <va-accordion-item id="third" level={level} header="Third Amendment" subheader="Third Amendment Subheader" uswds="false">
          <i slot='icon' className="fas fa-info-circle vads-u-color--green"></i>	
          <i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>
         No Soldier shall, in time of peace be quartered in any house, without
@@ -116,19 +118,19 @@ const I18nTemplate = args => {
       <button onClick={e => setLang('en')}>English</button>
       <button onClick={e => setLang('tl')}>Tagalog</button>
       <va-accordion {...rest}>
-        <va-accordion-item id="first">
+        <va-accordion-item id="first" uswds="false">
           {headline}
           Congress shall make no law respecting an establishment of religion, or
           prohibiting the free exercise thereof; or abridging the freedom of
           speech, or of the press; or the right of the people peaceably to
           assemble, and to petition the Government for a redress of grievances.
         </va-accordion-item>
-        <va-accordion-item id="second" level={level} header="Second Amendment">
+        <va-accordion-item id="second" level={level} header="Second Amendment" uswds="false">
           A well regulated Militia, being necessary to the security of a free
           State, the right of the people to keep and bear Arms, shall not be
           infringed.
         </va-accordion-item>
-        <va-accordion-item id="third" level={level} header="Third Amendment">
+        <va-accordion-item id="third" level={level} header="Third Amendment" uswds="false">
           No Soldier shall, in time of peace be quartered in any house, without
           the consent of the Owner, nor in time of war, but in a manner to be
           prescribed by law.
@@ -140,7 +142,7 @@ const I18nTemplate = args => {
 
 const ManyItemsTemplate = args => (
   <va-accordion {...args}>
-    <va-accordion-item id="first" header="First Amendment">
+    <va-accordion-item id="first" header="First Amendment" uswds="false">
         <p>
           Congress shall make no law respecting an establishment of religion, or
           prohibiting the free exercise thereof; or abridging the freedom of speech,
@@ -148,26 +150,26 @@ const ManyItemsTemplate = args => (
           petition the Government for a redress of grievances.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="second" header="Second Amendment">
+    <va-accordion-item id="second" header="Second Amendment" uswds="false">
         <p>
           A well regulated Militia, being necessary to the security of a free State, 
           the right of the people to keep and bear Arms, shall not be infringed.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="third" header="Third Amendment">
+    <va-accordion-item id="third" header="Third Amendment" uswds="false">
         <p>
           No Soldier shall, in time of peace be quartered in any house, without the 
           consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="fourth" header="Fourth Amendment">
+    <va-accordion-item id="fourth" header="Fourth Amendment" uswds="false">
         <p>
         The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, 
         shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly 
         describing the place to be searched, and the persons or things to be seized.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="fifth" header="Fifth Amendment">
+    <va-accordion-item id="fifth" header="Fifth Amendment" uswds="false">
         <p>
         No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, 
         except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; 
@@ -176,7 +178,7 @@ const ManyItemsTemplate = args => (
         shall private property be taken for public use, without just compensation.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="sixth" header="Sixth Amendment">
+    <va-accordion-item id="sixth" header="Sixth Amendment" uswds="false">
         <p>
         In all criminal prosecutions, the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the State 
         and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to 
@@ -184,23 +186,23 @@ const ManyItemsTemplate = args => (
         for obtaining witnesses in his favor, and to have the Assistance of Counsel for his defence.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="seventh" header="Seventh Amendment">
+    <va-accordion-item id="seventh" header="Seventh Amendment" uswds="false">
         <p>
         In Suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved, 
         and no fact tried by a jury, shall be otherwise re-examined in any Court of the United States, than according to the rules of the common law.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="eighth" header="Eighth Amendment">
+    <va-accordion-item id="eighth" header="Eighth Amendment" uswds="false">
         <p>
         Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="ninth" header="Ninth Amendment">
+    <va-accordion-item id="ninth" header="Ninth Amendment" uswds="false">
         <p>
         The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.
         </p>
     </va-accordion-item>
-    <va-accordion-item id="tenth" header="Tenth Amendment">
+    <va-accordion-item id="tenth" header="Tenth Amendment" uswds="false">
         <p>
         The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
         </p>
@@ -213,6 +215,7 @@ const defaultArgs = {
   'bordered': false,
   'headline': <h6 slot="headline">First Amendment Headline</h6>,
   'open-single': undefined,
+  'uswds': false
 };
 
 export const Default = Template.bind(null);
diff --git a/packages/storybook/stories/va-additional-info-uswds.stories.jsx b/packages/storybook/stories/va-additional-info-uswds.stories.jsx
index 6b95aecc9..c297a5bff 100644
--- a/packages/storybook/stories/va-additional-info-uswds.stories.jsx
+++ b/packages/storybook/stories/va-additional-info-uswds.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const additionalInfoDocs = getWebComponentDocs('va-additional-info');
 
 export default {
-  title: 'USWDS/Additional info USWDS',
+  title: 'Components/Additional info USWDS',
   id: 'uswds/va-additional-info',
   parameters: {
     componentSubtitle: `va-additional-info web component`,
@@ -18,14 +18,12 @@ export default {
 };
 
 const defaultArgs = {
-  'uswds': true,
   'trigger': 'Additional Information',
   'disable-border': false,
   'disable-analytics': false,
 };
 
 const Template = ({
-  uswds,
   trigger,
   'disable-border': disableBorder,
   'disable-analytics': disableAnalytics,
@@ -34,7 +32,6 @@ const Template = ({
     <>
       <p>Surrounding content.</p>
       <va-additional-info
-        uswds={uswds}
         trigger={trigger}
         disable-analytics={disableAnalytics}
         disable-border={disableBorder}
diff --git a/packages/storybook/stories/va-additional-info.stories.jsx b/packages/storybook/stories/va-additional-info.stories.jsx
index b6b194d53..b71b8d546 100644
--- a/packages/storybook/stories/va-additional-info.stories.jsx
+++ b/packages/storybook/stories/va-additional-info.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const additionalInfoDocs = getWebComponentDocs('va-additional-info');
 
 export default {
-  title: 'Components/Additional info',
+  title: 'V1 Components/Additional info',
   id: 'components/va-additional-info',
   parameters: {
     componentSubtitle: `va-additional-info web component`,
@@ -21,12 +21,14 @@ const defaultArgs = {
   'trigger': 'Additional Information',
   'disable-border': false,
   'disable-analytics': false,
+  'uswds': false
 };
 
 const Template = ({
   trigger,
   'disable-border': disableBorder,
   'disable-analytics': disableAnalytics,
+  uswds
 }) => {
   return (
     <>
@@ -35,6 +37,7 @@ const Template = ({
         trigger={trigger}
         disable-analytics={disableAnalytics}
         disable-border={disableBorder}
+        uswds={uswds}
       >
         <div>Here are some popular pets to consider</div>
         <ul>
diff --git a/packages/storybook/stories/va-alert-expandable.stories.jsx b/packages/storybook/stories/va-alert-expandable.stories.jsx
index 62c3c36c8..fd4b6156b 100644
--- a/packages/storybook/stories/va-alert-expandable.stories.jsx
+++ b/packages/storybook/stories/va-alert-expandable.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const alertExpandableDocs = getWebComponentDocs('va-alert-expandable');
 
 export default {
-  title: 'Components/Alert - expandable',
+  title: 'V1 Components/Alert - expandable',
   id: 'components/va-alert-expandable',
   parameters: {
     componentSubtitle: `va-alert-expandable web component`,
diff --git a/packages/storybook/stories/va-alert-uswds.stories.jsx b/packages/storybook/stories/va-alert-uswds.stories.jsx
index 93226a902..3d2e26460 100644
--- a/packages/storybook/stories/va-alert-uswds.stories.jsx
+++ b/packages/storybook/stories/va-alert-uswds.stories.jsx
@@ -7,7 +7,7 @@ const alertDocs = getWebComponentDocs('va-alert');
 alertDocs.props = alertDocs.props.filter((prop) => prop.name !== 'backgroundOnly');
 
 export default {
-  title: `USWDS/Alert USWDS`,
+  title: `Components/Alert USWDS`,
   id: 'uswds/va-alert',
   argTypes: {
     headline: {
@@ -33,7 +33,6 @@ export default {
 VaAlert.displayName = 'VaAlert';
 
 const defaultArgs = {
-  'uswds': true,
   'slim': false,
   'status': 'info',
   'disable-analytics': false,
@@ -54,7 +53,6 @@ const defaultArgs = {
 };
 
 const Template = ({
-  uswds,
   slim,
   status,
   'disable-analytics': disableAnalytics,
@@ -70,7 +68,6 @@ const Template = ({
     return (
       <VaAlert
         slim={slim}
-        uswds={uswds}
         status={status}
         disableAnalytics={disableAnalytics}
         visible={visible}
@@ -86,7 +83,6 @@ const Template = ({
 
   return (
     <va-alert
-      uswds={uswds}
       slim={slim}
       status={status}
       disable-analytics={disableAnalytics}
@@ -110,7 +106,6 @@ const SlimTemplate = ({
   return (
     <>
       <va-alert
-        uswds={uswds}
         slim={slim}
         status="info"
         disable-analytics="false"
@@ -125,7 +120,6 @@ const SlimTemplate = ({
         </p>
       </va-alert>
       <va-alert
-        uswds={uswds}
         slim={slim}
         status="error"
         disable-analytics="false"
@@ -142,7 +136,6 @@ const SlimTemplate = ({
         </>
       </va-alert>
       <va-alert
-        uswds={uswds}
         slim={slim}
         status="success"
         disable-analytics="false"
@@ -157,7 +150,6 @@ const SlimTemplate = ({
         </p>
       </va-alert>
       <va-alert
-        uswds={uswds}
         slim={slim}
         status="warning"
         disable-analytics="false"
@@ -174,7 +166,6 @@ const SlimTemplate = ({
         </>
       </va-alert>
       <va-alert
-        uswds={uswds}
         slim={slim}
         status="continue"
         disable-analytics="false"
@@ -234,7 +225,7 @@ SignInToStartYourApplication.args = {
         <li>You can save your work in progress. You'll have 60 days from when you start or make updates to your application to come back and finish it.</li>
       </ul>
       <p><strong>Note:</strong> You can sign in after you start your application. But you'll lose any information you already filled in.</p>
-      <va-button uswds text="Sign in to start your application"/>
+      <va-button text="Sign in to start your application"/>
       <p>
         <a href="#start">Start your application without signing in</a>
       </p>
diff --git a/packages/storybook/stories/va-alert.stories.jsx b/packages/storybook/stories/va-alert.stories.jsx
index 397f37a67..9810afe0d 100644
--- a/packages/storybook/stories/va-alert.stories.jsx
+++ b/packages/storybook/stories/va-alert.stories.jsx
@@ -9,7 +9,7 @@ export default {
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
-  title: `Components/Alert`,
+  title: `V1 Components/Alert`,
   id: 'components/va-alert',
   argTypes: {
     headline: {
@@ -54,6 +54,7 @@ const defaultArgs = {
       </p>
     </div>
   ),
+  'uswds': false
 };
 
 const Template = ({
@@ -67,6 +68,7 @@ const Template = ({
   headline,
   onCloseEvent,
   children,
+  uswds
 }) => {
   if (onCloseEvent)
     return (
@@ -79,6 +81,7 @@ const Template = ({
         closeable={closeable}
         fullWidth={fullWidth}
         onCloseEvent={onCloseEvent}
+        uswds={uswds}
       >
         {headline}
         {children}
@@ -94,6 +97,7 @@ const Template = ({
       close-btn-aria-label={closeBtnAriaLabel}
       closeable={closeable}
       full-width={fullWidth}
+      uswds={uswds}
     >
       {headline}
       {children}
@@ -106,6 +110,7 @@ const BackgroundOnlyTemplate = ({
   'close-btn-aria-label': closeBtnAriaLabel,
   closeable,
   headline,
+  uswds
 }) => {
   return (
     <>
@@ -118,6 +123,7 @@ const BackgroundOnlyTemplate = ({
         closeable={closeable}
         full-width="false"
         class="vads-u-margin-bottom--1"
+        uswds={uswds}
       >
         <p className="vads-u-margin-y--0">
           We'll come get you from the waiting room when it's time for your appointment to start. If you wait more than 15 minutes, tell a staff member.
@@ -132,6 +138,7 @@ const BackgroundOnlyTemplate = ({
         closeable={closeable}
         full-width="false"
         class="vads-u-margin-bottom--1"
+        uswds={uswds}
       >
         <div>
           <p className="vads-u-margin-y--0">
@@ -149,6 +156,7 @@ const BackgroundOnlyTemplate = ({
         closeable={closeable}
         full-width="false"
         class="vads-u-margin-bottom--1"
+        uswds={uswds}
       >
         <p className="vads-u-margin-y--0">
           <strong>We're processing your travel reimbursement claim.</strong> We'll send you a text
@@ -164,6 +172,7 @@ const BackgroundOnlyTemplate = ({
         closeable={closeable}
         full-width="false"
         class="vads-u-margin-bottom--1"
+        uswds={uswds}
       >
         <div>
           <p className="vads-u-margin-y--0 vads-u-margin-bottom--2">
@@ -182,6 +191,7 @@ const BackgroundOnlyTemplate = ({
         close-btn-aria-label={closeBtnAriaLabel}
         closeable={closeable}
         full-width="false"
+        uswds={uswds}
       >
         <div>
           <p className="vads-u-margin-top--0">
@@ -211,7 +221,7 @@ SignInOrToolPrompt.args = {
         appeals on your mobile device. Download the{' '}
         <strong>VA: Health and Benefits</strong> mobile app to get started.
       </p>
-      <va-button primary-alternate text="Sign-in to VA.gov"></va-button>
+      <va-button primary-alternate text="Sign-in to VA.gov" uswds="false"></va-button>
     </div>
   ),
   status: 'continue',
diff --git a/packages/storybook/stories/va-back-to-top.stories.jsx b/packages/storybook/stories/va-back-to-top.stories.jsx
index a8b8804f4..be955c561 100644
--- a/packages/storybook/stories/va-back-to-top.stories.jsx
+++ b/packages/storybook/stories/va-back-to-top.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const bttDocs = getWebComponentDocs('va-back-to-top');
 
 export default {
-  title: 'Components/Back to top',
+  title: 'V1 Components/Back to top',
   id: 'components/va-back-to-top',
   parameters: {
     componentSubtitle: `va-back-to-top web component`,
diff --git a/packages/storybook/stories/va-banner.stories.jsx b/packages/storybook/stories/va-banner.stories.jsx
index 531a6c9bc..675abd6a4 100644
--- a/packages/storybook/stories/va-banner.stories.jsx
+++ b/packages/storybook/stories/va-banner.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const bannerDocs = getWebComponentDocs('va-banner');
 
 export default {
-  title: 'Components/Banner',
+  title: 'V1 Components/Banner',
   id: 'components/va-banner',
   parameters: {
     componentSubtitle: `va-banner web component`,
diff --git a/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx b/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx
index a9c1d9684..e51591cf1 100644
--- a/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx
+++ b/packages/storybook/stories/va-breadcrumbs-uswds.stories.jsx
@@ -6,7 +6,7 @@ const breadcrumbsDocs = getWebComponentDocs('va-breadcrumbs');
 VaBreadcrumbs.displayName = 'VaBreadcrumbs';
 
 export default {
-  title: 'USWDS/Breadcrumbs USWDS',
+  title: 'Components/Breadcrumbs USWDS',
   id: 'uswds/va-breadcrumbs',
   parameters: {
     componentSubtitle: 'va-breadcrumbs web component',
@@ -21,9 +21,8 @@ const dataArray = [
   { label: 'Level three', href: '#three' },
 ];
 
-const Template = ({ label, 'disable-analytics': disableAnalytics, uswds }) => (
+const Template = ({ label, 'disable-analytics': disableAnalytics }) => (
   <VaBreadcrumbs
-    uswds={uswds}
     label={label}
     disableAnalytics={disableAnalytics}
     breadcrumbList={dataArray}
@@ -63,17 +62,16 @@ const DynamicCrumbsTemplate = ({
 
   return (
     <div>
-      <va-button uswds onClick={e => addCrumb()} text="Add Crumb"/>
-      <va-button uswds onClick={e => removeCrumb()} text="Remove Crumb"/>
-      <va-button uswds onClick={e => replaceCrumbs()} text="Replace Crumbs"/>
-      <va-button uswds onClick={e => resetCrumbs()} text="Reset Crumbs"/>
+      <va-button onClick={e => addCrumb()} text="Add Crumb"/>
+      <va-button onClick={e => removeCrumb()} text="Remove Crumb"/>
+      <va-button onClick={e => replaceCrumbs()} text="Replace Crumbs"/>
+      <va-button onClick={e => resetCrumbs()} text="Reset Crumbs"/>
       <br />
       {crumbs.length > 0 && (
         <VaBreadcrumbs
           label={label}
           disableAnalytics={disableAnalytics}
           breadcrumbList={crumbs}
-          uswds
         ></VaBreadcrumbs>
       )}
     </div>
@@ -83,7 +81,6 @@ const DynamicCrumbsTemplate = ({
 const WrappingCrumbsTemplate = ({
   label,
   'disable-analytics': disableAnalytics,
-  uswds,
   wrapping,
 }) => {
   const breadcrumbs = [
@@ -100,7 +97,6 @@ const WrappingCrumbsTemplate = ({
       <VaBreadcrumbs
         label={label}
         disableAnalytics={disableAnalytics}
-        uswds={uswds}
         breadcrumbList={breadcrumbs}
         wrapping={wrapping}
       ></VaBreadcrumbs>
@@ -112,7 +108,6 @@ const WrappingCrumbsTemplate = ({
 const WithRouterTemplate = ({
   label,
   'disable-analytics': disableAnalytics,
-  uswds,
   wrapping
 }) => {
   const breadcrumbs = [
@@ -169,7 +164,6 @@ const YourComponent &#61; (&#x7b; label, disableAnalytics, uswds, breadcrumbList
       <VaBreadcrumbs
         label={label}
         disableAnalytics={disableAnalytics}
-        uswds={uswds}
         breadcrumbList={breadcrumbs}
         wrapping={wrapping}
         onRouteChange={handleRouteChange}
@@ -180,7 +174,6 @@ const YourComponent &#61; (&#x7b; label, disableAnalytics, uswds, breadcrumbList
 
 
 const defaultArgs = {
-  'uswds': true,
   'label': 'Breadcrumb',
   'breadcrumb-list':
     '[{ "label": "VA.gov home", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]',
diff --git a/packages/storybook/stories/va-breadcrumbs.stories.jsx b/packages/storybook/stories/va-breadcrumbs.stories.jsx
index 5f7b916fe..472c01c22 100644
--- a/packages/storybook/stories/va-breadcrumbs.stories.jsx
+++ b/packages/storybook/stories/va-breadcrumbs.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const breadcrumbsDocs = getWebComponentDocs('va-breadcrumbs');
 
 export default {
-  title: 'Components/Breadcrumbs',
+  title: 'V1 Components/Breadcrumbs',
   id: 'components/va-breadcrumbs',
   parameters: {
     componentSubtitle: 'va-breadcrumbs web component',
@@ -14,8 +14,8 @@ export default {
   },
 };
 
-const Template = ({ label, 'disable-analytics': disableAnalytics }) => (
-  <va-breadcrumbs label={label} disable-analytics={disableAnalytics}>
+const Template = ({ label, 'disable-analytics': disableAnalytics, uswds }) => (
+  <va-breadcrumbs label={label} disable-analytics={disableAnalytics} uswds={uswds}>
     <a href="#home">VA.gov home</a>
     <a href="#one">Level one</a>
     <a href="#two">Level two</a>
@@ -24,7 +24,8 @@ const Template = ({ label, 'disable-analytics': disableAnalytics }) => (
 
 const DynamicCrumbsTemplate = ({ 
   label, 
-  'disable-analytics': disableAnalytics 
+  'disable-analytics': disableAnalytics,
+  uswds
 }) => {
   const breadcrumbs = [
     {label: 'VA.gov home', path: '/#1'},
@@ -57,7 +58,7 @@ const DynamicCrumbsTemplate = ({
       <br/>
       <p>Note: To rerender the breadcrumbs dynamically, the anchor links must be wrapped in list tags.</p>
       {crumbs.length > 0 && (
-        <va-breadcrumbs label={label} disable-analytics={disableAnalytics}>
+        <va-breadcrumbs label={label} disable-analytics={disableAnalytics} uswds={uswds}>
           {crumbs?.map((crumb, i) => {
             return (
               <li key={i}>
@@ -77,6 +78,7 @@ const DynamicCrumbsTemplate = ({
 const defaultArgs = {
   'label': 'Breadcrumb',
   'disable-analytics': false,
+  'uswds': false
 };
 
 export const Default = Template.bind(null);
diff --git a/packages/storybook/stories/va-button-pair-uswds.stories.jsx b/packages/storybook/stories/va-button-pair-uswds.stories.jsx
index fff7ad5c4..cd9da3021 100644
--- a/packages/storybook/stories/va-button-pair-uswds.stories.jsx
+++ b/packages/storybook/stories/va-button-pair-uswds.stories.jsx
@@ -8,7 +8,7 @@ VaButtonPair.displayName = 'VaButtonPair';
 const buttonPairDocs = getWebComponentDocs('va-button-pair');
 
 export default {
-  title: 'USWDS/Button pair USWDS',
+  title: 'Components/Button pair USWDS',
   id: 'uswds/va-button-pair',
   parameters: {
     componentSubtitle: `va-button-pair web component`,
@@ -25,7 +25,6 @@ const defaultArgs = {
   'secondary-label': undefined,
   'submit': undefined,
   'update': undefined,
-  'uswds': true,
 };
 
 const Template = ({
@@ -35,12 +34,10 @@ const Template = ({
   'secondary-label': secondaryLabel,
   submit,
   update,
-  uswds,
 }) => {
   return (
     <div style={{ paddingLeft: '8px' }}>
       <VaButtonPair
-        uswds={uswds}
         continue={_continue}
         disable-analytics={disableAnalytics}
         primaryLabel={primaryLabel}
diff --git a/packages/storybook/stories/va-button-pair.stories.jsx b/packages/storybook/stories/va-button-pair.stories.jsx
index f6afccde3..f8fe9b964 100644
--- a/packages/storybook/stories/va-button-pair.stories.jsx
+++ b/packages/storybook/stories/va-button-pair.stories.jsx
@@ -8,7 +8,7 @@ VaButtonPair.displayName = 'VaButtonPair';
 const buttonPairDocs = getWebComponentDocs('va-button-pair');
 
 export default {
-  title: 'Components/Button pair',
+  title: 'V1 Components/Button pair',
   id: 'components/va-button-pair',
   parameters: {
     componentSubtitle: `va-button-pair web component`,
@@ -25,6 +25,7 @@ const defaultArgs = {
   'secondary-label': undefined,
   'submit': undefined,
   'update': undefined,
+  'uswds': false
 };
 
 const Template = ({
@@ -34,6 +35,7 @@ const Template = ({
   'secondary-label': secondaryLabel,
   submit,
   update,
+  uswds
 }) => {
   return (
     <VaButtonPair
@@ -45,6 +47,7 @@ const Template = ({
       onPrimaryClick={e => console.log(e)}
       onSecondaryClick={e => console.log(e)}
       update={update}
+      uswds={uswds}
     />
   );
 };
diff --git a/packages/storybook/stories/va-button-uswds.stories.jsx b/packages/storybook/stories/va-button-uswds.stories.jsx
index e32460dc9..6c68e0072 100644
--- a/packages/storybook/stories/va-button-uswds.stories.jsx
+++ b/packages/storybook/stories/va-button-uswds.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const buttonDocs = getWebComponentDocs('va-button');
 
 export default {
-  title: 'USWDS/Button USWDS',
+  title: 'Components/Button USWDS',
   id: 'uswds/va-button',
   parameters: {
     componentSubtitle: `va-button web component`,
@@ -25,7 +25,6 @@ const defaultArgs = {
   'primaryAlternate': undefined,
   'submit': undefined,
   'text': 'Default',
-  'uswds': true,
 };
 
 const Template = ({
@@ -39,11 +38,9 @@ const Template = ({
   primaryAlternate,
   submit,
   text,
-  uswds
 }) => {
   return (
     <va-button
-      uswds={uswds}
       back={back}
       big={big}
       continue={_continue}
diff --git a/packages/storybook/stories/va-button.stories.jsx b/packages/storybook/stories/va-button.stories.jsx
index af5bf7784..06fc7f6ea 100644
--- a/packages/storybook/stories/va-button.stories.jsx
+++ b/packages/storybook/stories/va-button.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const buttonDocs = getWebComponentDocs('va-button');
 
 export default {
-  title: 'Components/Button',
+  title: 'V1 Components/Button',
   id: 'components/va-button',
   parameters: {
     componentSubtitle: `va-button web component`,
@@ -24,7 +24,8 @@ const defaultArgs = {
   'secondary': undefined,
   'submit': undefined,
   'text': 'Edit',
-  'primary-alternate': undefined
+  'primary-alternate': undefined,
+  'uswds': false
 };
 
 const Template = ({
@@ -37,7 +38,8 @@ const Template = ({
   secondary,
   submit,
   text,
-  primaryAlternate
+  primaryAlternate,
+  uswds
 }) => {
   return (
     <va-button
@@ -51,7 +53,8 @@ const Template = ({
       submit={submit}
       text={text}
       onClick={e => console.log(e)}
-      primary-alternate = {primaryAlternate}
+      primary-alternate={primaryAlternate}
+      uswds={uswds}
     />
   );
 };
diff --git a/packages/storybook/stories/va-card.stories.jsx b/packages/storybook/stories/va-card.stories.jsx
index 1469e61cd..2038eb3c8 100644
--- a/packages/storybook/stories/va-card.stories.jsx
+++ b/packages/storybook/stories/va-card.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const cardDocs = getWebComponentDocs('va-card');
 
 export default {
-  title: 'Components/Card',
+  title: 'V1 Components/Card',
   id: 'components/va-card',
   parameters: {
     componentSubtitle: `va-card web component`,
diff --git a/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx b/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
index 0c87397c5..7d75ee755 100644
--- a/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
+++ b/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
@@ -11,7 +11,7 @@ const checkBoxGroupDocs = getWebComponentDocs('va-checkbox-group');
 const checkbox = getWebComponentDocs('va-checkbox');
 
 export default {
-  title: 'USWDS/Checkbox group USWDS',
+  title: 'Components/Checkbox group USWDS',
   id: 'uswds/va-checkbox-group',
   subcomponents: componentStructure(checkbox),
   parameters: {
@@ -33,7 +33,6 @@ const vaCheckboxGroup = args => {
     required,
     hint,
     'label-header-level': labelHeaderLevel,
-    uswds,
     ...rest
   } = args;
   return (
@@ -44,18 +43,15 @@ const vaCheckboxGroup = args => {
       required={required}
       hint={hint}
       label-header-level={labelHeaderLevel}
-      uswds={uswds}
     >
-      <va-checkbox uswds label="Sojourner Truth" name="example" value="1" />
-      <va-checkbox uswds label="Frederick Douglass" name="example" value="2" />
+      <va-checkbox label="Sojourner Truth" name="example" value="1" />
+      <va-checkbox label="Frederick Douglass" name="example" value="2" />
       <va-checkbox
-        uswds
         label="Booker T. Washington"
         name="example"
         value="3"
       />
       <va-checkbox
-        uswds
         label="George Washington Carver"
         name="example"
         value="4"
@@ -73,7 +69,6 @@ const USWDSTiled = ({
   label,
   required,
   hint,
-  uswds,
 }) => {
   return (
     <>
@@ -82,7 +77,6 @@ const USWDSTiled = ({
         error={error}
         label={label}
         required={required}
-        uswds={uswds}
         hint={hint}
       >
         <va-checkbox
@@ -91,7 +85,6 @@ const USWDSTiled = ({
           checkbox-description="This is optional text that can be used to describe the label in more detail."
           name="group1"
           value="1"
-          uswds={uswds}
           tile
         />
         <va-checkbox
@@ -99,7 +92,6 @@ const USWDSTiled = ({
           label="Frederick Douglass"
           name="group1"
           value="2"
-          uswds={uswds}
           tile
         />
         <va-checkbox
@@ -107,7 +99,6 @@ const USWDSTiled = ({
           label="Booker T. Washington"
           name="group1"
           value="3"
-          uswds={uswds}
           tile
         />
         <va-checkbox
@@ -115,7 +106,6 @@ const USWDSTiled = ({
           label="George Washington Carver"
           name="group1"
           value="4"
-          uswds={uswds}
           tile
           disabled
         />
@@ -134,19 +124,16 @@ const I18nTemplate = args => {
   return (
     <div>
       <va-button
-        uswds
         onClick={e => setLang('es')}
         style={{ fontSize: '16px' }}
         text="Español"
       />
       <va-button
-        uswds
         onClick={e => setLang('en')}
         style={{ fontSize: '16px' }}
         text="English"
       />
       <va-button
-        uswds
         onClick={e => setLang('tl')}
         style={{ fontSize: '16px' }}
         text="Tagalog"
@@ -162,7 +149,6 @@ const defaultArgs = {
   'required': false,
   'error': null,
   'hint': null,
-  'uswds': true,
   'label-header-level': '',
   'use-forms-pattern': null,
   'form-heading-level': null,
@@ -203,17 +189,15 @@ const SingleCheckboxTemplate = ({
   error,
   label,
   required,
-  uswds,
 }) => {
   return (
     <va-checkbox-group
-      uswds={uswds}
       enable-analytics={enableAnalytics}
       error={error}
       label={label}
       required={required}
     >
-      <va-checkbox uswds label="Option one" name="example" value="1" />
+      <va-checkbox label="Option one" name="example" value="1" />
     </va-checkbox-group>
   );
 };
@@ -223,7 +207,6 @@ const FormsPatternMultipleTemplate = ({
   error,
   label,
   required,
-  uswds,
   tile,
   'message-aria-describedby': messageAriaDescribedBy,
 }) => {
@@ -237,7 +220,6 @@ const FormsPatternMultipleTemplate = ({
   return (
     <>
       <va-checkbox-group
-        uswds={uswds}
         enable-analytics={enableAnalytics}
         error="This is an error message"
         label={label}
@@ -253,65 +235,56 @@ const FormsPatternMultipleTemplate = ({
           label="Soujourner Truth"
           name="multiple"
           value="1"
-          uswds
         />
         <va-checkbox
           id="frederick-douglass"
           label="Frederick Douglass"
           name="multiple"
           value="2"
-          uswds
         />
         <va-checkbox
           id="booker-t-washington"
           label="Booker T. Washington"
           name="multiple"
           value="3"
-          uswds
         />
         <va-checkbox
           id="george-washington-carver"
           label="George Washington Carver"
           name="multiple"
           value="4"
-          uswds
         />
       </va-checkbox-group>
 
       <va-checkbox-group
-        uswds={uswds}
         enable-analytics={enableAnalytics}
         error={error}
         label="What's your relationship to the Veteran?"
         required={required}
       >
         <va-checkbox
-          uswds
           label="I'm responsible for the care of the Veteran."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm appointed by the court to represent the Veteran."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm authorized to make decision for the Veteran under durable power of attorney, as an attorney-in-fact or agent."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm a manager or principle officer representing an institution that's responsible for the care of the Veteran."
           name="example"
           value="1"
         />
       </va-checkbox-group>
       <hr />
-      <va-button text="click to focus header" onClick={handleClick}></va-button>
+      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
     </>
   );
 };
@@ -321,7 +294,6 @@ const FormsPatternSingleTemplate = ({
   error,
   label,
   required,
-  uswds,
   'message-aria-describedby': messageAriaDescribedBy,
 }) => {
   const id = Math.floor(Math.random() * 10) + 1;
@@ -335,7 +307,6 @@ const FormsPatternSingleTemplate = ({
   return (
     <>
       <va-checkbox-group
-        uswds={uswds}
         enable-analytics={enableAnalytics}
         error={error}
         required={required}
@@ -346,25 +317,21 @@ const FormsPatternSingleTemplate = ({
         form-description="This is the additional form-description prop"
       >
         <va-checkbox
-          uswds
           label="I'm responsible for the care of the Veteran."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm appointed by the court to represent the Veteran."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm authorized to make decision for the Veteran under durable power of attorney, as an attorney-in-fact or agent."
           name="example"
           value="1"
         />
         <va-checkbox
-          uswds
           label="I'm a manager or principle officer representing an institution that's responsible for the care of the Veteran."
           name="example"
           value="1"
@@ -381,7 +348,7 @@ const FormsPatternSingleTemplate = ({
 
       <hr />
 
-      <va-button text="click to focus header" onClick={handleClick}></va-button>
+      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
     </>
   );
 };
@@ -394,7 +361,6 @@ SingleCheckbox.args = {
 export const Tile = USWDSTiled.bind(null);
 Tile.args = {
   ...defaultArgs,
-  uswds: true,
   label: 'Select any historical figure',
 };
 
diff --git a/packages/storybook/stories/va-checkbox-group.stories.jsx b/packages/storybook/stories/va-checkbox-group.stories.jsx
index e43646714..aca8fa7f4 100644
--- a/packages/storybook/stories/va-checkbox-group.stories.jsx
+++ b/packages/storybook/stories/va-checkbox-group.stories.jsx
@@ -10,7 +10,7 @@ const checkBoxGroupDocs = getWebComponentDocs('va-checkbox-group');
 const checkbox = getWebComponentDocs('va-checkbox');
 
 export default {
-  title: 'Components/Checkbox group',
+  title: 'V1 Components/Checkbox group',
   id: 'components/va-checkbox-group',
   subcomponents: componentStructure(checkbox),
   parameters: {
@@ -32,6 +32,7 @@ const vaCheckboxGroup = args => {
     required,
     hint,
     'label-header-level': labelHeaderLevel,
+    uswds,
     ...rest
   } = args;
   return (
@@ -42,9 +43,10 @@ const vaCheckboxGroup = args => {
       required={required}
       hint={hint}
       label-header-level={labelHeaderLevel}
+      uswds={uswds}
     >
-      <va-checkbox label="Option one" name="example" value="1" />
-      <va-checkbox label="Option two" name="example" value="2" />
+      <va-checkbox label="Option one" name="example" value="1" uswds={uswds} />
+      <va-checkbox label="Option two" name="example" value="2" uswds={uswds} />
     </va-checkbox-group>
   )
 }
@@ -76,6 +78,7 @@ const defaultArgs = {
   'error': null,
   'hint': null,
   'label-header-level': '',
+  'uswds': false,
 };
 
 export const Default = Template.bind(null);
@@ -111,6 +114,7 @@ const SingleCheckboxTemplate = ({
   error,
   label,
   required,
+  uswds,
 }) => {
   return (
     <va-checkbox-group
@@ -118,8 +122,10 @@ const SingleCheckboxTemplate = ({
       error={error}
       label={label}
       required={required}
+      uswds={uswds}
     >
-      <va-checkbox label="Option one" name="example" value="1" />
+      <va-checkbox label="Option one" name="example" value="1" uswds={uswds}
+/>
     </va-checkbox-group>
   );
 };
diff --git a/packages/storybook/stories/va-checkbox-uswds.stories.jsx b/packages/storybook/stories/va-checkbox-uswds.stories.jsx
index 870c053bb..3f505afcf 100644
--- a/packages/storybook/stories/va-checkbox-uswds.stories.jsx
+++ b/packages/storybook/stories/va-checkbox-uswds.stories.jsx
@@ -6,7 +6,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const checkboxDocs = getWebComponentDocs('va-checkbox');
 
 export default {
-  title: 'USWDS/Checkbox USWDS',
+  title: 'Components/Checkbox USWDS',
   id: 'uswds/va-checkbox',
   parameters: {
     componentSubtitle: `va-checkbox web component`,
@@ -24,7 +24,6 @@ const defaultArgs = {
   'description': null,
   'enable-analytics': false,
   'hint': null,
-  'uswds': true,
   'tile': false,
   'message-aria-describedby': 'Optional description text for screen readers',
 };
@@ -38,7 +37,6 @@ const vaCheckbox = args => {
     error,
     label,
     required,
-    uswds,
     hint,
     tile,
     'message-aria-describedby': messageAriaDescribedBy,
@@ -46,7 +44,6 @@ const vaCheckbox = args => {
   } = args;
   return (
     <va-checkbox
-      uswds={uswds}
       checked={checked}
       description={description}
       enable-analytics={enableAnalytics}
@@ -74,19 +71,16 @@ const I18nTemplate = args => {
   return (
     <div>
       <va-button
-        uswds
         onClick={e => setLang('es')}
         style={{ fontSize: '16px' }}
         text="Español"
       />
       <va-button
-        uswds
         onClick={e => setLang('en')}
         style={{ fontSize: '16px' }}
         text="English"
       />
       <va-button
-        uswds
         onClick={e => setLang('tl')}
         style={{ fontSize: '16px' }}
         text="Tagalog"
diff --git a/packages/storybook/stories/va-checkbox.stories.jsx b/packages/storybook/stories/va-checkbox.stories.jsx
index 36f7ecbac..997b3b63c 100644
--- a/packages/storybook/stories/va-checkbox.stories.jsx
+++ b/packages/storybook/stories/va-checkbox.stories.jsx
@@ -6,7 +6,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const checkboxDocs = getWebComponentDocs('va-checkbox');
 
 export default {
-  title: 'Components/Checkbox',
+  title: 'V1 Components/Checkbox',
   id: 'components/va-checkbox',
   parameters: {
     componentSubtitle: `va-checkbox web component`,
@@ -26,6 +26,7 @@ const defaultArgs = {
   'hint': null,
   'tile': false,
   'message-aria-describedby': 'Optional description text for screen readers',
+  'uswds': false
 };
 
 const vaCheckbox = args => {
@@ -39,6 +40,7 @@ const vaCheckbox = args => {
     hint,
     tile,
     'message-aria-describedby': messageAriaDescribedBy,
+    uswds,
     ...rest
   } = args;
   return (
@@ -53,6 +55,7 @@ const vaCheckbox = args => {
       tile={tile}
       onBlur={e => console.log(e)}
       message-aria-describedby={messageAriaDescribedBy}
+      uswds={uswds}
     />
   )
 }
diff --git a/packages/storybook/stories/va-date.stories.jsx b/packages/storybook/stories/va-date.stories.jsx
index d294042a7..2b06e361d 100644
--- a/packages/storybook/stories/va-date.stories.jsx
+++ b/packages/storybook/stories/va-date.stories.jsx
@@ -7,7 +7,7 @@ VaDate.displayName = 'VaDate';
 const dateDocs = getWebComponentDocs('va-date');
 
 export default {
-  title: 'Components/Date input',
+  title: 'V1 Components/Date input',
   id: 'components/va-date',
   parameters: {
     componentSubtitle: `va-date web component`,
diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx
index 7c53fb623..ad001d0b9 100644
--- a/packages/storybook/stories/va-file-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-file-input-uswds.stories.jsx
@@ -6,7 +6,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const fileInputDocs = getWebComponentDocs('va-file-input');
 
 export default {
-  title: 'USWDS/File input USWDS',
+  title: 'Components/File input USWDS',
   id: 'uswds/va-file-input',
   parameters: {
     componentSubtitle: `va-file-input web component`,
@@ -24,9 +24,10 @@ const defaultArgs = {
   'error': '',
   'enable-analytics': false,
   'hint': null,
-  'uswds': true,
+  'multiple': false,
   'vaChange': event =>
     alert(`File change event received: ${event?.detail?.files[0]?.name}`),
+  'uswds': true
 };
 
 const Template = ({
@@ -37,8 +38,8 @@ const Template = ({
   required,
   hint,
   'enable-analytics': enableAnalytics,
-  uswds,
   vaChange,
+  uswds
 }) => {
   return (
     <VaFileInput
diff --git a/packages/storybook/stories/va-file-input.stories.jsx b/packages/storybook/stories/va-file-input.stories.jsx
index eda70ea50..b7c8449ef 100644
--- a/packages/storybook/stories/va-file-input.stories.jsx
+++ b/packages/storybook/stories/va-file-input.stories.jsx
@@ -8,7 +8,7 @@ VaFileInput.displayName = 'VaFileInput';
 const fileInputDocs = getWebComponentDocs('va-file-input');
 
 export default {
-  title: 'Components/File input',
+  title: 'V1 Components/File input',
   id: 'components/va-file-input',
   parameters: {
     componentSubtitle: `va-file-input web component`,
@@ -27,7 +27,8 @@ const defaultArgs = {
   'error': "",
   'enable-analytics': false,
   hint: null,
-  'vaChange': (event) => alert(`File change event received: ${event?.detail?.files[0]?.name}`)
+  'vaChange': (event) => alert(`File change event received: ${event?.detail?.files[0]?.name}`),
+  'uswds': false
 };
 
 const Template = ({
@@ -40,6 +41,7 @@ const Template = ({
   hint,
   'enable-analytics': enableAnalytics,
   vaChange,
+  uswds
 }) => {
   return (
     <VaFileInput
@@ -52,6 +54,7 @@ const Template = ({
       hint={hint}
       enable-analytics={enableAnalytics}
       onVaChange={vaChange}
+      uswds={uswds}
     />
   );
 };
diff --git a/packages/storybook/stories/va-header-minimal.stories.jsx b/packages/storybook/stories/va-header-minimal.stories.jsx
index f1f80f673..2dbcee7d6 100644
--- a/packages/storybook/stories/va-header-minimal.stories.jsx
+++ b/packages/storybook/stories/va-header-minimal.stories.jsx
@@ -9,7 +9,7 @@ import {
 const minimalHeaderDocs = getWebComponentDocs('va-header-minimal');
 
 export default {
-  title: 'Components/Header - Minimal',
+  title: 'V1 Components/Header - Minimal',
   id: 'components/va-header-minimal',
   parameters: {
     componentSubtitle: `va-header-minimal web component`,
diff --git a/packages/storybook/stories/va-icon-uswds.stories.jsx b/packages/storybook/stories/va-icon-uswds.stories.jsx
index e76593774..ddfeaa927 100644
--- a/packages/storybook/stories/va-icon-uswds.stories.jsx
+++ b/packages/storybook/stories/va-icon-uswds.stories.jsx
@@ -5,7 +5,7 @@ import './styles/va-icon.scss';
 const iconDocs = getWebComponentDocs('va-icon');
 
 export default {
-  title: 'USWDS/Icon USWDS',
+  title: 'Components/Icon USWDS',
   id: 'uswds/va-icon',
   parameters: {
     componentSubtitle: 'va-icon web component',
diff --git a/packages/storybook/stories/va-link.stories.jsx b/packages/storybook/stories/va-link.stories.jsx
index 8dd9de102..0547cc9df 100644
--- a/packages/storybook/stories/va-link.stories.jsx
+++ b/packages/storybook/stories/va-link.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const linkDocs = getWebComponentDocs('va-link');
 
 export default {
-  title: 'Components/Link',
+  title: 'V1 Components/Link',
   id: 'components/va-link',
   parameters: {
     componentSubtitle: `va-link web component`,
diff --git a/packages/storybook/stories/va-loading-indicator.stories.jsx b/packages/storybook/stories/va-loading-indicator.stories.jsx
index a3b194e0e..12d3978fb 100644
--- a/packages/storybook/stories/va-loading-indicator.stories.jsx
+++ b/packages/storybook/stories/va-loading-indicator.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const loadingIndicatorDocs = getWebComponentDocs('va-loading-indicator');
 
 export default {
-  title: 'Components/Loading indicator',
+  title: 'V1 Components/Loading indicator',
   id: 'components/va-loading-indicator',
   parameters: {
     componentSubtitle: `va-loading-indicator web component`,
diff --git a/packages/storybook/stories/va-maintenance-banner.stories.jsx b/packages/storybook/stories/va-maintenance-banner.stories.jsx
index b547b6474..8bcaec2c0 100644
--- a/packages/storybook/stories/va-maintenance-banner.stories.jsx
+++ b/packages/storybook/stories/va-maintenance-banner.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const maintenanceBannerDocs = getWebComponentDocs('va-maintenance-banner');
 
 export default {
-  title: 'Components/Banner - Maintenance',
+  title: 'V1 Components/Banner - Maintenance',
   id: 'components/va-maintenance-banner',
   parameters: {
     componentSubtitle: `va-maintenance-banner web component`,
diff --git a/packages/storybook/stories/va-memorable-date-uswds.stories.jsx b/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
index 9f8a78c8c..109827587 100644
--- a/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
+++ b/packages/storybook/stories/va-memorable-date-uswds.stories.jsx
@@ -7,7 +7,7 @@ VaMemorableDate.displayName = 'VaMemorableDate';
 const memorableDateInputDocs = getWebComponentDocs('va-memorable-date');
 
 export default {
-  title: 'USWDS/Memorable date USWDS',
+  title: 'Components/Memorable date USWDS',
   id: 'uswds/va-memorable-date',
   parameters: {
     componentSubtitle: `va-memorable-date web component`,
@@ -24,14 +24,12 @@ const defaultArgs = {
   required: false,
   error: undefined,
   value: undefined,
-  uswds: true,
   monthSelect: false,
 };
 
-const Template = ({ label, name, hint, required, error, uswds, value, monthSelect }) => {
+const Template = ({ label, name, hint, required, error, value, monthSelect }) => {
   return (
     <VaMemorableDate
-      uswds={uswds}
       monthSelect={monthSelect}
       label={label}
       name={name}
@@ -45,7 +43,7 @@ const Template = ({ label, name, hint, required, error, uswds, value, monthSelec
   );
 };
 
-const CustomValidationTemplate = ({ label, name, hint, required, error, uswds, value }) => {
+const CustomValidationTemplate = ({ label, name, hint, required, error, value }) => {
   const [dateVal, setDateVal] = useState(value);
   const [errorVal, setErrorVal] = useState(error);
   const today = new Date();
@@ -67,7 +65,6 @@ const CustomValidationTemplate = ({ label, name, hint, required, error, uswds, v
   return (
     <>
       <VaMemorableDate
-        uswds={uswds}
         label={label}
         name={name}
         hint={hint}
@@ -111,7 +108,7 @@ function handleDateBlur() &#x7b;<br/>
   );
 };
 
-const I18nTemplate = ({ label, name, required, error, uswds, value }) => {
+const I18nTemplate = ({ label, name, required, error, value }) => {
   const [lang, setLang] = useState('en');
 
   useEffect(() => {
@@ -120,11 +117,10 @@ const I18nTemplate = ({ label, name, required, error, uswds, value }) => {
 
   return (
     <div>
-      <va-button uswds style={{fontSize: '16px'}} onClick={e => setLang('es')} text="Español"/>
-      <va-button uswds style={{fontSize: '16px'}} onClick={e => setLang('en')} text="English"/>
-      <va-button uswds style={{fontSize: '16px'}} onClick={e => setLang('tl')} text="Tagalog"/>
+      <va-button style={{fontSize: '16px'}} onClick={e => setLang('es')} text="Español"/>
+      <va-button style={{fontSize: '16px'}} onClick={e => setLang('en')} text="English"/>
+      <va-button style={{fontSize: '16px'}} onClick={e => setLang('tl')} text="Tagalog"/>
       <VaMemorableDate
-        uswds={uswds}
         label={label}
         name={name}
         hint={hint}
@@ -137,7 +133,7 @@ const I18nTemplate = ({ label, name, required, error, uswds, value }) => {
     </div>
 )};
 
-const FormsPatternSingleTemplate = ({ label, name, hint, required, error, uswds, value, monthSelect }) => {
+const FormsPatternSingleTemplate = ({ label, name, hint, required, error, value, monthSelect }) => {
 
   const id = (Math.floor(Math.random() * 100) + 1);
   const handleClick = () => {
@@ -150,7 +146,6 @@ const FormsPatternSingleTemplate = ({ label, name, hint, required, error, uswds,
   return (
     <>
       <VaMemorableDate
-        uswds={uswds}
         monthSelect={monthSelect}
         label={label}
         name={name}
@@ -179,14 +174,15 @@ const FormsPatternSingleTemplate = ({ label, name, hint, required, error, uswds,
 
       <va-button 
         text="click to focus header" 
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
 };
 
 
-const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, uswds, value, monthSelect }) => {
+const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, value, monthSelect }) => {
 
   const handleClick = () => {
     const header = document.getElementById(`form-pattern-single-input-multiple`)
@@ -198,7 +194,6 @@ const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, uswd
   return (
     <>
       <VaMemorableDate
-        uswds={uswds}
         monthSelect={monthSelect}
         label={label}
         name={name}
@@ -215,7 +210,6 @@ const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, uswd
         form-description="This is the additional form-description prop"
       />
       <VaMemorableDate
-        uswds={uswds}
         monthSelect={monthSelect}
         label={'Date of enrollment'}
         name={name}
@@ -231,7 +225,8 @@ const FormsPatternMultipleTemplate = ({ label, name, hint, required, error, uswd
 
       <va-button 
         text="click to focus header" 
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
diff --git a/packages/storybook/stories/va-memorable-date.stories.jsx b/packages/storybook/stories/va-memorable-date.stories.jsx
index d2d01a421..7d20bc928 100644
--- a/packages/storybook/stories/va-memorable-date.stories.jsx
+++ b/packages/storybook/stories/va-memorable-date.stories.jsx
@@ -7,7 +7,7 @@ VaMemorableDate.displayName = 'VaMemorableDate';
 const memorableDateInputDocs = getWebComponentDocs('va-memorable-date');
 
 export default {
-  title: 'Components/Memorable date',
+  title: 'V1 Components/Memorable date',
   id: 'components/va-memorable-date',
   parameters: {
     componentSubtitle: `va-memorable-date web component`,
@@ -24,9 +24,10 @@ const defaultArgs = {
   required: false,
   error: undefined,
   value: undefined,
+  uswds: false,
 };
 
-const Template = ({ label, name, required, error, value, hint }) => {
+const Template = ({ label, name, required, error, value, hint, uswds }) => {
   return (
     <VaMemorableDate
       label={label}
@@ -37,11 +38,12 @@ const Template = ({ label, name, required, error, value, hint }) => {
       value={value}
       onDateBlur={e => console.log(e, 'DATE BLUR FIRED')}
       onDateChange={e => console.log(e, 'DATE CHANGE FIRED')}
+      uswds={uswds}
     />
   );
 };
 
-const ExtraHintTemplate = ({ label, name, required, error, value, hint }) => {
+const ExtraHintTemplate = ({ label, name, required, error, value, hint, uswds }) => {
   return (
     <VaMemorableDate
       label={label}
@@ -52,11 +54,12 @@ const ExtraHintTemplate = ({ label, name, required, error, value, hint }) => {
       value={value}
       onDateBlur={e => console.log(e, 'DATE BLUR FIRED')}
       onDateChange={e => console.log(e, 'DATE CHANGE FIRED')}
+      uswds={uswds}
     />
   );
 };
 
-const CustomValidationTemplate = ({ label, name, required, error, value, hint }) => {
+const CustomValidationTemplate = ({ label, name, required, error, value, hint, uswds }) => {
   const [dateVal, setDateVal] = useState(value);
   const [errorVal, setErrorVal] = useState(error);
   const today = new Date();
@@ -83,6 +86,7 @@ const CustomValidationTemplate = ({ label, name, required, error, value, hint })
         value={dateVal}
         onDateBlur={() => handleDateBlur()}
         onDateChange={e => setDateVal(e.target.value)}
+        uswds={uswds}
       />
       <hr />
       <div>
@@ -117,7 +121,7 @@ function handleDateBlur() &#x7b;<br/>
   );
 };
 
-const I18nTemplate = ({ label, name, required, error, value, hint }) => {
+const I18nTemplate = ({ label, name, required, error, value, hint, uswds }) => {
   const [lang, setLang] = useState('en');
 
   useEffect(() => {
@@ -138,6 +142,7 @@ const I18nTemplate = ({ label, name, required, error, value, hint }) => {
         value={value}
         onDateBlur={e => console.log(e, 'DATE BLUR FIRED')}
         onDateChange={e => console.log(e, 'DATE CHANGE FIRED')}
+        uswds={uswds}
       />
     </div>
 )};
diff --git a/packages/storybook/stories/va-minimal-footer.stories.jsx b/packages/storybook/stories/va-minimal-footer.stories.jsx
index 995fb409f..cf5b3c312 100644
--- a/packages/storybook/stories/va-minimal-footer.stories.jsx
+++ b/packages/storybook/stories/va-minimal-footer.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const minimalFooterDocs = getWebComponentDocs('va-minimal-footer');
 
 export default {
-  title: 'Components/Minimal Footer',
+  title: 'V1 Components/Minimal Footer',
   id: 'components/va-minimal-footer',
   parameters: {
     componentSubtitle: `va-minimal-footer web component`,
diff --git a/packages/storybook/stories/va-modal-uswds.stories.jsx b/packages/storybook/stories/va-modal-uswds.stories.jsx
index 46366e0e8..c2ddc2a30 100644
--- a/packages/storybook/stories/va-modal-uswds.stories.jsx
+++ b/packages/storybook/stories/va-modal-uswds.stories.jsx
@@ -7,7 +7,7 @@ VaModal.displayName = 'VaModal';
 const modalDocs = getWebComponentDocs('va-modal');
 
 export default {
-  title: 'USWDS/Modal USWDS',
+  title: 'Components/Modal USWDS',
   id: 'uswds/va-modal',
   parameters: {
     componentSubtitle: `va-modal web component`,
@@ -37,7 +37,6 @@ const defaultArgs = {
   'primary-button-text': 'Primary',
   'secondaryButtonClick': () => window.alert('Secondary button clicked!'),
   'secondary-button-text': 'Secondary',
-  'uswds': true,
   'forcedModal': false,
 };
 
@@ -53,7 +52,6 @@ const Template = ({
   'secondary-button-text': secondaryButtonText,
   status,
   visible,
-  uswds,
   forcedModal,
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
@@ -65,7 +63,6 @@ const Template = ({
       <va-button uswds onClick={openModal} text="Click here to open modal"/>
       <VaModal
         forcedModal={forcedModal}
-        uswds={uswds}
         clickToClose={clickToClose}
         disableAnalytics={disableAnalytics}
         large={large}
@@ -97,7 +94,6 @@ const ForcedTemplate = ({
   'secondary-button-text': secondaryButtonText,
   status,
   visible,
-  uswds,
   forcedModal,
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
@@ -106,10 +102,9 @@ const ForcedTemplate = ({
   return (
     <div>
       <h1>Testing h1 heading</h1>
-      <va-button uswds onClick={openModal} text="Click here to open modal"/>
+      <va-button onClick={openModal} text="Click here to open modal"/>
       <VaModal
         forcedModal={forcedModal}
-        uswds={uswds}
         clickToClose={clickToClose}
         disableAnalytics={disableAnalytics}
         large={large}
@@ -184,7 +179,6 @@ export const WithNestedWebComponents = ({
   'secondary-button-text': secondaryButtonText,
   status,
   visible,
-  uswds,
   forcedModal,
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
@@ -198,7 +192,6 @@ export const WithNestedWebComponents = ({
       <label htmlFor="pre-modal-input">Checkbox before the modal</label>
       <VaModal
         forcedModal={forcedModal}
-        uswds={uswds}
         clickToClose={clickToClose}
         disableAnalytics={disableAnalytics}
         large={large}
diff --git a/packages/storybook/stories/va-modal.stories.jsx b/packages/storybook/stories/va-modal.stories.jsx
index 26be5d355..e6807622d 100644
--- a/packages/storybook/stories/va-modal.stories.jsx
+++ b/packages/storybook/stories/va-modal.stories.jsx
@@ -7,7 +7,7 @@ VaModal.displayName = 'VaModal';
 const modalDocs = getWebComponentDocs('va-modal');
 
 export default {
-  title: 'Components/Modal',
+  title: 'V1 Components/Modal',
   id: 'components/va-modal',
   parameters: {
     componentSubtitle: `va-modal web component`,
@@ -37,6 +37,7 @@ const Template = ({
   'secondary-button-text': secondaryButtonText,
   status,
   visible,
+  uswds,
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
   const onCloseEvent = () => setIsVisible(!isVisible);
@@ -58,6 +59,7 @@ const Template = ({
         secondaryButtonText={secondaryButtonText}
         status={status}
         visible={isVisible}
+        uswds={uswds}
       >
         <p>
           A modal may pass any React nodes as children to be displayed within
@@ -86,6 +88,7 @@ const defaultArgs = {
   'primary-button-text': 'Primary button',
   'secondaryButtonClick': () => window.alert('Secondary button clicked!'),
   'secondary-button-text': 'Secondary button',
+  'uswds': false
 };
 
 export const Default = Template.bind(null);
@@ -136,6 +139,7 @@ export const WithNestedWebComponents = ({
   'secondary-button-text': secondaryButtonText,
   status,
   visible,
+  uswds,
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
   const onCloseEvent = () => setIsVisible(!isVisible);
@@ -159,6 +163,7 @@ export const WithNestedWebComponents = ({
         secondaryButtonText={secondaryButtonText}
         status={status}
         visible={isVisible}
+        uswds={uswds}
       >
         <p>
           A modal may pass any React nodes as children to be displayed within
@@ -216,13 +221,15 @@ const ButtonPairTemplate = ({
         secondaryButtonText={secondaryButtonText}
         status={status}
         visible={isVisible}
+        uswds={uswds}
       >
         <p>
           You have unsaved changes that will be lost.
         </p>
         <VaButtonPair
           onPrimaryClick={() => {}}
-          onSecondaryClick={function noRefCheck() {}}
+          onSecondaryClick={function noRefCheck() { }}
+          uswds={uswds}
         />
       </VaModal>
     </div>
diff --git a/packages/storybook/stories/va-need-help.stories.jsx b/packages/storybook/stories/va-need-help.stories.jsx
index 5e155d4b1..596eaf58a 100644
--- a/packages/storybook/stories/va-need-help.stories.jsx
+++ b/packages/storybook/stories/va-need-help.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const needHelpDocs = getWebComponentDocs('va-need-help');
 
 export default {
-  title: 'Components/Need help?',
+  title: 'V1 Components/Need help?',
   id: 'components/va-need-help',
   parameters: {
     componentSubtitle: `va-need-help web component`,
diff --git a/packages/storybook/stories/va-number-input-uswds.stories.jsx b/packages/storybook/stories/va-number-input-uswds.stories.jsx
index 7c88065be..3fd10f874 100644
--- a/packages/storybook/stories/va-number-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-number-input-uswds.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs, applyFocus } from './wc-
 const numberInputDocs = getWebComponentDocs('va-number-input');
 
 export default {
-  title: 'USWDS/Number input USWDS',
+  title: 'Components/Number input USWDS',
   id: 'uswds/va-number-input',
   parameters: {
     componentSubtitle: `va-number-input web component`,
@@ -33,7 +33,6 @@ const defaultArgs = {
   'min': undefined,
   'max': undefined,
   hint: null,
-  uswds: true,
   'use-forms-pattern': null,
   'form-heading-level': null,
   'form-heading': null,
@@ -52,12 +51,10 @@ const vaNumberInput = args => {
     min,
     max,
     hint,
-    uswds,
     ...rest
   } = args;
   return (
     <va-number-input
-      uswds={uswds}
       name={name}
       label={label}
       enable-analytics={enableAnalytics}
@@ -85,9 +82,9 @@ const I18nTemplate = args => {
 
   return (
     <div>
-      <va-button uswds onClick={e => setLang('es')} text="Español"/>
-      <va-button uswds onClick={e => setLang('en')} text="English"/>
-      <va-button uswds onClick={e => setLang('tl')} text="Tagalog"/>
+      <va-button onClick={e => setLang('es')} text="Español"/>
+      <va-button onClick={e => setLang('en')} text="English"/>
+      <va-button onClick={e => setLang('tl')} text="Tagalog"/>
       <div style={{marginTop: '20px'}}>
         {vaNumberInput(args)}
       </div>
@@ -97,13 +94,11 @@ const I18nTemplate = args => {
 const WidthsTemplate = ({
   name,
   value,
-  uswds,
 }) => {
   return (
     <>
       <va-number-input
         width="2xs"
-        uswds={uswds}
         name={name}
         label='My input - 2xs'
         value={value}
@@ -111,7 +106,6 @@ const WidthsTemplate = ({
 
       <va-number-input
         width="xs"
-        uswds={uswds}
         name={name}
         label='My input - xs'
         value={value}
@@ -119,7 +113,6 @@ const WidthsTemplate = ({
   
       <va-number-input
         width="sm"
-        uswds={uswds}
         name={name}
         label='My input - sm'
         value={value}
@@ -127,7 +120,6 @@ const WidthsTemplate = ({
 
       <va-number-input
         width="md"
-        uswds={uswds}
         name={name}
         label='My input - md'
         value={value}
@@ -135,7 +127,6 @@ const WidthsTemplate = ({
 
       <va-number-input
         width="lg"
-        uswds={uswds}
         name={name}
         label='My input - lg'
         value={value}
@@ -143,7 +134,6 @@ const WidthsTemplate = ({
 
       <va-number-input
         width="xl"
-        uswds={uswds}
         name={name}
         label='My input - xl'
         value={value}
@@ -151,7 +141,6 @@ const WidthsTemplate = ({
 
       <va-number-input
         width="2xl"
-        uswds={uswds}
         name={name}
         label='My input - 2xl'
         value={value}
@@ -163,7 +152,6 @@ const WidthsTemplate = ({
 const FormsPatternMultipleTemplate = ({
   name,
   value,
-  uswds,
 }) => {
   const handleClick = () => {
     const header = document.getElementById('form-pattern-multiple-input')
@@ -178,7 +166,6 @@ const FormsPatternMultipleTemplate = ({
         required
         error="This is an error message"
         id="form-pattern-multiple-input"
-        uswds={uswds}
         name={name}
         label='Social security number'
         hint="This is hint text"
@@ -190,7 +177,6 @@ const FormsPatternMultipleTemplate = ({
       />
 
       <va-number-input
-        uswds={uswds}
         name={name}
         label='VA file number'
         hint="This is hint text"
@@ -198,7 +184,6 @@ const FormsPatternMultipleTemplate = ({
       />  
 
       <va-number-input
-        uswds={uswds}
         name={name}
         label='Service number'
         hint="This is hint text"
@@ -206,8 +191,9 @@ const FormsPatternMultipleTemplate = ({
       />
       <hr />
       <va-button 
-        text="click to focus header" 
-        onClick={handleClick}>
+        text="click to focus header"
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
@@ -216,7 +202,6 @@ const FormsPatternMultipleTemplate = ({
 const FormsPatternSingleTemplate = ({
   name,
   value,
-  uswds,
   error,
 }) => {
   const id = (Math.floor(Math.random() * 10) + 1);
@@ -232,7 +217,6 @@ const FormsPatternSingleTemplate = ({
       <va-number-input
         required
         id={`form-pattern-single-input-${id}`}
-        uswds={uswds}
         name={name}
         label="Example number"
         hint="This is hint text"
@@ -257,7 +241,8 @@ const FormsPatternSingleTemplate = ({
 
       <va-button 
         text="click to focus header" 
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
diff --git a/packages/storybook/stories/va-number-input.stories.jsx b/packages/storybook/stories/va-number-input.stories.jsx
index 47412b09e..a98332f64 100644
--- a/packages/storybook/stories/va-number-input.stories.jsx
+++ b/packages/storybook/stories/va-number-input.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const numberInputDocs = getWebComponentDocs('va-number-input');
 
 export default {
-  title: 'Components/Number input',
+  title: 'V1 Components/Number input',
   id: 'components/va-number-input',
   parameters: {
     componentSubtitle: `va-number-input web component`,
@@ -35,6 +35,7 @@ const defaultArgs = {
   hint: null,
   'currency': false,
   'message-aria-describedby': 'Optional description text for screen readers',
+  uswds: false,
 };
 
 const vaNumberInput = args => {
@@ -51,6 +52,7 @@ const vaNumberInput = args => {
     hint,
     currency,
     'message-aria-describedby': messageAriaDescribedby,
+    uswds,
     ...rest
   } = args;
   return (
@@ -69,6 +71,7 @@ const vaNumberInput = args => {
       onBlur={e => console.log('blur event', e)}
       currency={currency}
       message-aria-describedby={messageAriaDescribedby}
+      uswds={uswds}
     />
   )
 }
@@ -96,6 +99,7 @@ const I18nTemplate = args => {
 const WidthsTemplate = ({
   name,
   value,
+  uswds,
 }) => {
   return (
     <>
@@ -104,6 +108,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - 2xs'
         value={value}
+        uswds={uswds}
       />
 
       <va-number-input
@@ -111,6 +116,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - xs'
         value={value}
+        uswds={uswds}
       />  
   
       <va-number-input
@@ -118,6 +124,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - sm'
         value={value}
+        uswds={uswds}
       />
 
       <va-number-input
@@ -125,6 +132,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - md'
         value={value}
+        uswds={uswds}
       />
 
       <va-number-input
@@ -132,6 +140,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - lg'
         value={value}
+        uswds={uswds}
       />
 
       <va-number-input
@@ -139,6 +148,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - xl'
         value={value}
+        uswds={uswds}
       />
 
       <va-number-input
@@ -146,6 +156,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - 2xl'
         value={value}
+        uswds={uswds}
       />
     </>
   );
diff --git a/packages/storybook/stories/va-official-gov-banner.stories.jsx b/packages/storybook/stories/va-official-gov-banner.stories.jsx
index ed251e786..5ae601a90 100644
--- a/packages/storybook/stories/va-official-gov-banner.stories.jsx
+++ b/packages/storybook/stories/va-official-gov-banner.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const officialGovBannerDocs = getWebComponentDocs('va-official-gov-banner');
 
 export default {
-  title: 'Components/Banner - Official Gov',
+  title: 'V1 Components/Banner - Official Gov',
   id: 'components/va-official-gov-banner',
   parameters: {
     componentSubtitle: `va-official-gov-banner web component`,
diff --git a/packages/storybook/stories/va-omb-info.stories.jsx b/packages/storybook/stories/va-omb-info.stories.jsx
index b62eb73e7..17361370b 100644
--- a/packages/storybook/stories/va-omb-info.stories.jsx
+++ b/packages/storybook/stories/va-omb-info.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const ombInfoDocs = getWebComponentDocs('va-omb-info');
 
 export default {
-  title: 'Components/OMB info',
+  title: 'V1 Components/OMB info',
   id: 'components/va-omb-info',
   parameters: {
     componentSubtitle: `va-omb-info web component`,
diff --git a/packages/storybook/stories/va-on-this-page.stories.jsx b/packages/storybook/stories/va-on-this-page.stories.jsx
index 491c23ad2..f323f3ca2 100644
--- a/packages/storybook/stories/va-on-this-page.stories.jsx
+++ b/packages/storybook/stories/va-on-this-page.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, StoryDocs } from './wc-helpers';
 const otpDocs = getWebComponentDocs('va-on-this-page');
 
 export default {
-  title: 'Components/On this page',
+  title: 'V1 Components/On this page',
   id: 'components/va-on-this-page',
   parameters: {
     componentSubtitle: 'va-on-this-page web component',
diff --git a/packages/storybook/stories/va-pagination-uswds.stories.jsx b/packages/storybook/stories/va-pagination-uswds.stories.jsx
index 623d113c9..811572e3b 100644
--- a/packages/storybook/stories/va-pagination-uswds.stories.jsx
+++ b/packages/storybook/stories/va-pagination-uswds.stories.jsx
@@ -5,7 +5,7 @@ import { VaPagination } from '@department-of-veterans-affairs/web-components/rea
 const paginationDocs = getWebComponentDocs('va-pagination');
 
 export default {
-  title: 'USWDS/Pagination USWDS',
+  title: 'Components/Pagination USWDS',
   id: 'uswds/va-pagination',
   parameters: {
     componentSubtitle: 'va-pagination web component',
@@ -37,7 +37,6 @@ const Template = ({
       page={page}
       pages={pages}
       max-page-list-length={maxPageListLength}
-      uswds
       unbounded={unbounded}
       onPageSelect={handlePageSelect}
     />
@@ -96,13 +95,13 @@ export const Internationalization = () => {
 
   return (
     <div>
-      <va-button uswds onClick={() => setLang('es')} text="Español"/>
-      <va-button uswds onClick={() => setLang('en')} text="English"/>
+      <va-button onClick={() => setLang('es')} text="Español"/>
+      <va-button onClick={() => setLang('en')} text="English"/>
       <div style={{ marginTop: '20px' }}>
         <h4>Default</h4>
-        <VaPagination page={page1} pages={24} maxPageListLength={7} uswds onPageSelect={(event) => setPage1(event.detail.page) }/>
+        <VaPagination page={page1} pages={24} maxPageListLength={7} onPageSelect={(event) => setPage1(event.detail.page) }/>
         <h4>Unbounded</h4>
-        <VaPagination page={page2} pages={24} maxPageListLength={7} unbounded uswds onPageSelect={(event) => setPage2(event.detail.page)}/>
+        <VaPagination page={page2} pages={24} maxPageListLength={7} unbounded onPageSelect={(event) => setPage2(event.detail.page)}/>
       </div>
     </div>
 )};
\ No newline at end of file
diff --git a/packages/storybook/stories/va-pagination.stories.jsx b/packages/storybook/stories/va-pagination.stories.jsx
index a768ccb77..3a61f56ff 100644
--- a/packages/storybook/stories/va-pagination.stories.jsx
+++ b/packages/storybook/stories/va-pagination.stories.jsx
@@ -6,7 +6,7 @@ VaPagination.displayName = 'VaPagination';
 const paginationDocs = getWebComponentDocs('va-pagination');
 
 export default {
-  title: 'Components/Pagination',
+  title: 'V1 Components/Pagination',
   id: 'components/va-pagination',
   parameters: {
     componentSubtitle: `va-pagination web component`,
@@ -20,12 +20,14 @@ const defaultArgs = {
   'page': 3,
   'pages': 15,
   'show-last-page': true,
+  uswds: false,
 };
 
 const Template = ({
   'page': currentPage,
   pages,
   'show-last-page': showLastPage,
+  uswds
 }) => {
   const [page, setPage] = useState(currentPage);
   const handlePageSelect = event => {
@@ -37,6 +39,7 @@ const Template = ({
       pages={pages}
       onPageSelect={handlePageSelect}
       showLastPage={showLastPage}
+      uswds={uswds}
     />
   );
 };
diff --git a/packages/storybook/stories/va-privacy-agreement-uswds.stories.jsx b/packages/storybook/stories/va-privacy-agreement-uswds.stories.jsx
index 4de168f68..6fc6ec24d 100644
--- a/packages/storybook/stories/va-privacy-agreement-uswds.stories.jsx
+++ b/packages/storybook/stories/va-privacy-agreement-uswds.stories.jsx
@@ -7,7 +7,7 @@ VaPrivacyAgreement.displayName = 'VaPrivacyAgreement';
 const privacyAgreementDocs = getWebComponentDocs('va-privacy-agreement');
 
 export default {
-  title: 'USWDS/Privacy agreement USWDS',
+  title: 'Components/Privacy agreement USWDS',
   id: 'uswds/va-privacy-agreement',
   parameters: {
     componentSubtitle: 'va-privacy-agreement web component',
@@ -21,14 +21,12 @@ const defaultArgs = {
   'checked': false,
   'show-error': false,
   'enable-analytics': false,
-  'uswds': true,
 };
 
 const Template = ({
   checked,
   'show-error': showError,
   'enable-analytics': enableAnalytics,
-  'uswds': uswds,
 }) => {
   const [isChecked, setIsChecked] = useState(checked);
   const handler = event => setIsChecked(event?.detail?.checked);
@@ -39,7 +37,6 @@ const Template = ({
   return (
     <VaPrivacyAgreement
       checked={isChecked}
-      uswds={uswds}
       showError={showError}
       enable-analytics={enableAnalytics}
       onVaChange={handler}
diff --git a/packages/storybook/stories/va-privacy-agreement.stories.jsx b/packages/storybook/stories/va-privacy-agreement.stories.jsx
index 5c6889b27..0c1fff201 100644
--- a/packages/storybook/stories/va-privacy-agreement.stories.jsx
+++ b/packages/storybook/stories/va-privacy-agreement.stories.jsx
@@ -7,7 +7,7 @@ VaPrivacyAgreement.displayName = 'VaPrivacyAgreement';
 const privacyAgreementDocs = getWebComponentDocs('va-privacy-agreement');
 
 export default {
-    title: 'Components/Privacy agreement',
+    title: 'V1 Components/Privacy agreement',
     id: 'components/va-privacy-agreement',
     parameters: {
         componentSubtitle: 'va-privacy-agreement web component',
@@ -40,6 +40,7 @@ const Template = ({
             showError={showError}
             enable-analytics={enableAnalytics}
             onVaChange={handler}
+            uswds={false}
         />
     );
 };
diff --git a/packages/storybook/stories/va-process-list-uswds.stories.jsx b/packages/storybook/stories/va-process-list-uswds.stories.jsx
index 0cf517f10..5b6f16497 100644
--- a/packages/storybook/stories/va-process-list-uswds.stories.jsx
+++ b/packages/storybook/stories/va-process-list-uswds.stories.jsx
@@ -6,7 +6,7 @@ const processListDocs = getWebComponentDocs('va-process-list');
 const processListItemDocs = getWebComponentDocs('va-process-list-item');
 
 export default {
-  title: 'USWDS/Process list USWDS',
+  title: 'Components/Process list USWDS',
   id: 'uswds/va-process-list',
   subcomponents: componentStructure(processListItemDocs),
   parameters: {
@@ -15,18 +15,13 @@ export default {
       page: () => <StoryDocs data={processListDocs} />,
     },
   },
-  argTypes:{
-    uswds: {
-      control: false
-    }
-  }
 };
 
-const defaultArgs = {uswds: true};
+const defaultArgs = {};
 
-const Template = ({uswds}) => {
+const Template = ({}) => {
   return (
-    <va-process-list uswds={uswds}>
+    <va-process-list>
       <va-process-list-item header="Check to be sure you can request a Board Appeal">
         <p>
           You can request a Board Appeal up to 1 year from the date on your
@@ -67,9 +62,9 @@ const Template = ({uswds}) => {
 };
 
 
-const StatusTemplate = ({uswds}) => {
+const StatusTemplate = () => {
   return (
-    <va-process-list uswds={uswds}>
+    <va-process-list>
       <va-process-list-item checkmark header='Checkmark Icon'>  
         <p>Add the prop <code>checkmark</code> to make the list icon a checkmark.</p>
       </va-process-list-item>
@@ -85,9 +80,9 @@ const StatusTemplate = ({uswds}) => {
 };
 
 
-const HeaderSizeTemplate = ({uswds}) => {
+const HeaderSizeTemplate = () => {
   return (
-    <va-process-list uswds={uswds}>
+    <va-process-list>
       <va-process-list-item header='Size h1' level='1'/>
       <va-process-list-item header='Size h2' level='2'/>
       <va-process-list-item header='Size h3' level='3'/>
@@ -98,9 +93,9 @@ const HeaderSizeTemplate = ({uswds}) => {
   );
 };
 
-const CustomSizingTemplate = ({uswds}) => {
+const CustomSizingTemplate = () => {
   return (
-    <va-process-list uswds={uswds}>
+    <va-process-list>
       
       <va-process-list-item header='Step One' level='2'>
         <p class="vads-u-font-size--lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
@@ -116,10 +111,10 @@ const CustomSizingTemplate = ({uswds}) => {
   );
 };
 
-const UtilityStyling = ({uswds}) => {
+const UtilityStyling = () => {
   return (
-    <va-process-list uswds={uswds}>
-      <va-process-list-item uswds={uswds}>
+    <va-process-list>
+      <va-process-list-item>
         <p>Look at me in mobile view</p>
         <va-additional-info
           trigger="Show more"
@@ -128,7 +123,7 @@ const UtilityStyling = ({uswds}) => {
           <img src="https://via.placeholder.com/350" />
         </va-additional-info>
       </va-process-list-item>
-      <va-process-list-item uswds={uswds}>
+      <va-process-list-item>
         <p className="vads-u-margin-top--0">Look at me in desktop view</p>
         <p className="vads-u-display--none medium-screen:vads-u-display--block vads-u-background-color--gray-cool-light">
           I'm only visible on desktop.
diff --git a/packages/storybook/stories/va-process-list.stories.jsx b/packages/storybook/stories/va-process-list.stories.jsx
index 74a924720..ac9190fe4 100644
--- a/packages/storybook/stories/va-process-list.stories.jsx
+++ b/packages/storybook/stories/va-process-list.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const processListDocs = getWebComponentDocs('va-process-list');
 
 export default {
-  title: 'Components/Process list',
+  title: 'V1 Components/Process list',
   id: 'components/va-process-list',
   parameters: {
     componentSubtitle: `va-process-list web component`,
@@ -22,9 +22,9 @@ export default {
 
 const defaultArgs = {uswds: false};
 
-const Template = ({}) => {
+const Template = () => {
   return (
-    <va-process-list>
+    <va-process-list uswds={false}>
       <li>
         <h3>Check to be sure you can request a Board Appeal</h3>
         <p>
@@ -67,14 +67,15 @@ const Template = ({}) => {
   );
 };
 
-const UtilityStyling = ({}) => {
+const UtilityStyling = () => {
   return (
-    <va-process-list>
+    <va-process-list uswds={false}>
       <li>
         <p>Look at me in mobile view</p>
         <va-additional-info
           trigger="Show more"
           class="medium-screen:vads-u-display--none"
+          uswds={false}
         >
           <img src="https://via.placeholder.com/350" />
         </va-additional-info>
diff --git a/packages/storybook/stories/va-progress-bar.stories.jsx b/packages/storybook/stories/va-progress-bar.stories.jsx
index bc29c0239..dcd1d60fa 100644
--- a/packages/storybook/stories/va-progress-bar.stories.jsx
+++ b/packages/storybook/stories/va-progress-bar.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const progressBarDocs = getWebComponentDocs('va-progress-bar');
 
 export default {
-  title: 'Components/Progress bar - activity',
+  title: 'V1 Components/Progress bar - activity',
   id: 'components/va-progress-bar',
   parameters: {
     componentSubtitle: `va-progress-bar web component`,
diff --git a/packages/storybook/stories/va-promo-banner.stories.jsx b/packages/storybook/stories/va-promo-banner.stories.jsx
index 3bfaec1ca..4f38d8a33 100644
--- a/packages/storybook/stories/va-promo-banner.stories.jsx
+++ b/packages/storybook/stories/va-promo-banner.stories.jsx
@@ -4,7 +4,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const promoBannerDocs = getWebComponentDocs('va-promo-banner');
 
 export default {
-  title: `Components/Banner - Promo`,
+  title: `V1 Components/Banner - Promo`,
   id: 'components/va-promo-banner',
   parameters: {
     componentSubtitle: 'va-promo-banner web component',
diff --git a/packages/storybook/stories/va-radio-uswds.stories.jsx b/packages/storybook/stories/va-radio-uswds.stories.jsx
index 6ab8fda83..e9e463bc6 100644
--- a/packages/storybook/stories/va-radio-uswds.stories.jsx
+++ b/packages/storybook/stories/va-radio-uswds.stories.jsx
@@ -19,7 +19,7 @@ const radioDocs = getWebComponentDocs('va-radio');
 const radioItem = getWebComponentDocs('va-radio-option');
 
 export default {
-  title: `USWDS/Radio button USWDS`,
+  title: `Components/Radio button USWDS`,
   id: 'uswds/va-radio',
   subcomponents: componentStructure(radioItem),
   parameters: {
@@ -38,7 +38,6 @@ const vaRadioConst = args => {
     hint,
     name = 'group',
     required,
-    uswds = true,
     'label-header-level': labelHeaderLevel,
     'header-aria-describedby': headerAriaDescribedby,
     ...rest
@@ -50,7 +49,6 @@ const vaRadioConst = args => {
       error={error}
       label={label}
       required={required}
-      uswds={uswds}
       hint={hint}
       label-header-level={labelHeaderLevel}
       header-aria-describedby={headerAriaDescribedby}
@@ -59,26 +57,22 @@ const vaRadioConst = args => {
         label="Soujourner Truth"
         name={name}
         value="1"
-        uswds={uswds}
       />
       <va-radio-option
         label="Frederick Douglass"
         name={name}
         value="2"
-        uswds={uswds}
       />
       <va-radio-option
         label="Booker T. Washington"
         name={name}
         value="3"
-        uswds={uswds}
       />
       <va-radio-option
         label="George Washington Carver"
         name={name}
         value="4"
         disabled
-        uswds={uswds}
       />
     </va-radio>
   );
@@ -95,9 +89,9 @@ const I18nTemplate = args => {
 
   return (
     <div>
-      <va-button uswds onClick={e => setLang('es')} text="Español" />
-      <va-button uswds onClick={e => setLang('en')} text="English" />
-      <va-button uswds onClick={e => setLang('tl')} text="Tagalog" />
+      <va-button onClick={e => setLang('es')} text="Español" />
+      <va-button onClick={e => setLang('en')} text="English" />
+      <va-button onClick={e => setLang('tl')} text="Tagalog" />
       <br />
       <br />
       {vaRadioConst(args)}
@@ -114,7 +108,6 @@ const ReactBindingExample = ({
   return (
     <>
       <VaRadio
-        uswds
         enableAnalytics={enableAnalytics}
         error={error}
         label={label}
@@ -123,8 +116,8 @@ const ReactBindingExample = ({
           console.log('Selected radio option:', e?.detail?.value)
         }
       >
-        <VaRadioOption uswds label="Option one" name="example" value="1" />
-        <VaRadioOption uswds label="Option two" name="example" value="2" />
+        <VaRadioOption label="Option one" name="example" value="1" />
+        <VaRadioOption label="Option two" name="example" value="2" />
       </VaRadio>
     </>
   );
@@ -143,15 +136,13 @@ const IdUsageTemplate = ({
         error={error}
         label={label}
         required={required}
-        uswds
       >
-        <va-radio-option id="no1" label="No" name="group1" value="1" uswds />
+        <va-radio-option id="no1" label="No" name="group1" value="1" />
         <va-radio-option
           id="yes1"
           label="Yes - Any Veteran"
           name="group1"
           value="2"
-          uswds
         />
       </va-radio>
       <br />
@@ -160,15 +151,13 @@ const IdUsageTemplate = ({
         error={error}
         label={label}
         required={required}
-        uswds
       >
-        <va-radio-option id="no2" label="No" name="group2" value="1" uswds />
+        <va-radio-option id="no2" label="No" name="group2" value="1" />
         <va-radio-option
           id="yes2"
           label="Yes - Any Veteran"
           name="group2"
           value="2"
-          uswds
         />
       </va-radio>
     </>
@@ -180,7 +169,6 @@ const USWDSTiled = ({
   error,
   label,
   required,
-  uswds,
   hint,
 }) => {
   return (
@@ -190,7 +178,6 @@ const USWDSTiled = ({
         error={error}
         label={label}
         required={required}
-        uswds={uswds}
         hint={hint}
       >
         <va-radio-option
@@ -198,7 +185,6 @@ const USWDSTiled = ({
           label="Soujourner Truth"
           name="group3"
           value="1"
-          uswds={uswds}
           tile
         />
         <va-radio-option
@@ -206,7 +192,6 @@ const USWDSTiled = ({
           label="Frederick Douglass"
           name="group3"
           value="2"
-          uswds={uswds}
           tile
         />
         <va-radio-option
@@ -214,7 +199,6 @@ const USWDSTiled = ({
           label="Booker T. Washington"
           name="group3"
           value="3"
-          uswds={uswds}
           tile
         />
         <va-radio-option
@@ -224,7 +208,6 @@ const USWDSTiled = ({
           value="4"
           description="This is optional text that can be used to describe the label in more detail."
           disabled={true}
-          uswds={uswds}
           tile
         />
       </va-radio>
@@ -237,7 +220,6 @@ const USWDSTiledError = ({
   error,
   label,
   required,
-  uswds,
   hint,
 }) => {
   return (
@@ -247,7 +229,6 @@ const USWDSTiledError = ({
         error="This is an error"
         label={label}
         required={required}
-        uswds={uswds}
         hint={hint}
       >
         <va-radio-option
@@ -255,7 +236,6 @@ const USWDSTiledError = ({
           label="Soujourner Truth"
           name="group4"
           value="1"
-          uswds={uswds}
           tile
         />
         <va-radio-option
@@ -263,7 +243,6 @@ const USWDSTiledError = ({
           label="Frederick Douglass"
           name="group4"
           value="2"
-          uswds={uswds}
           tile
         />
         <va-radio-option
@@ -272,7 +251,6 @@ const USWDSTiledError = ({
           name="group4"
           value="3"
           description="This is optional text that can be used to describe the label in more detail."
-          uswds={uswds}
           tile
         />
       </va-radio>
@@ -280,7 +258,7 @@ const USWDSTiledError = ({
   );
 };
 
-const FormsPatternMultipleTemplate = ({ uswds, label, required }) => {
+const FormsPatternMultipleTemplate = ({ label, required }) => {
   const handleClick = () => {
     const header = document
       .getElementById('form-pattern-multiple-input')
@@ -294,7 +272,6 @@ const FormsPatternMultipleTemplate = ({ uswds, label, required }) => {
         required={required}
         error="This is an error"
         id="form-pattern-multiple-input"
-        uswds={uswds}
         label={label}
         use-forms-pattern="multiple"
         form-heading-level={1}
@@ -306,56 +283,49 @@ const FormsPatternMultipleTemplate = ({ uswds, label, required }) => {
           label="Soujourner Truth"
           id="soujourner-truth6"
           name="group6"
-          uswds
           value="1"
         />
         <va-radio-option
           label="Frederick Douglass"
           id="frederick-douglass6"
           name="group6"
-          uswds
           value="2"
         />
         <va-radio-option
           label="Booker T. Washington"
           id="booker-t-washington6"
           name="group6"
-          uswds
           value="3"
         />
         <va-radio-option
           label="George Washington Carver"
           id="george-washington-carver6"
           name="group6"
-          uswds
           value="4"
         />
       </va-radio>
 
       <va-radio
         required="true"
-        uswds={uswds}
         label="Burn pit S2.1, did you serve in any of these locations?"
       >
-        <va-radio-option label="Yes" name="group7" id="yes7" uswds value="1" />
-        <va-radio-option label="No" name="group7" id="no7" uswds value="2" />
+        <va-radio-option label="Yes" name="group7" id="yes7" value="1" />
+        <va-radio-option label="No" name="group7" id="no7" value="2" />
         <va-radio-option
           label="Not sure"
           name="group7"
           id="not-sure7"
-          uswds
           value="3"
         />
       </va-radio>
 
       <hr />
-      <va-button text="click to focus header" onClick={handleClick}></va-button>
+      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
     </>
   );
 };
 
 const FormsPatternSingleTemplate = ({
-  uswds,
   required,
   error,
   label,
@@ -375,16 +345,15 @@ const FormsPatternSingleTemplate = ({
         required={required}
         error={error}
         id={`form-pattern-single-radio-${id}`}
-        uswds={uswds}
         label={label}
         use-forms-pattern="single"
         form-heading-level={1}
         form-heading="Burn pit S2.1, did you serve in any of these locations?"
         form-description="This is the additional form-description prop"
       >
-        <va-radio-option label="Yes" name={name} uswds value="11" />
-        <va-radio-option label="No" name={name} uswds value="22" />
-        <va-radio-option label="Not sure" name={name} uswds value="33" />
+        <va-radio-option label="Yes" name={name} value="11" />
+        <va-radio-option label="No" name={name} value="22" />
+        <va-radio-option label="Not sure" name={name} value="33" />
 
         <div slot="form-description">
           <p>HTML passed into the form-description slot:</p>
@@ -404,7 +373,7 @@ const FormsPatternSingleTemplate = ({
 
       <hr />
 
-      <va-button text="click to focus header" onClick={handleClick}></va-button>
+      <va-button text="click to focus header" onClick={handleClick} uswds={false}></va-button>
     </>
   );
 };
@@ -415,7 +384,6 @@ const defaultArgs = {
   'hint': '',
   'required': false,
   'error': null,
-  'uswds': true,
   'label-header-level': '',
   'header-aria-describedby': null,
   'use-forms-pattern': null,
@@ -433,7 +401,6 @@ Default.argTypes = propStructure(radioDocs);
 export const Tile = USWDSTiled.bind(null);
 Tile.args = {
   ...defaultArgs,
-  uswds: true,
   name: 'tile-example',
   label: 'Select one historical figure',
 };
@@ -455,14 +422,13 @@ LabelHeader.args = {
 
 export const OnBackground = props => (
   <div style={{ background: '#f1f1f1', padding: '30px 5px' }}>
-    <va-radio label="This is a label" uswds>
-      <va-radio-option id="no3" label="No" name="group5" value="1" uswds />
+    <va-radio label="This is a label">
+      <va-radio-option id="no3" label="No" name="group5" value="1" />
       <va-radio-option
         id="yes3"
         label="Yes - Any Veteran"
         name="group5"
         value="2"
-        uswds
       />
     </va-radio>
   </div>
diff --git a/packages/storybook/stories/va-radio.stories.jsx b/packages/storybook/stories/va-radio.stories.jsx
index cc8b31c06..4c7a33b51 100644
--- a/packages/storybook/stories/va-radio.stories.jsx
+++ b/packages/storybook/stories/va-radio.stories.jsx
@@ -15,7 +15,7 @@ const radioDocs = getWebComponentDocs('va-radio');
 const radioItem = getWebComponentDocs('va-radio-option');
 
 export default {
-  title: `Components/Radio button`,
+  title: `V1 Components/Radio button`,
   id: 'components/va-radio',
   subcomponents: componentStructure(radioItem),
   parameters: {
@@ -35,6 +35,7 @@ const vaRadioConst = args => {
     required,
     'label-header-level': labelHeaderLevel,
     'header-aria-describedby': headerAriaDescribedby,
+    uswds,
     ...rest
   } = args;
   return (
@@ -46,9 +47,10 @@ const vaRadioConst = args => {
       hint={hint}
       label-header-level={labelHeaderLevel}
       header-aria-describedby={headerAriaDescribedby}
+      uswds={uswds}
     >
-      <va-radio-option label="Option one" name="example" value="1" />
-      <va-radio-option label="Option two with an extra long label, so we can get it to wrap" name="example" value="2" />
+      <va-radio-option label="Option one" name="example" value="1" uswds={uswds}/>
+      <va-radio-option label="Option two with an extra long label, so we can get it to wrap" name="example" value="2" uswds={uswds}/>
     </va-radio>
   )
 }
@@ -77,6 +79,7 @@ const ReactBindingExample = ({
   error,
   label,
   required,
+  uswds,
 }) => {
   return (
     <>
@@ -85,9 +88,10 @@ const ReactBindingExample = ({
       error={error}
       label={label}
       required={required}
+      uswds={uswds}
       onVaValueChange={e => console.log('Selected radio option:', e?.detail?.value)}>
-      <VaRadioOption label="Option one" name="example" value="1" />
-      <VaRadioOption label="Option two" name="example" value="2" />
+      <VaRadioOption label="Option one" name="example" value="1" uswds={uswds}/>
+      <VaRadioOption label="Option two" name="example" value="2" uswds={uswds}/>
     </VaRadio>
     </>
   );
@@ -98,6 +102,7 @@ const IdUsageTemplate = ({
   error,
   label,
   required,
+  uswds
 }) => {
   return (
     <>
@@ -106,13 +111,15 @@ const IdUsageTemplate = ({
         error={error}
         label={label}
         required={required}
+        uswds={uswds}
       >
-        <va-radio-option id="no1" label="No" name="group1" value="1" />
+        <va-radio-option id="no1" label="No" name="group1" value="1" uswds={uswds}/>
         <va-radio-option
           id="yes1"
           label="Yes - Any Veteran"
           name="group1"
           value="2"
+          uswds={uswds}
         />
       </va-radio>
       <br />
@@ -121,13 +128,15 @@ const IdUsageTemplate = ({
         error={error}
         label={label}
         required={required}
+        uswds={uswds}
       >
-        <va-radio-option id="no2" label="No" name="group2" value="1" />
+        <va-radio-option id="no2" label="No" name="group2" value="1" uswds={uswds}/>
         <va-radio-option
           id="yes2"
           label="Yes - Any Veteran"
           name="group2"
           value="2"
+          uswds={uswds}
         />
       </va-radio>
     </>
@@ -141,6 +150,7 @@ const OptionDescriptionExample = args => {
     label,
     hint,
     required,
+    uswds,
     ...rest
   } = args;
   return (
@@ -150,13 +160,15 @@ const OptionDescriptionExample = args => {
       label={label}
       required={required}
       hint={hint}
+      uswds={uswds}
     >
       <va-radio-option
         label="Option one"
         name="example-description"
         value="1"
+        uswds={uswds}
         description="This is optional text that can be used to describe the label in more detail." />
-      <va-radio-option label="Option two" name="example-description" value="2" />
+      <va-radio-option label="Option two" name="example-description" value="2" uswds={uswds}/>
     </va-radio>
   )
 }
@@ -168,6 +180,7 @@ const OptionTileExample = args => {
     label,
     hint,
     required,
+    uswds,
     ...rest
   } = args;
   return (
@@ -177,14 +190,16 @@ const OptionTileExample = args => {
       label={label}
       required={required}
       hint={hint}
+      uswds={uswds}
     >
       <va-radio-option
         label="Option one"
         name="example-tile"
         value="1"
         tile
+        uswds={uswds}
         description="This is optional text that can be used to describe the label in more detail." />
-      <va-radio-option label="Option two" name="example-tile" value="2" tile />
+      <va-radio-option label="Option two" name="example-tile" value="2" tile uswds={uswds}/>
     </va-radio>
   )
 }
diff --git a/packages/storybook/stories/va-search-input-uswds.stories.jsx b/packages/storybook/stories/va-search-input-uswds.stories.jsx
index bfaf19c95..20e8e0623 100644
--- a/packages/storybook/stories/va-search-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-search-input-uswds.stories.jsx
@@ -7,7 +7,7 @@ VaSearchInput.displayName = 'VaSearchInput';
 const searchDocs = getWebComponentDocs('va-search-input');
 
 export default {
-  title: 'USWDS/Search input USWDS',
+  title: 'Components/Search input USWDS',
   id: 'uswds/va-search-input',
   parameters: {
     componentSubtitle: 'va-search-input web component',
@@ -26,7 +26,6 @@ const Template = ({'button-text': buttonText, value, label, suggestions, uswds,
       onInput={e => console.log(e)}
       onSubmit={e => console.log(e)}
       suggestions={suggestions}
-      uswds={uswds}
       small={small}
       big={big}
     />
@@ -38,7 +37,6 @@ const defaultArgs = {
   'value': 'benefits',
   'label': 'Search VA.gov',
   'suggestions': undefined,
-  'uswds': true,
   'small': false,
   'big': false,
 };
@@ -117,7 +115,6 @@ const TypeaheadTemplate = ({ value, suggestions }) => {
         onInput={handleInput}
         onSubmit={handleSubmit}
         suggestions={latestSuggestions}
-        uswds={true}
       />
 
     </div>
diff --git a/packages/storybook/stories/va-search-input.stories.jsx b/packages/storybook/stories/va-search-input.stories.jsx
index 3ad251fa9..5c5742679 100644
--- a/packages/storybook/stories/va-search-input.stories.jsx
+++ b/packages/storybook/stories/va-search-input.stories.jsx
@@ -7,7 +7,7 @@ VaSearchInput.displayName = 'VaSearchInput';
 const searchDocs = getWebComponentDocs('va-search-input');
 
 export default {
-  title: 'Components/Search input',
+  title: 'V1 Components/Search input',
   id: 'components/va-search-input',
   parameters: {
     componentSubtitle: 'va-search-input web component',
@@ -17,7 +17,7 @@ export default {
   },
 };
 
-const Template = ({ 'button-text': buttonText, value, label, suggestions }) => (
+const Template = ({ 'button-text': buttonText, value, label, suggestions, uswds }) => (
   <VaSearchInput
     buttonText={buttonText}
     value={value}
@@ -25,6 +25,7 @@ const Template = ({ 'button-text': buttonText, value, label, suggestions }) => (
     onInput={e => console.log(e)}
     onSubmit={e => console.log(e)}
     suggestions={suggestions}
+    uswds={uswds}
   />
 );
 
@@ -33,6 +34,7 @@ const defaultArgs = {
   'value': 'benefits',
   'label': 'Search',
   'suggestions': undefined,
+  'uswds': false,
 };
 
 export const Default = Template.bind(null);
@@ -47,7 +49,7 @@ WithButtonText.args = {
   'button-text': 'Search',
 };
 
-const TypeaheadTemplate = ({ value, suggestions }) => {
+const TypeaheadTemplate = ({ value, suggestions, uswds }) => {
   const [latestSuggestions, setLatestSuggestions] = useState(suggestions);
 
   /**
@@ -96,6 +98,7 @@ const TypeaheadTemplate = ({ value, suggestions }) => {
         onInput={handleInput}
         onSubmit={handleSubmit}
         suggestions={latestSuggestions}
+        uswds={uswds}
       />
     </div>
   );
diff --git a/packages/storybook/stories/va-segmented-progress-bar-uswds.stories.jsx b/packages/storybook/stories/va-segmented-progress-bar-uswds.stories.jsx
index 13798c0fd..c6f725fc0 100644
--- a/packages/storybook/stories/va-segmented-progress-bar-uswds.stories.jsx
+++ b/packages/storybook/stories/va-segmented-progress-bar-uswds.stories.jsx
@@ -6,7 +6,7 @@ const segmentedProgressBarDocs = getWebComponentDocs(
 );
 
 export default {
-  title: 'USWDS/Progress bar - segmented USWDS',
+  title: 'Components/Progress bar - segmented USWDS',
   id: 'uswds/va-segmented-progress-bar',
   parameters: {
     componentSubtitle: `va-segmented-progress-bar web component`,
@@ -38,7 +38,6 @@ const Template = ({
       total={total}
       label={label}
       heading-text={headingText}
-      uswds
       labels={labels}
       centered-labels={centeredLabels}
       counters={counters}
diff --git a/packages/storybook/stories/va-segmented-progress-bar.stories.jsx b/packages/storybook/stories/va-segmented-progress-bar.stories.jsx
index 042cd7615..10b097b0f 100644
--- a/packages/storybook/stories/va-segmented-progress-bar.stories.jsx
+++ b/packages/storybook/stories/va-segmented-progress-bar.stories.jsx
@@ -6,7 +6,7 @@ const segmentedProgressBarDocs = getWebComponentDocs(
 );
 
 export default {
-  title: 'Components/Progress bar - segmented',
+  title: 'V1 Components/Progress bar - segmented',
   id: 'components/va-segmented-progress-bar',
   parameters: {
     componentSubtitle: `va-segmented-progress-bar web component`,
@@ -21,6 +21,7 @@ const Template = ({
   current,
   total,
   label,
+  uswds,
 }) => (
   // Wrapper for spacing when viewing in storybook
   // Component can be used without it
@@ -48,6 +49,7 @@ const Template = ({
       current={current}
       total={total}
       label={label}
+      uswds={uswds}
     ></va-segmented-progress-bar>
     <div
       className="schemaform-chapter-progress"
@@ -67,6 +69,7 @@ const defaultArgs = {
   'current': 2,
   'total': 6,
   'label': undefined,
+  uswds: false,
 };
 
 export const Default = Template.bind(null);
diff --git a/packages/storybook/stories/va-select-uswds.stories.jsx b/packages/storybook/stories/va-select-uswds.stories.jsx
index 8f0ddfe30..16bec298a 100644
--- a/packages/storybook/stories/va-select-uswds.stories.jsx
+++ b/packages/storybook/stories/va-select-uswds.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const selectDocs = getWebComponentDocs('va-select');
 
 export default {
-  title: 'USWDS/Select USWDS',
+  title: 'Components/Select USWDS',
   id: 'uswds/va-select',
   parameters: {
     componentSubtitle: 'va-select web component',
@@ -21,7 +21,6 @@ const defaultArgs = {
   'value': '',
   'required': false,
   'error': undefined,
-  'uswds': true,
   'hint': null,
   'aria-live-region-text': 'You selected',
   'options': [
@@ -50,7 +49,6 @@ const Template = ({
   value,
   required,
   error,
-  uswds,
   hint,
   'aria-live-region-text': ariaLiveRegionText,
   options,
@@ -62,7 +60,6 @@ const Template = ({
     <>
       {useAddButton && (
         <va-button
-          uswds
           onClick={() => {
             setModifiedOptions([
               ...modifiedOptions,
@@ -75,7 +72,6 @@ const Template = ({
         />
       )}
       <va-select
-        uswds={uswds}
         label={label}
         name={name}
         value={value}
@@ -97,7 +93,6 @@ const InertTemplate = ({
   value,
   required,
   error,
-  uswds,
   hint,
   'aria-live-region-text': ariaLiveRegionText,
   options,
@@ -113,7 +108,6 @@ const InertTemplate = ({
       </p>
       {useAddButton && (
         <va-button
-          uswds
           onClick={() => {
             setModifiedOptions([
               ...modifiedOptions,
@@ -126,7 +120,6 @@ const InertTemplate = ({
         />
       )}
       <va-select
-        uswds={uswds}
         label={label}
         name={name}
         value={'navy'}
@@ -172,8 +165,8 @@ const I18nTemplate = args => {
 
   return (
     <div>
-      <va-button uswds onClick={e => setLang('es')} text="Español"/>
-      <va-button uswds onClick={e => setLang('en')} text="English"/>
+      <va-button onClick={e => setLang('es')} text="Español"/>
+      <va-button onClick={e => setLang('en')} text="English"/>
       <va-select {...rest}>{options}</va-select>
     </div>
   );
diff --git a/packages/storybook/stories/va-select.stories.jsx b/packages/storybook/stories/va-select.stories.jsx
index 0a6613e45..3d1183506 100644
--- a/packages/storybook/stories/va-select.stories.jsx
+++ b/packages/storybook/stories/va-select.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const selectDocs = getWebComponentDocs('va-select');
 
 export default {
-  title: 'Components/Select',
+  title: 'V1 Components/Select',
   id: 'components/va-select',
   parameters: {
     componentSubtitle: 'va-select web component',
@@ -41,6 +41,7 @@ const defaultArgs = {
     </option>,
   ],
   'use-add-button': false,
+  'uswds': false,
 };
 
 const Template = ({
@@ -53,6 +54,7 @@ const Template = ({
   'aria-live-region-text': ariaLiveRegionText,
   options,
   'use-add-button': useAddButton,
+  uswds,
 }) => {
   const [modifiedOptions, setModifiedOptions] = useState(options);
 
@@ -81,6 +83,7 @@ const Template = ({
         hint={hint}
         aria-live-region-text={ariaLiveRegionText}
         use-add-button={useAddButton}
+        uswds={uswds}
       >
         {modifiedOptions}
       </va-select>
diff --git a/packages/storybook/stories/va-statement-of-truth-uswds.stories.jsx b/packages/storybook/stories/va-statement-of-truth-uswds.stories.jsx
index 4ba8a6770..3a507fa5f 100644
--- a/packages/storybook/stories/va-statement-of-truth-uswds.stories.jsx
+++ b/packages/storybook/stories/va-statement-of-truth-uswds.stories.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { VaStatementOfTruth } from '@department-of-veterans-affairs/web-components/react-bindings';
 import { getWebComponentDocs, StoryDocs } from './wc-helpers';
 
-
 VaStatementOfTruth.displayName = 'VaStatementOfTruth';
+
 const statementOfTruthDocs = getWebComponentDocs('va-statement-of-truth');
 
 export default {
-  title: 'USWDS/Statement of Truth USWDS',
+  title: 'Components/Statement of Truth USWDS',
   id: 'uswds/va-statement-of-truth',
   parameters: {
     componentSubtitle: `va-statement-of-truth web component`,
diff --git a/packages/storybook/stories/va-statement-of-truth.stories.jsx b/packages/storybook/stories/va-statement-of-truth.stories.jsx
deleted file mode 100644
index 6223175f9..000000000
--- a/packages/storybook/stories/va-statement-of-truth.stories.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { VaStatementOfTruth } from '@department-of-veterans-affairs/web-components/react-bindings';
-import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
-
-VaStatementOfTruth.displayName = 'VaStatementOfTruth';
-
-const statementOfTruthDocs = getWebComponentDocs('va-statement-of-truth');
-
-export default {
-  title: 'USWDS/Statement of Truth USWDS',
-  id: 'uswds/va-statement-of-truth',
-  parameters: {
-    componentSubtitle: `va-statement-of-truth web component`,
-    docs: {
-      page: () => <StoryDocs data={statementOfTruthDocs} />,
-    },
-  },
-};
-
-const defaultArgs = {
-  heading: 'Statement of Truth',
-  inputValue: '',
-  inputError: '',
-  checkboxError: '',
-  inputMessageAriaDescribedy: '',
-  checked: false,
-  inputLabel: 'Your full name',
-  checkboxLabel: 'I certify the information above is correct and true to the best of my knowledge and belief.',
-};
-
-const Template = ({
-  heading,
-  inputValue,
-  inputError,
-  checkboxError,
-  inputMessageAriaDescribedy,
-  checked,
-  inputLabel,
-  checkboxLabel
- }) => {
-  return (
-    <div style={{ maxWidth: 600 }}>
-      <VaStatementOfTruth
-        heading={heading}
-        inputValue={inputValue}
-        inputError={inputError}
-        checkboxError={checkboxError}
-        inputMessageAriaDescribedby={inputMessageAriaDescribedy}
-        checked={checked}
-        inputLabel={inputLabel}
-        checkboxLabel={checkboxLabel}
-        onVaInputChange={e => console.log(e, 'vaInputChange fired')}
-        onVaInputBlur={e => console.log(e, 'vaInputBlur fired')}
-        onVaCheckboxChange={e => console.log(e, 'vaCheckboxChange fired')}
-      >
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere architecto sequi minus. Ab iusto adipisci natus error repudiandae totam quo earum dolorum ullam sed, dicta quidem quod at sapiente. Obcaecati?
-        </VaStatementOfTruth>
-    </div>
-  );
-};
-
-export const Default = Template.bind(null);
-Default.args = { ...defaultArgs };
-
-export const WithInputError = Template.bind(null);
-WithInputError.args = { ...defaultArgs, inputError: 'Please enter your name exactly as it appears on your application: John Smith' }
-
-export const WithCheckboxError = Template.bind(null);
-WithCheckboxError.args = { ...defaultArgs, checkboxError: 'You must certify by checking the box' }
-
-export const WithCustomHeading = Template.bind(null);
-WithCustomHeading.args = { ...defaultArgs, heading: 'This is a custom heading' }
-
-export const WithPrefilling = Template.bind(null);
-WithPrefilling.args = { ...defaultArgs, inputValue: 'Jane Doe', checked: true }
\ No newline at end of file
diff --git a/packages/storybook/stories/va-summary-box-uswds.stories.jsx b/packages/storybook/stories/va-summary-box-uswds.stories.jsx
index dcb4aee94..47e4e3d3b 100644
--- a/packages/storybook/stories/va-summary-box-uswds.stories.jsx
+++ b/packages/storybook/stories/va-summary-box-uswds.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const summaryBoxDocs = getWebComponentDocs('va-summary-box');
 
 export default {
-  title: 'USWDS/Summary box USWDS',
+  title: 'Components/Summary box USWDS',
   id: 'uswds/va-summary-box',
   parameters: {
     componentSubtitle: `va-summary-box web component`,
@@ -14,12 +14,13 @@ export default {
     },
   },
 };
-const defaultArgs = { uswds: true };
 
-const Template = args => {
-  const { uswds } = args
+const defaultArgs = {};
+
+
+const Template = ({}) => {
   return (
-  <va-summary-box uswds={uswds}>
+  <va-summary-box>
     <h3 slot="headline">
       If I'm a Veteran, can I get VR&E benefits and services?
     </h3>
diff --git a/packages/storybook/stories/va-summary-box.stories.jsx b/packages/storybook/stories/va-summary-box.stories.jsx
index 9c9ff5868..dab9c88ce 100644
--- a/packages/storybook/stories/va-summary-box.stories.jsx
+++ b/packages/storybook/stories/va-summary-box.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const summaryBoxDocs = getWebComponentDocs('va-summary-box');
 
 export default {
-  title: 'Components/Summary box',
+  title: 'V1 Components/Summary box',
   id: 'components/va-summary-box',
   parameters: {
     componentSubtitle: `va-summary-box web component`,
diff --git a/packages/storybook/stories/va-table.stories.jsx b/packages/storybook/stories/va-table.stories.jsx
index 105cbfc28..751b302c2 100644
--- a/packages/storybook/stories/va-table.stories.jsx
+++ b/packages/storybook/stories/va-table.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const tableDocs = getWebComponentDocs('va-table');
 
 export default {
-  title: `Components/Table`,
+  title: `V1 Components/Table`,
   id: 'components/va-table',
   parameters: {
     componentSubtitle: 'va-table web component',
@@ -245,6 +245,7 @@ const Pagination = args => {
         pages={numPages}
         maxPageListLength={MAX_PAGE_LIST_LENGTH}
         showLastPage
+        uswds={false}
       />
     </main>
   );
diff --git a/packages/storybook/stories/va-telephone.stories.jsx b/packages/storybook/stories/va-telephone.stories.jsx
index a28dda45e..efd124dd1 100644
--- a/packages/storybook/stories/va-telephone.stories.jsx
+++ b/packages/storybook/stories/va-telephone.stories.jsx
@@ -37,7 +37,7 @@ const Contacts = () => (
 );
 
 export default {
-  title: `Components/Telephone`,
+  title: `V1 Components/Telephone`,
   id: 'components/va-telephone',
   parameters: {
     componentSubtitle: `va-telephone web component`,
diff --git a/packages/storybook/stories/va-text-input-uswds.stories.jsx b/packages/storybook/stories/va-text-input-uswds.stories.jsx
index f398c463c..d02a04924 100644
--- a/packages/storybook/stories/va-text-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-text-input-uswds.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs, applyFocus } from './wc-
 const textInputDocs = getWebComponentDocs('va-text-input');
 
 export default {
-  title: `USWDS/Text input USWDS`,
+  title: `Components/Text input USWDS`,
   id: 'uswds/va-text-input',
   parameters: {
     componentSubtitle: `va-text-input web component`,
@@ -51,7 +51,6 @@ const defaultArgs = {
   'type': undefined,
   'success': false,
   'pattern': undefined,
-  'uswds': true,
   'hint': null,
   'message-aria-describedby': 'Optional description text for screen readers',
   'use-forms-pattern': null,
@@ -74,14 +73,12 @@ const Template = ({
   type,
   success,
   pattern,
-  uswds,
   hint,
   'message-aria-describedby': messageAriaDescribedby,
   charcount
 }) => {
   return (
     <va-text-input
-      uswds={uswds}
       name={name}
       label={label}
       autocomplete={autocomplete}
@@ -123,12 +120,11 @@ const I18nTemplate = ({
   }, [lang]);
   return (
     <>
-      <va-button uswds onClick={e => setLang('es')} text="Español"/>
-      <va-button uswds onClick={e => setLang('en')} text="English"/>
-      <va-button uswds onClick={e => setLang('tl')} text="Tagalog"/>
+      <va-button onClick={e => setLang('es')} text="Español"/>
+      <va-button onClick={e => setLang('en')} text="English"/>
+      <va-button onClick={e => setLang('tl')} text="Tagalog"/>
 
       <va-text-input
-        uswds={uswds}
         name={name}
         label={label}
         autocomplete={autocomplete}
@@ -148,13 +144,11 @@ const I18nTemplate = ({
 const WidthsTemplate = ({
   name,
   value,
-  uswds,
 }) => {
   return (
     <>
       <va-text-input
         width="2xs"
-        uswds={uswds}
         name={name}
         label='My input - 2xs'
         value={value}
@@ -162,7 +156,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="xs"
-        uswds={uswds}
         name={name}
         label='My input - xs'
         value={value}
@@ -170,7 +163,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="sm"
-        uswds={uswds}
         name={name}
         label='My input - sm'
         value={value}
@@ -178,7 +170,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="md"
-        uswds={uswds}
         name={name}
         label='My input - md'
         value={value}
@@ -186,7 +177,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="lg"
-        uswds={uswds}
         name={name}
         label='My input - lg'
         value={value}
@@ -194,7 +184,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="xl"
-        uswds={uswds}
         name={name}
         label='My input - xl'
         value={value}
@@ -202,7 +191,6 @@ const WidthsTemplate = ({
 
       <va-text-input
         width="2xl"
-        uswds={uswds}
         name={name}
         label='My input - 2xl'
         value={value}
@@ -229,7 +217,6 @@ const FormsPatternMultipleTemplate = ({
         required
         error="This is an error message"
         id="form-pattern-multiple-input"
-        uswds={uswds}
         name={name}
         label='First Name'
         value={value}
@@ -240,14 +227,12 @@ const FormsPatternMultipleTemplate = ({
       />
 
       <va-text-input
-        uswds={uswds}
         name={name}
         label='Last Name'
         value={value}
       />
 
       <va-text-input
-        uswds={uswds}
         name={name}
         label='Email address'
         value={value}
@@ -255,7 +240,8 @@ const FormsPatternMultipleTemplate = ({
       <hr />
       <va-button
         text="click to focus header"
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
@@ -264,7 +250,6 @@ const FormsPatternMultipleTemplate = ({
 const FormsPatternSingleTemplate = ({
   name,
   value,
-  uswds,
   error,
 }) => {
   const id = (Math.floor(Math.random() * 10) + 1);
@@ -280,7 +265,6 @@ const FormsPatternSingleTemplate = ({
       <va-text-input
         required
         id={`form-pattern-single-input-${id}`}
-        uswds={uswds}
         name={name}
         label="Historical figure"
         hint="This is hint text"
@@ -305,7 +289,8 @@ const FormsPatternSingleTemplate = ({
 
       <va-button
         text="click to focus header"
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
@@ -354,7 +339,7 @@ WithHintText.args = { ...defaultArgs, hint: 'This is hint text' };
 const WithInlineHintTextTemplate = ({ name, label }) => {
   return (
     <>
-      <va-text-input name={name} label={label} uswds />
+      <va-text-input name={name} label={label} />
       <p>If your hint is very short it can be included in the label.</p>
     </>
   );
@@ -365,7 +350,7 @@ WithInlineHintText.args = { ...defaultArgs, label: "My input (with hint)" };
 
 const WithAdditionalInfoTemplate = ({ name, label }) => {
   return (
-    <va-text-input name={name} label={label} uswds>
+    <va-text-input name={name} label={label}>
       <div>
         <va-additional-info trigger="Why is this required?">
           We need the Veteran’s Social Security number or tax identification
diff --git a/packages/storybook/stories/va-text-input.stories.jsx b/packages/storybook/stories/va-text-input.stories.jsx
index 409fa3d5f..cb4c4ad57 100644
--- a/packages/storybook/stories/va-text-input.stories.jsx
+++ b/packages/storybook/stories/va-text-input.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const textInputDocs = getWebComponentDocs('va-text-input');
 
 export default {
-  title: `Components/Text input`,
+  title: `V1 Components/Text input`,
   id: 'components/va-text-input',
   parameters: {
     componentSubtitle: `va-text-input web component`,
@@ -53,6 +53,7 @@ const defaultArgs = {
   'pattern': undefined,
   'message-aria-describedby': 'Optional description text for screen readers',
   hint: null,
+  uswds: false,
   charcount: false,
 };
 
@@ -72,6 +73,7 @@ const Template = ({
   pattern,
   hint,
   'message-aria-describedby': messageAriaDescribedby,
+  uswds,
   charcount,
 }) => {
   return (
@@ -93,7 +95,8 @@ const Template = ({
       onBlur={e => console.log('blur event', e)}
       onInput={e => console.log('input event value', e.target.value)}
       message-aria-describedby={messageAriaDescribedby}
-      charcount
+      uswds={uswds}
+      charcount={charcount}
     />
   );
 };
@@ -110,6 +113,7 @@ const I18nTemplate = ({
   value,
   inputmode,
   type,
+  uswds,
 }) => {
   const [lang, setLang] = useState('en');
   useEffect(() => {
@@ -132,6 +136,7 @@ const I18nTemplate = ({
         value={value}
         inputmode={inputmode}
         type={type}
+        uswds={uswds}
       />
     </>
   );
@@ -141,6 +146,7 @@ const I18nTemplate = ({
 const WidthsTemplate = ({
   name,
   value,
+  uswds
 }) => {
   return (
     <>
@@ -149,6 +155,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - 2xs'
         value={value}
+        uswds={uswds}
       />
 
       <va-text-input
@@ -156,6 +163,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - xs'
         value={value}
+        uswds={uswds}
       />  
   
       <va-text-input
@@ -163,6 +171,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - sm'
         value={value}
+        uswds={uswds}
       />
 
       <va-text-input
@@ -170,6 +179,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - md'
         value={value}
+        uswds={uswds}
       />
 
       <va-text-input
@@ -177,6 +187,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - lg'
         value={value}
+        uswds={uswds}
       />
 
       <va-text-input
@@ -184,6 +195,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - xl'
         value={value}
+        uswds={uswds}
       />
 
       <va-text-input
@@ -191,6 +203,7 @@ const WidthsTemplate = ({
         name={name}
         label='My input - 2xl'
         value={value}
+        uswds={uswds}
       />
     </>
   );
@@ -258,10 +271,10 @@ WithAnalytics.args = { ...defaultArgs, 'enable-analytics': true };
 export const WithHintText = Template.bind(null);
 WithHintText.args = { ...defaultArgs, hint: "This is example hint text" };
 
-const WithInlineHintTextTemplate = ({ name, label }) => {
+const WithInlineHintTextTemplate = ({ name, label, uswds }) => {
   return (
     <>
-      <va-text-input name={name} label={label} />
+      <va-text-input name={name} label={label} uswds={uswds}/>
       <p>If your hint is very short it can be included in the label.</p>
     </>
   );
@@ -270,9 +283,9 @@ const WithInlineHintTextTemplate = ({ name, label }) => {
 export const WithInlineHintText = WithInlineHintTextTemplate.bind(null);
 WithInlineHintText.args = { ...defaultArgs, label: "My input (with hint)" };
 
-const AdditionalInfoTemplate = ({ name, label }) => {
+const AdditionalInfoTemplate = ({ name, label, uswds }) => {
   return (
-    <va-text-input name={name} label={label}>
+    <va-text-input name={name} label={label} uswds={uswds}>
       <div className="vads-u-margin-bottom--1">
         <va-additional-info trigger="Why is this required?">
           We need the Veteran’s Social Security number or tax identification
diff --git a/packages/storybook/stories/va-textarea-uswds.stories.jsx b/packages/storybook/stories/va-textarea-uswds.stories.jsx
index bbf8ded60..24a9add22 100644
--- a/packages/storybook/stories/va-textarea-uswds.stories.jsx
+++ b/packages/storybook/stories/va-textarea-uswds.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs, applyFocus } from './wc-
 const textareaDocs = getWebComponentDocs('va-textarea');
 
 export default {
-  title: `USWDS/Textarea USWDS`,
+  title: `Components/Textarea USWDS`,
   id: 'uswds/va-textarea',
   parameters: {
     componentSubtitle: `va-textarea web component`,
@@ -24,7 +24,6 @@ const defaultArgs = {
   'maxlength': undefined,
   'value': undefined,
   'placeholder': '',
-  'uswds': true,
   'hint': null,
   'charcount': false,
   'message-aria-describedby': 'Optional description text for screen readers',
@@ -43,14 +42,12 @@ const Template = ({
   maxlength,
   value,
   placeholder,
-  uswds,
   hint,
   charcount,
   'message-aria-describedby': messageAriaDescribedby,
 }) => {
   return (
     <va-textarea
-      uswds={uswds}
       name={name}
       label={label}
       enable-analytics={enableAnalytics}
@@ -82,7 +79,6 @@ const ResizableTemplate = ({
 }) => {
   return (
     <va-textarea
-      uswds={uswds}
       class="resize-y"
       name={name}
       label={label}
@@ -108,7 +104,6 @@ const FormsPatternSingleTemplate = ({
   maxlength,
   value,
   placeholder,
-  uswds,
   hint,
 }) => {
   const id = (Math.floor(Math.random() * 100) + 1);
@@ -123,7 +118,6 @@ const FormsPatternSingleTemplate = ({
     <>
       <va-textarea
         id={`form-pattern-single-input-${id}`}
-        uswds={uswds}
         class="resize-y"
         name={name}
         label={label}
@@ -154,7 +148,8 @@ const FormsPatternSingleTemplate = ({
 
       <va-button 
         text="click to focus header" 
-        onClick={handleClick}>
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
@@ -170,7 +165,6 @@ const FormsPatternMultipleTemplate = ({
   maxlength,
   value,
   placeholder,
-  uswds,
   hint,
 }) => {
   const id = (Math.floor(Math.random() * 100) + 1);
@@ -185,7 +179,6 @@ const FormsPatternMultipleTemplate = ({
     <>
       <va-textarea
         id={`form-pattern-multiple-input`}
-        uswds={uswds}
         class="resize-y"
         name={name}
         label={label}
@@ -203,7 +196,6 @@ const FormsPatternMultipleTemplate = ({
         form-heading="Enter additional information"
       />
       <va-textarea
-        uswds={uswds}
         class="resize-y"
         name={name}
         label={"Describe your hopes"}
@@ -217,7 +209,6 @@ const FormsPatternMultipleTemplate = ({
         onInput={e => console.log('input event value', e.target.value)}
       />
       <va-textarea
-        uswds={uswds}
         class="resize-y"
         name={name}
         label={"Describe your dreams"}
@@ -233,8 +224,9 @@ const FormsPatternMultipleTemplate = ({
       <hr />
 
       <va-button 
-        text="click to focus header" 
-        onClick={handleClick}>
+        text="click to focus header"
+        onClick={handleClick}
+        uswds={false}>
       </va-button>
     </>
   );
diff --git a/packages/storybook/stories/va-textarea.stories.jsx b/packages/storybook/stories/va-textarea.stories.jsx
index 22032fb84..d0b365329 100644
--- a/packages/storybook/stories/va-textarea.stories.jsx
+++ b/packages/storybook/stories/va-textarea.stories.jsx
@@ -5,7 +5,7 @@ import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 const textareaDocs = getWebComponentDocs('va-textarea');
 
 export default {
-  title: `Components/Textarea`,
+  title: `V1 Components/Textarea`,
   id: 'components/va-textarea',
   parameters: {
     componentSubtitle: `va-textarea web component`,
@@ -26,6 +26,7 @@ const defaultArgs = {
   'placeholder': '',
   hint: null,
   'message-aria-describedby': 'Optional description text for screen readers',
+  uswds: false,
 };
 
 const Template = ({
@@ -39,6 +40,7 @@ const Template = ({
   placeholder,
   hint,
   'message-aria-describedby': messageAriaDescribedby,
+  uswds,
 }) => {
   return (
     <va-textarea
@@ -54,6 +56,7 @@ const Template = ({
       onBlur={e => console.log('blur event', e)}
       onInput={e => console.log('input event value', e.target.value)}
       message-aria-describedby={messageAriaDescribedby}
+      uswds={uswds}
     />
   );
 };
@@ -81,6 +84,7 @@ const ResizableTemplate = ({
       placeholder={placeholder}
       onBlur={e => console.log('blur event', e)}
       onInput={e => console.log('input event value', e.target.value)}
+      uswds={false}
     />
   );
 };
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index f357983aa..9454acaea 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/web-components",
-  "version": "5.1.2",
+  "version": "6.0.0",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/packages/web-components/src/components/va-accordion/va-accordion-item.e2e.ts b/packages/web-components/src/components/va-accordion/va-accordion-item.e2e.ts
index 93b04bbcb..c103ad4e5 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion-item.e2e.ts
+++ b/packages/web-components/src/components/va-accordion/va-accordion-item.e2e.ts
@@ -7,11 +7,11 @@ describe('va-accordion-item', () => {
   it('renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-accordion-item></va-accordion-item>');
+    await page.setContent('<va-accordion-item uswds="false"></va-accordion-item>');
     const element = await page.find('va-accordion-item');
 
     expect(element).toEqualHtml(`
-    <va-accordion-item class="hydrated">
+    <va-accordion-item class="hydrated" uswds="false">
       <mock:shadow-root>
         <h2>
           <button aria-controls="content" aria-expanded="false" part="accordion-header">
@@ -31,7 +31,7 @@ describe('va-accordion-item', () => {
   it('allows the heading level to be changed via prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header">Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" uswds="false">Content inside</va-accordion-item>',
     );
     const element = await page.find('va-accordion-item');
     let header = element.shadowRoot.childNodes[0];
@@ -48,7 +48,7 @@ describe('va-accordion-item', () => {
   it('slot usage allows the heading level to be set directly', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item><h6 slot="headline">The header</h6>Content inside</va-accordion-item>',
+      '<va-accordion-item uswds="false"><h6 slot="headline">The header</h6>Content inside</va-accordion-item>',
     );
     const element = await page.find('va-accordion-item');
     let header = element.shadowRoot.childNodes[0];
@@ -59,7 +59,7 @@ describe('va-accordion-item', () => {
   it('passes an axe check when open', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-accordion-item open header="First item">Some content</va-accordion-item>
+        <va-accordion-item open header="First item" uswds="false">Some content</va-accordion-item>
       `);
 
     await axeCheck(page);
@@ -68,7 +68,7 @@ describe('va-accordion-item', () => {
   it('slot usage passes an axe check when open', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-accordion-item><h3 slot="headline">First header</h3>Some content</va-accordion-item>
+        <va-accordion-item uswds="false"><h3 slot="headline">First header</h3>Some content</va-accordion-item>
       `);
 
     await axeCheck(page);
@@ -77,7 +77,7 @@ describe('va-accordion-item', () => {
   it('passes an axe check when closed', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-accordion-item header="First item">Some content</va-accordion-item>
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
       `);
 
     await axeCheck(page);
@@ -86,7 +86,7 @@ describe('va-accordion-item', () => {
   it('slot usage passes an axe check when closed', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-accordion-item><h3 slot="headline">First header</h3>Some content</va-accordion-item>
+        <va-accordion-item uswds="false"><h3 slot="headline">First header</h3>Some content</va-accordion-item>
       `);
 
     await axeCheck(page);
@@ -95,7 +95,7 @@ describe('va-accordion-item', () => {
   it('sets aria-expanded to true based on prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header">Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" uswds="false">Content inside</va-accordion-item>',
     );
     const component = await page.find('va-accordion-item');
     const button = await page.find('va-accordion-item >>> button');
@@ -111,7 +111,7 @@ describe('va-accordion-item', () => {
   it('fires a custom event when the button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header">Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" uswds="false">Content inside</va-accordion-item>',
     );
 
     const accordionItemToggled = await page.spyOnEvent('accordionItemToggled');
@@ -125,7 +125,7 @@ describe('va-accordion-item', () => {
   it('slot usage fires a custom event when the button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item><h3 slot="headline">The header</h3>Content inside</va-accordion-item>',
+      '<va-accordion-item uswds="false"><h3 slot="headline">The header</h3>Content inside</va-accordion-item>',
     );
 
     const accordionItemToggled = await page.spyOnEvent('accordionItemToggled');
@@ -139,7 +139,7 @@ describe('va-accordion-item', () => {
   it('adds a subheader when the subheader prop is used', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header" subheader="The subheader">Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" subheader="The subheader" uswds="false">Content inside</va-accordion-item>',
     );
 
     const element = await page.find('va-accordion-item');
@@ -151,7 +151,7 @@ describe('va-accordion-item', () => {
   it('slot usage allows for a subheader when the subheader prop is used', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item subheader="The subheader"><h3 slot="headline">The header</h3>Content inside</va-accordion-item>',
+      '<va-accordion-item subheader="The subheader" uswds="false"><h3 slot="headline">The header</h3>Content inside</va-accordion-item>',
     );
 
     const element = await page.find('va-accordion-item');
@@ -163,11 +163,11 @@ describe('va-accordion-item', () => {
   it("render the sub header icon", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header" subheader="The subheader"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" subheader="The subheader" uswds="false"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
     );
     const element = await page.find('va-accordion-item');
     expect(element).toEqualHtml(
-      `<va-accordion-item class="hydrated" header="The header" subheader="The subheader">
+      `<va-accordion-item class="hydrated" header="The header" subheader="The subheader" uswds="false">
         <mock:shadow-root>
         <h2>
           <button aria-controls="content" aria-expanded="false" part="accordion-header">
@@ -193,11 +193,11 @@ describe('va-accordion-item', () => {
   it("does not render the sub header icon if there is no sub header", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" uswds="false"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
     );
     const element = await page.find('va-accordion-item');
     expect(element).toEqualHtml(`
-    <va-accordion-item class="hydrated" header="The header">
+    <va-accordion-item class="hydrated" header="The header" uswds="false">
       <mock:shadow-root>
         <h2>
           <button aria-controls="content" aria-expanded="false" part="accordion-header">
@@ -219,7 +219,7 @@ describe('va-accordion-item', () => {
   it('passes axe check with subheader icon', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-accordion-item header="The header" subheader="The subheader"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
+      '<va-accordion-item header="The header" subheader="The subheader" uswds="false"><i slot="subheader-icon" aria-hidden="true" className="fas fa-envelope"></i>Content inside</va-accordion-item>',
     );
 
     await axeCheck(page);
diff --git a/packages/web-components/src/components/va-accordion/va-accordion-item.tsx b/packages/web-components/src/components/va-accordion/va-accordion-item.tsx
index 6fc01373a..d01c59ffe 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion-item.tsx
+++ b/packages/web-components/src/components/va-accordion/va-accordion-item.tsx
@@ -58,7 +58,7 @@ export class VaAccordionItem {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Local State for slot=headline replacement of props (header).
diff --git a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
index 25b3ca063..338e2565b 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
+++ b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
@@ -6,12 +6,12 @@ describe('va-accordion', () => {
   it('renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-accordion></va-accordion>');
+    await page.setContent('<va-accordion uswds="false"></va-accordion>');
     const element = await page.find('va-accordion');
 
     // The i18next translation keys are being rendered
     expect(element).toEqualHtml(`
-      <va-accordion class="hydrated">
+      <va-accordion class="hydrated" uswds="false">
         <mock:shadow-root>
           <button aria-controls="" aria-expanded="false" aria-label="expand-all-aria-label" class="va-accordion__button">
             expand-all +
@@ -25,11 +25,11 @@ describe('va-accordion', () => {
   it('does not render expand collapse button if `open-single` is true', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-accordion open-single="true"></va-accordion>');
+    await page.setContent('<va-accordion open-single="true" uswds="false"></va-accordion>');
     const element = await page.find('va-accordion');
 
     expect(element).toEqualHtml(`
-      <va-accordion class="hydrated" open-single="true">
+      <va-accordion class="hydrated" open-single="true" uswds="false">
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
@@ -40,9 +40,9 @@ describe('va-accordion', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
 
     await axeCheck(page);
@@ -51,9 +51,9 @@ describe('va-accordion', () => {
   it('closes one item when another opens if `open-single` is true', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion open-single>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion open-single uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
 
     const buttons = await page.findAll(
@@ -77,9 +77,9 @@ describe('va-accordion', () => {
   it('allows multiple items to be open by default', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
 
     const buttons = await page.findAll(
@@ -102,9 +102,9 @@ describe('va-accordion', () => {
   it('expands all items when `Expand all +` button is triggered', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
 
     const expandButton = await page.find('va-accordion >>> button');
@@ -119,9 +119,9 @@ describe('va-accordion', () => {
   it('collapses all items when `Collapse All -` button is triggered', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
 
     const expandButton = await page.find('va-accordion >>> button');
@@ -139,9 +139,9 @@ describe('va-accordion', () => {
   it('tracks which accordions are opened', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item">Some content</va-accordion-item>
-        <va-accordion-item header="Second item">A bit more</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" uswds="false">Some content</va-accordion-item>
+        <va-accordion-item header="Second item" uswds="false">A bit more</va-accordion-item>
       </va-accordion>`);
     const accordionItemsButtons = await page.findAll(
       'va-accordion-item >>> button',
@@ -162,8 +162,8 @@ describe('va-accordion', () => {
   it('fires an analytics event when expanded', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item header="First item" subheader="First subheader">Some content</va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item header="First item" subheader="First subheader" uswds="false">Some content</va-accordion-item>
       </va-accordion>`);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -189,8 +189,8 @@ describe('va-accordion', () => {
   it('does not fire an analytics event when disableAnalytics is passed', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion disable-analytics="true">
-        <va-accordion-item header="First item" subheader="First subheader">Some content</va-accordion-item>
+      <va-accordion disable-analytics="true" uswds="false">
+        <va-accordion-item header="First item" subheader="First subheader" uswds="false">Some content</va-accordion-item>
       </va-accordion>`);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -205,8 +205,8 @@ describe('va-accordion', () => {
   it('includes sectionHeading in analytics event when present', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion section-heading="The Section Heading">
-        <va-accordion-item header="First item" subheader="First subheader">Some content</va-accordion-item>
+      <va-accordion section-heading="The Section Heading" uswds="false">
+        <va-accordion-item header="First item" subheader="First subheader" uswds="false">Some content</va-accordion-item>
       </va-accordion>`);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -232,8 +232,8 @@ describe('va-accordion', () => {
   it('slot usage includes correct header in analytics event when present', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion section-heading="The Section Heading">
-        <va-accordion-item subheader="First subheader"><h3 slot="headline">First header</h3>Some content</va-accordion-item>
+      <va-accordion section-heading="The Section Heading" uswds="false">
+        <va-accordion-item subheader="First subheader" uswds="false"><h3 slot="headline">First header</h3>Some content</va-accordion-item>
       </va-accordion>`);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -259,8 +259,8 @@ describe('va-accordion', () => {
   it('fires an analytics event with default data when no props are provided', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-accordion>
-        <va-accordion-item></va-accordion-item>
+      <va-accordion uswds="false">
+        <va-accordion-item uswds="false"></va-accordion-item>
       </va-accordion>`);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
diff --git a/packages/web-components/src/components/va-accordion/va-accordion.scss b/packages/web-components/src/components/va-accordion/va-accordion.scss
index 672d95f21..ff3c7fd87 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion.scss
+++ b/packages/web-components/src/components/va-accordion/va-accordion.scss
@@ -9,7 +9,7 @@
 
 /** Original Component Style **/
 
-:host(:not([uswds="true"],[uswds=""])) {
+:host([uswds='false']) {
   display: block;
   width: 100%;
   color: var(--color-gray-dark);
@@ -17,8 +17,8 @@
 }
 
 /* If `bordered` is present and if it is *not* false */
-:host([bordered='true']:not([uswds="true"],[uswds=""])),
-:host([bordered='']:not([uswds="true"],[uswds=""])) {
+:host([bordered='true'][uswds='false']),
+:host([bordered=''][uswds='false']) {
   --item-border: 3px solid var(--color-gray-lightest);
 }
 
diff --git a/packages/web-components/src/components/va-accordion/va-accordion.tsx b/packages/web-components/src/components/va-accordion/va-accordion.tsx
index a80b966ce..778c0ae52 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion.tsx
+++ b/packages/web-components/src/components/va-accordion/va-accordion.tsx
@@ -67,7 +67,7 @@ export class VaAccordion {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * If `true`, doesn't fire the CustomEvent which can be used for analytics tracking.
diff --git a/packages/web-components/src/components/va-additional-info/test/va-additional-info.e2e.ts b/packages/web-components/src/components/va-additional-info/test/va-additional-info.e2e.ts
index 90bd3900c..0781e1350 100644
--- a/packages/web-components/src/components/va-additional-info/test/va-additional-info.e2e.ts
+++ b/packages/web-components/src/components/va-additional-info/test/va-additional-info.e2e.ts
@@ -5,13 +5,13 @@ describe('va-additional-info', () => {
   it('renders', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-additional-info trigger="More info"></va-additional-info>',
+      '<va-additional-info trigger="More info" uswds="false"></va-additional-info>',
     );
 
     const element = await page.find('va-additional-info');
 
     expect(element).toEqualHtml(`
-      <va-additional-info trigger="More info" class="hydrated">
+      <va-additional-info trigger="More info" class="hydrated" uswds="false">
         <mock:shadow-root>
           <a aria-controls="info" aria-expanded="false" role="button" tabindex="0">
             <div>
@@ -32,7 +32,7 @@ describe('va-additional-info', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information">
+      `<va-additional-info trigger="Additional information" uswds="false">
         <div>
           Additional content
         </div>
@@ -45,7 +45,7 @@ describe('va-additional-info', () => {
   it('passes an axe check when opened', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information">
+      `<va-additional-info trigger="Additional information" uswds="false">
         <div>
           Additional content
         </div>
@@ -61,7 +61,7 @@ describe('va-additional-info', () => {
   it('expands when clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information">
+      `<va-additional-info trigger="Additional information" uswds="false">
         <div id="content">
           Additional content
         </div>
@@ -93,7 +93,7 @@ describe('va-additional-info', () => {
   it('has keyboard control for expanding & collapsing on spacebar', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information">
+      `<va-additional-info trigger="Additional information" uswds="false">
         <div id="content">
           Additional content
         </div>
@@ -122,7 +122,7 @@ describe('va-additional-info', () => {
   it('has keyboard control for expanding & collapsing on enter', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information">
+      `<va-additional-info trigger="Additional information" uswds="false">
         <div id="content">
           Additional content
         </div>
@@ -152,7 +152,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever">
+      <va-additional-info trigger="Whatever" uswds="false">
         <div>More content</div>
       </va-additional-info>
     `);
@@ -175,7 +175,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever">
+      <va-additional-info trigger="Whatever" uswds="false">
         <div>More content</div>
       </va-additional-info>
     `);
@@ -196,7 +196,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever" disable-analytics>
+      <va-additional-info trigger="Whatever" disable-analytics uswds="false">
         <div>More content</div>
       </va-additional-info>
     `);
@@ -212,7 +212,7 @@ describe('va-additional-info', () => {
   it('sets the correct max-height value for the content given', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-additional-info trigger="Click here for a treat!" disable-analytics>
+      <va-additional-info trigger="Click here for a treat!" disable-analytics uswds="false">
         <div style="height:50px;padding:10px 0;margin:5px 0;">We're out of treats! Try again later.</div>
       </va-additional-info>
     `);
@@ -349,7 +349,7 @@ describe('va-additional-info', () => {
   it('uswds v3 has keyboard control for expanding & collapsing on enter', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-additional-info trigger="Additional information" uswds>
+      `<va-additional-info trigger="Additional information">
         <div id="content">
           Additional content
         </div>
@@ -379,7 +379,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever" uswds>
+      <va-additional-info trigger="Whatever">
         <div>More content</div>
       </va-additional-info>
     `);
@@ -402,7 +402,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever" uswds>
+      <va-additional-info trigger="Whatever">
         <div>More content</div>
       </va-additional-info>
     `);
@@ -423,7 +423,7 @@ describe('va-additional-info', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-additional-info trigger="Whatever" uswds disable-analytics>
+      <va-additional-info trigger="Whatever" disable-analytics>
         <div>More content</div>
       </va-additional-info>
     `);
@@ -439,7 +439,7 @@ describe('va-additional-info', () => {
   it('uswds v3 sets the correct max-height value for the content given', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-additional-info trigger="Click here for a treat!" uswds disable-analytics>
+      <va-additional-info trigger="Click here for a treat!" disable-analytics>
         <div style="height:50px;padding:10px 0;margin:5px 0;">We're out of treats! Try again later.</div>
       </va-additional-info>
     `);
diff --git a/packages/web-components/src/components/va-additional-info/va-additional-info.tsx b/packages/web-components/src/components/va-additional-info/va-additional-info.tsx
index 6854ff333..d8c1b50dc 100644
--- a/packages/web-components/src/components/va-additional-info/va-additional-info.tsx
+++ b/packages/web-components/src/components/va-additional-info/va-additional-info.tsx
@@ -33,7 +33,7 @@ export class VaAdditionalInfo {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
   /**
    * If `true`, doesn't fire the CustomEvent which can be used for analytics tracking.
    */
diff --git a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts b/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts
index 82848383d..d55ee0c51 100644
--- a/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts
+++ b/packages/web-components/src/components/va-alert/test/va-alert.e2e.ts
@@ -5,11 +5,11 @@ describe('va-alert', () => {
   it('renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-alert></va-alert>');
+    await page.setContent('<va-alert uswds="false"></va-alert>');
     const element = await page.find('va-alert');
 
     expect(element).toEqualHtml(`
-      <va-alert class="hydrated" status="info">
+      <va-alert class="hydrated" status="info" uswds="false">
         <mock:shadow-root>
           <div class="alert info">
             <i aria-hidden="true"></i>
@@ -26,11 +26,11 @@ describe('va-alert', () => {
   it('renders an empty div with a "polite" aria-live tag when not visible', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-alert visible="false"></va-alert>');
+    await page.setContent('<va-alert visible="false" uswds="false"></va-alert>');
     const element = await page.find('va-alert');
 
     expect(element).toEqualHtml(`
-      <va-alert class="hydrated" visible="false" status="info">
+      <va-alert class="hydrated" visible="false" status="info" uswds="false">
         <mock:shadow-root>
           <div aria-live="polite"></div>
         </mock:shadow-root>
@@ -41,7 +41,7 @@ describe('va-alert', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-alert><h3 slot="headline">Alert</h3>Alert content</va-alert>`,
+      `<va-alert uswds="false"><h3 slot="headline">Alert</h3>Alert content</va-alert>`,
     );
 
     await axeCheck(page);
@@ -49,7 +49,7 @@ describe('va-alert', () => {
 
   it('only shows a close icon if the closeable prop is passed', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-alert>Alert</va-alert>');
+    await page.setContent('<va-alert uswds="false">Alert</va-alert>');
 
     const element = await page.find('va-alert');
 
@@ -66,7 +66,7 @@ describe('va-alert', () => {
   it('fires a custom "close" event when the close button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert closeable="true">Content inside</va-alert>',
+      '<va-alert closeable="true" uswds="false">Content inside</va-alert>',
     );
 
     const closeSpy = await page.spyOnEvent('closeEvent');
@@ -80,7 +80,7 @@ describe('va-alert', () => {
   it('fires an analytics event when a link is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert><h4 slot="headline">This is an alert</h4><a href="#">This is a link</a></va-alert>',
+      '<va-alert uswds="false"><h4 slot="headline">This is an alert</h4><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -104,7 +104,7 @@ describe('va-alert', () => {
   it('uses a null headline in the analytics event detail when the heading is absent', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert><a href="#">This is a link</a></va-alert>',
+      '<va-alert uswds="false"><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -128,7 +128,7 @@ describe('va-alert', () => {
   it('does not fire an analytics event when disableAnalytics is passed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert disable-analytics="true"><a href="#">This is a link</a></va-alert>',
+      '<va-alert disable-analytics="true" uswds="false"><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -142,7 +142,7 @@ describe('va-alert', () => {
   it('has the correct accessibility attributes when in an error state', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert status="error"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="error" uswds="false"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .alert');
@@ -196,7 +196,7 @@ describe('va-alert', () => {
   it('should set status to info if null', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert uswds="false"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .alert');
@@ -207,7 +207,7 @@ describe('va-alert', () => {
   it('should set status to info if it is an empty string', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert status=""><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="" uswds="false"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .alert');
@@ -218,7 +218,7 @@ describe('va-alert', () => {
   it('should set status to info if value not in pre-defined list', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert status="Fake"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="Fake" uswds="false"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .alert');
@@ -229,7 +229,7 @@ describe('va-alert', () => {
   it('should not overwrite status if valid', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert status="continue"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="continue" uswds="false"><h4 slot="headline" uswds="false">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .alert');
@@ -263,11 +263,11 @@ describe('va-alert', () => {
   it('uswds renders an empty div with a "polite" aria-live tag when not visible', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-alert uswds visible="false"></va-alert>');
+    await page.setContent('<va-alert visible="false"></va-alert>');
     const element = await page.find('va-alert');
 
     expect(element).toEqualHtml(`
-      <va-alert class="hydrated" visible="false" status="info" uswds="">
+      <va-alert class="hydrated" visible="false" status="info">
         <mock:shadow-root>
           <div aria-live="polite"></div>
         </mock:shadow-root>
@@ -278,7 +278,7 @@ describe('va-alert', () => {
   it('uswds passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-alert uswds><h3 slot="headline">Alert</h3>Alert content</va-alert>`,
+      `<va-alert><h3 slot="headline">Alert</h3>Alert content</va-alert>`,
     );
 
     await axeCheck(page);
@@ -286,7 +286,7 @@ describe('va-alert', () => {
 
   it('uswds only shows a close icon if the closeable prop is passed', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-alert uswds>Alert</va-alert>');
+    await page.setContent('<va-alert>Alert</va-alert>');
 
     const element = await page.find('va-alert');
 
@@ -303,7 +303,7 @@ describe('va-alert', () => {
   it('uswds fires a custom "close" event when the close button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds closeable="true">Content inside</va-alert>',
+      '<va-alert closeable="true">Content inside</va-alert>',
     );
 
     const closeSpy = await page.spyOnEvent('closeEvent');
@@ -317,7 +317,7 @@ describe('va-alert', () => {
   it('uswds fires an analytics event when a link is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds><h4 slot="headline">This is an alert</h4><a href="#">This is a link</a></va-alert>',
+      '<va-alert><h4 slot="headline">This is an alert</h4><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -341,7 +341,7 @@ describe('va-alert', () => {
   it('uswds uses a null headline in the analytics event detail when the heading is absent', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds><a href="#">This is a link</a></va-alert>',
+      '<va-alert><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -365,7 +365,7 @@ describe('va-alert', () => {
   it('uswds does not fire an analytics event when disableAnalytics is passed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds disable-analytics="true"><a href="#">This is a link</a></va-alert>',
+      '<va-alert disable-analytics="true"><a href="#">This is a link</a></va-alert>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -379,7 +379,7 @@ describe('va-alert', () => {
   it('uswds has the correct accessibility attributes when in an error state', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds status="error"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="error"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .usa-alert');
@@ -393,7 +393,7 @@ describe('va-alert', () => {
   it('uswds should set status to info if null', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .usa-alert');
@@ -404,7 +404,7 @@ describe('va-alert', () => {
   it('uswds should set status to info if it is an empty string', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds status=""><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status=""><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .usa-alert');
@@ -415,7 +415,7 @@ describe('va-alert', () => {
   it('uswds should set status to info if value not in pre-defined list', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds status="Fake"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="Fake"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .usa-alert');
@@ -426,7 +426,7 @@ describe('va-alert', () => {
   it('uswds should not overwrite status if valid', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-alert uswds status="continue"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
+      '<va-alert status="continue"><h4 slot="headline">This is an alert</h4><div>This is the alert content</div>',
     );
 
     const element = await page.find('va-alert >>> .usa-alert');
diff --git a/packages/web-components/src/components/va-alert/va-alert-slot.css b/packages/web-components/src/components/va-alert/va-alert-slot.css
index c7a4fbf14..af3eedaff 100644
--- a/packages/web-components/src/components/va-alert/va-alert-slot.css
+++ b/packages/web-components/src/components/va-alert/va-alert-slot.css
@@ -1,6 +1,6 @@
 
 /* .usa-alert__heading */
-:is(va-alert[uswds=''], va-alert[uswds='true']) > :is(h1, h2, h3, h4, h5, h6) {
+:is(va-alert:not([uswds='false'])) > :is(h1, h2, h3, h4, h5, h6) {
   font-size: 21.28px; /* 1.33rem */
   margin-top: 0;
   margin-bottom: 8px; /* 0.5rem */
diff --git a/packages/web-components/src/components/va-alert/va-alert.scss b/packages/web-components/src/components/va-alert/va-alert.scss
index 1def10a89..f52865cc0 100644
--- a/packages/web-components/src/components/va-alert/va-alert.scss
+++ b/packages/web-components/src/components/va-alert/va-alert.scss
@@ -10,7 +10,7 @@
 }
 
 .usa-alert__body::before,
-:host([uswds]:not([uswds='false'])) i {
+:host(:not([uswds='false'])) i {
   font-family: 'Font Awesome 5 Free';
   font-size: 26px;
   font-style: normal;
@@ -73,14 +73,14 @@
   /* fa-exclamation-circle */
 }
 
-:host([uswds]:not([uswds='false'])) .va-alert-close:hover {
+:host(:not([uswds='false'])) .va-alert-close:hover {
   color: var(--color-base);
 }
 
 @media screen and (min-width: 1024px) {
 
-  :host(:not([uswds='true'], [uswds='']))[full-width='true'] .va-alert-close,
-  :host(:not([uswds='true'], [uswds='']))[full-width=''] .va-alert-close {
+  :host([uswds='false'])[full-width='true'] .va-alert-close,
+  :host([uswds='false'])[full-width=''] .va-alert-close {
     position: relative;
   }
 }
@@ -119,17 +119,17 @@ i.fa-times-circle::before {
 @import '../../mixins/accessibility.css';
 @import '../../mixins/buttons.css';
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   background-color: var(--color-gray-lightest);
 }
 
-:host(:not([uswds='true'], [uswds=''])[background-only='true']),
-:host(:not([uswds='true'], [uswds=''])[background-only='']) {
+:host([uswds='false'][background-only='true']),
+:host([uswds='false'][background-only='']) {
   background-color: unset;
 }
 
-:host(:not([uswds='true'], [uswds=''])[full-width='true']),
-:host(:not([uswds='true'], [uswds=''])[full-width='']) {
+:host([uswds='false'][full-width='true']),
+:host([uswds='false'][full-width='']) {
   border-top-style: solid;
   border-top-width: 8px;
   display: flex;
@@ -137,32 +137,32 @@ i.fa-times-circle::before {
   justify-content: center;
 }
 
-:host(:not([uswds='true'], [uswds=''])[status='warning']) {
+:host([uswds='false'][status='warning']) {
   border-color: var(--color-gold);
 }
 
-:host(:not([uswds='true'], [uswds=''])[status='info']) {
+:host([uswds='false'][status='info']) {
   border-color: var(--color-primary-alt-dark);
 }
 
-:host(:not([uswds='true'], [uswds=''])[status='error']) {
+:host([uswds='false'][status='error']) {
   border-color: var(--color-secondary-dark);
 }
 
-:host(:not([uswds='true'], [uswds=''])[status='continue']),
-:host(:not([uswds='true'], [uswds=''])[status='success']) {
+:host([uswds='false'][status='continue']),
+:host([uswds='false'][status='success']) {
   border-color: var(--color-green);
 }
 
-:host(:not([uswds='true'], [uswds=''])[full-width='']) div.alert,
-:host(:not([uswds='true'], [uswds=''])[full-width='true']) div.alert,
-:host(:not([uswds='true'], [uswds=''])[full-width=''][data-role='region']) div.alert,
-:host(:not([uswds='true'], [uswds=''])[full-width='true'][data-role='region']) div.alert {
+:host([uswds='false'][full-width='']) div.alert,
+:host([uswds='false'][full-width='true']) div.alert,
+:host([uswds='false'][full-width=''][data-role='region']) div.alert,
+:host([uswds='false'][full-width='true'][data-role='region']) div.alert {
   border-left: none;
   max-width: 1000px;
 }
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   ::slotted([slot='headline']) {
     font-size: 2rem !important;
     line-height: 26px !important;
@@ -263,6 +263,6 @@ i.fa-times-circle::before {
   }
 }
 
-:host(:not([uswds='true'], [uswds=''])[closeable]:not([closeable='false'])) .alert {
+:host([uswds='false'][closeable]:not([closeable='false'])) .alert {
   padding-right: 5.7rem;
 }
\ No newline at end of file
diff --git a/packages/web-components/src/components/va-alert/va-alert.tsx b/packages/web-components/src/components/va-alert/va-alert.tsx
index e42773f45..80852c6a9 100644
--- a/packages/web-components/src/components/va-alert/va-alert.tsx
+++ b/packages/web-components/src/components/va-alert/va-alert.tsx
@@ -74,7 +74,7 @@ export class VaAlert {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Displays the slim variation. Available when USWDS is true.
@@ -160,6 +160,11 @@ export class VaAlert {
 
   componentDidLoad() {
     this.vaComponentDidLoad.emit();
+    // check if the element has a class named uswds-false added from parent
+    if (this.el.classList.contains('uswds-false')) {
+      // add attribute manually
+      this.el.setAttribute('uswds', 'false');
+    }
   }
 
   render() {
diff --git a/packages/web-components/src/components/va-banner/test/va-banner.e2e.ts b/packages/web-components/src/components/va-banner/test/va-banner.e2e.ts
index 667e53f51..3e6fa14f0 100644
--- a/packages/web-components/src/components/va-banner/test/va-banner.e2e.ts
+++ b/packages/web-components/src/components/va-banner/test/va-banner.e2e.ts
@@ -11,7 +11,7 @@ describe('va-banner', () => {
     expect(element).toEqualHtml(`
      <va-banner class="hydrated">
        <mock:shadow-root>
-         <va-alert class="hydrated" data-label="Info banner" data-role="region" full-width="" status="info">
+         <va-alert class="hydrated uswds-false" data-label="Info banner" data-role="region" full-width="" status="info" uswds="false">
            <h3 slot="headline"></h3>
            <slot></slot>
          </va-alert>
@@ -67,7 +67,7 @@ describe('va-banner', () => {
     );
     const element = await page.find('va-banner >>> va-alert');
     expect(element).toEqualHtml(`
-      <va-alert class="hydrated" data-label="Error banner" data-role="region" full-width="" status="error">
+      <va-alert class="hydrated uswds-false" data-label="Error banner" data-role="region" full-width="" status="error" uswds="false">
         <mock:shadow-root>
            <div aria-label="Error banner" aria-live="assertive" class="alert error" role="region">
            <i aria-hidden="true"></i>
diff --git a/packages/web-components/src/components/va-banner/va-banner.tsx b/packages/web-components/src/components/va-banner/va-banner.tsx
index e53ce1789..0f82bebf3 100644
--- a/packages/web-components/src/components/va-banner/va-banner.tsx
+++ b/packages/web-components/src/components/va-banner/va-banner.tsx
@@ -181,6 +181,8 @@ export class VaBanner {
           status={this.type}
           data-role="region"
           data-label={bannerAriaLabel}
+          uswds={false}
+          class="uswds-false"
         >
           <h3 slot="headline">{this.headline}</h3>
           <slot></slot>
diff --git a/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts b/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts
index 95444f36e..79c6a56b3 100644
--- a/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts
+++ b/packages/web-components/src/components/va-breadcrumbs/test/va-breadcrumbs.e2e.ts
@@ -4,11 +4,11 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-breadcrumbs', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-breadcrumbs></va-breadcrumbs>');
+    await page.setContent('<va-breadcrumbs uswds="false"></va-breadcrumbs>');
 
     const element = await page.find('va-breadcrumbs');
     expect(element).toEqualHtml(`
-      <va-breadcrumbs class="hydrated">
+      <va-breadcrumbs class="hydrated" uswds="false">
         <mock:shadow-root>
           <nav aria-label="Breadcrumb">
             <ul role="list">
@@ -23,7 +23,7 @@ describe('va-breadcrumbs', () => {
   it('renders slotted content (anchor tags)', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs>
+      <va-breadcrumbs uswds="false">
         <a href="#home">Home</a>
         <a href="#one">Level One</a>
         <a href="#two">Level Two</a>
@@ -32,7 +32,7 @@ describe('va-breadcrumbs', () => {
 
     const element = await page.find('va-breadcrumbs');
     expect(element).toEqualHtml(`
-      <va-breadcrumbs class="hydrated">
+      <va-breadcrumbs class="hydrated" uswds="false">
         <mock:shadow-root>
           <nav aria-label="Breadcrumb">
             <ul role="list">
@@ -56,7 +56,7 @@ describe('va-breadcrumbs', () => {
   it('renders slotted content (list items)', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs>
+      <va-breadcrumbs uswds="false">
         <li><a href="#home">Home</a></li>
         <li><a href="#one">Level One</a></li>
         <li><a href="#two">Level Two</a></li>
@@ -65,7 +65,7 @@ describe('va-breadcrumbs', () => {
 
     const element = await page.find('va-breadcrumbs');
     expect(element).toEqualHtml(`
-      <va-breadcrumbs class="hydrated">
+      <va-breadcrumbs class="hydrated" uswds="false">
         <mock:shadow-root>
           <nav aria-label="Breadcrumb">
             <ul role="list">
@@ -89,7 +89,7 @@ describe('va-breadcrumbs', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs>
+      <va-breadcrumbs uswds="false">
         <a href="#home">Home</a>
         <a href="#one">Level One</a>
         <a href="#two">Level Two</a>
@@ -102,7 +102,7 @@ describe('va-breadcrumbs', () => {
   it('fires an analytics event when an anchor link is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs>
+      <va-breadcrumbs uswds="false">
         <a href="#home">Home</a>
         <a href="#one">Level One</a>
         <a href="#two">Level Two</a>
@@ -129,7 +129,7 @@ describe('va-breadcrumbs', () => {
   it(`doesn't fire an analytics event with disable-analytics prop when an anchor link is clicked`, async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs disable-analytics>
+      <va-breadcrumbs disable-analytics uswds="false">
         <a href="#home">Home</a>
         <a href="#one">Level One</a>
         <a href="#two">Level Two</a>
@@ -147,7 +147,7 @@ describe('va-breadcrumbs', () => {
   it('updates first anchor link label to "VA.gov home"', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs>
+      <va-breadcrumbs uswds="false">
         <a href="#home">not the right label</a>
         <a href="#one">Level One</a>
         <a href="#two">Level Two</a>
@@ -180,11 +180,11 @@ describe('va-breadcrumbs', () => {
 
   it('uswds - renders', async () => {
     const page = await newE2EPage({
-      html: '<va-breadcrumbs class="hydrated" label="test" disable-analytics="false" breadcrumb-list=\'[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]\' uswds></va-breadcrumbs>',
+      html: '<va-breadcrumbs class="hydrated" label="test" disable-analytics="false" breadcrumb-list=\'[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]\'></va-breadcrumbs>',
     });
     const element = await page.find('va-breadcrumbs');
     expect(element).toEqualHtml(`
-      <va-breadcrumbs class="hydrated" disable-analytics="false" label="test" breadcrumb-list='[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]' uswds>
+      <va-breadcrumbs class="hydrated" disable-analytics="false" label="test" breadcrumb-list='[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]'>
         <mock:shadow-root>
           <nav aria-label="test" class="usa-breadcrumb">
             <ol class="usa-breadcrumb__list" role="list">
@@ -208,7 +208,7 @@ describe('va-breadcrumbs', () => {
   it("uswds - should render wrap labels when 'wrapping' is true", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs disable-analytics="false" breadcrumb-list=\'[{ "label": "This is a very long breadcrumb", "href": "#home" }, { "label": "Current", "href": "#current" }]\' uswds wrapping></va-breadcrumbs>
+      <va-breadcrumbs disable-analytics="false" breadcrumb-list=\'[{ "label": "This is a very long breadcrumb", "href": "#home" }, { "label": "Current", "href": "#current" }]\' wrapping></va-breadcrumbs>
     `);
     const element = await page.find('va-breadcrumbs');
     const indicator = element.shadowRoot.querySelector('.usa-breadcrumb');
@@ -218,7 +218,7 @@ describe('va-breadcrumbs', () => {
   it('uswds - passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs disable-analytics="false" breadcrumb-list=\'[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]\' uswds></va-breadcrumbs>
+      <va-breadcrumbs disable-analytics="false" breadcrumb-list=\'[{ "label": "Home", "href": "#home" }, { "label": "Current", "href": "#current" }]\'></va-breadcrumbs>
     `);
 
     await axeCheck(page);
@@ -227,7 +227,7 @@ describe('va-breadcrumbs', () => {
   it('uswds - fires an analytics event when an anchor link is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-breadcrumbs breadcrumb-list=\'[{ "label": "Level One", "href": "#one" }, { "label": "Current", "href": "#current" }]\' uswds></va-breadcrumbs>
+      <va-breadcrumbs breadcrumb-list=\'[{ "label": "Level One", "href": "#one" }, { "label": "Current", "href": "#current" }]\'></va-breadcrumbs>
     `);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -249,7 +249,7 @@ describe('va-breadcrumbs', () => {
   it(`uswds - doesn't fire an analytics event with disable-analytics prop when an anchor link is clicked`, async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-breadcrumbs breadcrumb-list=\'[{ "label": "Level One", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]\' uswds disable-analytics></va-breadcrumbs>
+    <va-breadcrumbs breadcrumb-list=\'[{ "label": "Level One", "href": "#one" }, { "label": "Level two", "href": "#two" }, { "label": "Current", "href": "#current" }]\' disable-analytics></va-breadcrumbs>
     `);
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -262,11 +262,11 @@ describe('va-breadcrumbs', () => {
 
   it('uswds - renders when some links are router links', async () => {
     const page = await newE2EPage({
-      html: '<va-breadcrumbs class="hydrated" label="test" disable-analytics="false" breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\' uswds></va-breadcrumbs>',
+      html: '<va-breadcrumbs class="hydrated" label="test" disable-analytics="false" breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\'></va-breadcrumbs>',
     });
     const element = await page.find('va-breadcrumbs');
     expect(element).toEqualHtml(`
-      <va-breadcrumbs class="hydrated" disable-analytics="false" label="test" breadcrumb-list='[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]' uswds>
+      <va-breadcrumbs class="hydrated" disable-analytics="false" label="test" breadcrumb-list='[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]'>
         <mock:shadow-root>
           <nav aria-label="test" class="usa-breadcrumb">
             <ol class="usa-breadcrumb__list" role="list">
@@ -295,7 +295,7 @@ describe('va-breadcrumbs', () => {
   it('uswds - fires a route-change event when an anchor link with isRouteLink is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-breadcrumbs breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\' uswds></va-breadcrumbs>
+    <va-breadcrumbs breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\'></va-breadcrumbs>
     `);
 
     const routeChangeSpy = await page.spyOnEvent('routeChange');
@@ -311,7 +311,7 @@ describe('va-breadcrumbs', () => {
   it('uswds - does not fire a route-change event when an anchor link without isRouteLink is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-breadcrumbs breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\' uswds></va-breadcrumbs>
+    <va-breadcrumbs breadcrumb-list=\'[{ "label": "One", "href": "/one" }, { "label": "Two", "href": "/two", "isRouterLink": "true" }, { "label": "Three", "href": "/three", "isRouterLink": "true" }]\'></va-breadcrumbs>
     `);
 
     const routeChangeSpy = await page.spyOnEvent('routeChange');
diff --git a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.scss b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.scss
index c15c514af..2f96c22f8 100644
--- a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.scss
+++ b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.scss
@@ -12,7 +12,7 @@
 }
 
 // Styles for V1 mode
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   nav {
     background: var(--color-white);
     color: var(--color-link-default);
@@ -33,7 +33,7 @@
 }
 
 // Styles for V3 mode
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   .usa-breadcrumb__link {
     color: var(--color-link-default);
   }
diff --git a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx
index a2da01432..e97854a41 100644
--- a/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx
+++ b/packages/web-components/src/components/va-breadcrumbs/va-breadcrumbs.tsx
@@ -31,7 +31,7 @@ export class VaBreadcrumbs {
   /**
      * Whether or not the component will use USWDS v3 styling.
      */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
   /**
    *  Whether or not the component will wrap the breadcrumbs. This prop is available when `uswds` is set to `true`.
    */
diff --git a/packages/web-components/src/components/va-button-pair/test/va-button-pair.e2e.ts b/packages/web-components/src/components/va-button-pair/test/va-button-pair.e2e.ts
index 1617ca6e9..e6a9fd11b 100644
--- a/packages/web-components/src/components/va-button-pair/test/va-button-pair.e2e.ts
+++ b/packages/web-components/src/components/va-button-pair/test/va-button-pair.e2e.ts
@@ -4,20 +4,20 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-button-pair', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair></va-button-pair>');
+    await page.setContent('<va-button-pair uswds="false"></va-button-pair>');
     const element = await page.find('va-button-pair');
     expect(element).toHaveClass('hydrated');
   });
 
   it('passes an axe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair continue></va-button-pair>');
+    await page.setContent('<va-button-pair continue uswds="false"></va-button-pair>');
     await axeCheck(page);
   });
 
   it('fires analytics event when primary button is clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm></va-button-pair>');
+    await page.setContent('<va-button-pair confirm uswds="false"></va-button-pair>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const primaryButton = await page.find('va-button-pair >>> va-button');
     await primaryButton.click();
@@ -33,7 +33,7 @@ describe('va-button-pair', () => {
 
   it('fires analytics event when secondary button is clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm></va-button-pair>');
+    await page.setContent('<va-button-pair confirm uswds="false"></va-button-pair>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const buttons = await page.findAll('va-button-pair >>> va-button');
     await buttons[1].click();
@@ -50,7 +50,7 @@ describe('va-button-pair', () => {
   it(`doesn't fire analytics event when disableAnalytics is true`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button-pair disable-analytics></va-button-pair>',
+      '<va-button-pair disable-analytics uswds="false"></va-button-pair>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const buttons = await page.findAll('va-button-pair >>> va-button');
@@ -60,7 +60,7 @@ describe('va-button-pair', () => {
 
   it('fires primaryClick event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm></va-button-pair>');
+    await page.setContent('<va-button-pair confirm uswds="false"></va-button-pair>');
     const primaryClickEvent = await page.spyOnEvent('primaryClick');
     const primaryButton = await page.find('va-button-pair >>> va-button');
     await primaryButton.click();
@@ -69,7 +69,7 @@ describe('va-button-pair', () => {
 
   it('fires secondaryClick event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm></va-button-pair>');
+    await page.setContent('<va-button-pair confirm uswds="false"></va-button-pair>');
     const secondaryClickEvent = await page.spyOnEvent('secondaryClick');
     const buttons = await page.findAll('va-button-pair >>> va-button');
     await buttons[1].click();
@@ -78,10 +78,10 @@ describe('va-button-pair', () => {
 
   it('uswds renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair uswds></va-button-pair>');
+    await page.setContent('<va-button-pair></va-button-pair>');
     const element = await page.find('va-button-pair');
     expect(element).toEqualHtml(`
-    <va-button-pair uswds="" class="hydrated">
+    <va-button-pair class="hydrated">
       <mock:shadow-root>
         <ul class="usa-button-group">
           <li class="usa-button-group__item">
@@ -98,13 +98,13 @@ describe('va-button-pair', () => {
 
   it('uswds passes an axe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair continue uswds></va-button-pair>');
+    await page.setContent('<va-button-pair continue></va-button-pair>');
     await axeCheck(page);
   });
 
   it('uswds fires analytics event when primary button is clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm uswds></va-button-pair>');
+    await page.setContent('<va-button-pair confirm></va-button-pair>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const primaryButton = await page.find('va-button-pair >>> va-button');
     await primaryButton.click();
@@ -120,7 +120,7 @@ describe('va-button-pair', () => {
 
   it('uswds fires analytics event when secondary button is clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm uswds></va-button-pair>');
+    await page.setContent('<va-button-pair confirm></va-button-pair>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const buttons = await page.findAll('va-button-pair >>> va-button');
     await buttons[1].click();
@@ -137,7 +137,7 @@ describe('va-button-pair', () => {
   it(`uswds doesn't fire analytics event when disableAnalytics is true`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button-pair disable-analytics uswds></va-button-pair>',
+      '<va-button-pair disable-analytics></va-button-pair>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const buttons = await page.findAll('va-button-pair >>> va-button');
@@ -147,7 +147,7 @@ describe('va-button-pair', () => {
 
   it('uswds fires primaryClick event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm uswds></va-button-pair>');
+    await page.setContent('<va-button-pair confirm></va-button-pair>');
     const primaryClickEvent = await page.spyOnEvent('primaryClick');
     const primaryButton = await page.find('va-button-pair >>> va-button');
     await primaryButton.click();
@@ -156,7 +156,7 @@ describe('va-button-pair', () => {
 
   it('uswds fires secondaryClick event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button-pair confirm uswds></va-button-pair>');
+    await page.setContent('<va-button-pair confirm></va-button-pair>');
     const secondaryClickEvent = await page.spyOnEvent('secondaryClick');
     const buttons = await page.findAll('va-button-pair >>> va-button');
     await buttons[1].click();
diff --git a/packages/web-components/src/components/va-button-pair/va-button-pair.scss b/packages/web-components/src/components/va-button-pair/va-button-pair.scss
index 3b5ff528e..daec8343a 100644
--- a/packages/web-components/src/components/va-button-pair/va-button-pair.scss
+++ b/packages/web-components/src/components/va-button-pair/va-button-pair.scss
@@ -9,12 +9,12 @@
   flex-direction: column;
 }
 
-:host([uswds]:not([uswds='false'])) va-button::part(button){
+:host(:not([uswds='false'])) va-button::part(button){
   margin-right: 0;
 }
 
 @media (max-width: 480px) {
-  :host([uswds]:not([uswds='false'])) va-button {
+  :host(:not([uswds='false'])) va-button {
     display: block;
   }
   .usa-button-group {
@@ -25,63 +25,63 @@
 
 /* Original Component Styles. */
 
-:host(:not([uswds="true"],[uswds=""])) va-button {
+:host([uswds='false']) va-button {
   flex: 1 1 auto;
 }
 
-:host(:not([uswds="true"],[uswds=""])) {
+:host([uswds='false']) {
   max-width: 560px;
 }
 
-:host(:not([uswds="true"],[uswds=""])) va-button::part(button) {
+:host([uswds='false']) va-button::part(button) {
   max-width: 280px;
   width: 100%;
 }
 
 @media (min-width: 481px) {
-  :host([continue]:not([continue='false']):not([uswds="true"],[uswds=""])) {
+  :host([continue]:not([continue='false'])[uswds='false']) {
     flex-direction: row;
   }
 
-  :host([continue]:not([continue='false']):not([uswds="true"],[uswds=""])) va-button + va-button::part(button) {
+  :host([continue]:not([continue='false'])[uswds='false']) va-button + va-button::part(button) {
     margin-left: 12px;
     margin-right: 0;
   }
 }
 
 @media (min-width: 481px) {
-  :host(:not([uswds="true"],[uswds=""])) {
+  :host([uswds='false']) {
     flex-direction: row;
     max-width: 420px;
   }
 
-  :host(:not([uswds="true"],[uswds=""])) va-button + va-button::part(button) {
+  :host([uswds='false']) va-button + va-button::part(button) {
     margin-left: 12px;
     margin-right: 0;
   }
 
-  :host(:not([uswds="true"],[uswds=""])) va-button::part(button) {
+  :host([uswds='false']) va-button::part(button) {
     max-width: 210px;
   }
 }
 
 @media (max-width: 481px) {
-  :host(:not([uswds="true"],[uswds=""])) {
+  :host([uswds='false']) {
     width: 100%;
   }
 
-  :host([continue]:not([continue='false']):not([uswds="true"],[uswds=""])) va-button::part(button) {
+  :host([continue]:not([continue='false'])[uswds='false']) va-button::part(button) {
     max-width: 280px;
   }
 }
 
 @media (max-width: 320px) {
-  :host(:not([uswds="true"],[uswds=""])) {
+  :host([uswds='false']) {
     margin: 0 auto;
     max-width: 280px;
   }
 
-  :host([continue]:not([continue='false']):not([uswds="true"],[uswds=""])) va-button::part(button) {
+  :host([continue]:not([continue='false'])[uswds='false']) va-button::part(button) {
     max-width: 280px;
   }
 }
diff --git a/packages/web-components/src/components/va-button-pair/va-button-pair.tsx b/packages/web-components/src/components/va-button-pair/va-button-pair.tsx
index 78e2d3529..a6e61220a 100644
--- a/packages/web-components/src/components/va-button-pair/va-button-pair.tsx
+++ b/packages/web-components/src/components/va-button-pair/va-button-pair.tsx
@@ -45,7 +45,7 @@ export class VaButtonPair {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Fires when the primary button is clicked.
@@ -134,7 +134,6 @@ export class VaButtonPair {
                   disable-analytics={disableAnalytics}
                   label={secondaryLabel}
                   onClick={handleSecondaryClick}
-                  uswds
                 />
               </li>
               <li class="usa-button-group__item">
@@ -144,7 +143,6 @@ export class VaButtonPair {
                   label={primaryLabel}
                   onClick={handlePrimaryClick}
                   submit={submit}
-                  uswds
                 />
               </li>
             </ul>
@@ -158,6 +156,8 @@ export class VaButtonPair {
               disable-analytics={disableAnalytics}
               label={secondaryLabel}
               onClick={handleSecondaryClick}
+              uswds={false}
+              class="uswds-false"
             />
             <va-button
               continue
@@ -165,6 +165,8 @@ export class VaButtonPair {
               label={primaryLabel}
               onClick={handlePrimaryClick}
               submit={submit}
+              uswds={false}
+              class="uswds-false"
             />
           </Host>
         );
@@ -183,7 +185,6 @@ export class VaButtonPair {
                 onClick={handlePrimaryClick}
                 text={update ? 'Update' : 'Yes'}
                 submit={submit}
-                uswds
               />
               </li>
               <li class="usa-button-group__item">
@@ -193,7 +194,6 @@ export class VaButtonPair {
                   onClick={handleSecondaryClick}
                   secondary
                   text={update ? 'Cancel' : 'No'}
-                  uswds
                 />
               </li>
             </ul>
@@ -208,6 +208,8 @@ export class VaButtonPair {
               onClick={handlePrimaryClick}
               text={update ? 'Update' : 'Yes'}
               submit={submit}
+              uswds={false}
+              class="uswds-false"
             />
             <va-button
               disable-analytics={disableAnalytics}
@@ -215,6 +217,8 @@ export class VaButtonPair {
               onClick={handleSecondaryClick}
               secondary
               text={update ? 'Cancel' : 'No'}
+              uswds={false}
+              class="uswds-false"
             />
           </Host>
         );
diff --git a/packages/web-components/src/components/va-button/test/va-button.e2e.ts b/packages/web-components/src/components/va-button/test/va-button.e2e.ts
index 7b1059adf..0b5c0c636 100644
--- a/packages/web-components/src/components/va-button/test/va-button.e2e.ts
+++ b/packages/web-components/src/components/va-button/test/va-button.e2e.ts
@@ -4,10 +4,10 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-button', () => {
   it('renders a button with text Edit', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit"></va-button>');
+    await page.setContent('<va-button text="Edit" uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" text="Edit">
+    <va-button class="hydrated" text="Edit" uswds="false">
       <mock:shadow-root>
         <button type="button" part="button">
           Edit
@@ -19,7 +19,7 @@ describe('va-button', () => {
 
   it('renders a secondary button variant', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" secondary></va-button>');
+    await page.setContent('<va-button text="Edit" secondary uswds="false"></va-button>');
     const button = await page.find('va-button >>> button');
     expect((await button.getComputedStyle()).backgroundColor).toEqual(
       'rgb(255, 255, 255)',
@@ -28,17 +28,17 @@ describe('va-button', () => {
 
   it('renders a big button variant', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" big></va-button>');
+    await page.setContent('<va-button text="Edit" big uswds="false"></va-button>');
     const button = await page.find('va-button >>> button');
     expect((await button.getComputedStyle()).borderRadius).toEqual('8px');
   });
 
   it('renders an icon before the button text when back is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button back></va-button>');
+    await page.setContent('<va-button back uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" back>
+    <va-button class="hydrated" back uswds="false">
       <mock:shadow-root>
         <button type="button" part="button">
           <i aria-hidden="true" class="fa fa-angles-left"></i>
@@ -51,10 +51,10 @@ describe('va-button', () => {
 
   it('renders an icon after the button text when continue is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button continue></va-button>');
+    await page.setContent('<va-button continue uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" continue>
+    <va-button class="hydrated" continue uswds="false">
       <mock:shadow-root>
         <button type="button" part="button">
           Continue
@@ -68,11 +68,11 @@ describe('va-button', () => {
   it('renders a button with an aria label of Edit John Smith', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button text="Edit" label="Edit John Smith"></va-button>',
+      '<va-button text="Edit" label="Edit John Smith" uswds="false"></va-button>',
     );
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" text="Edit" label="Edit John Smith">
+    <va-button class="hydrated" text="Edit" label="Edit John Smith" uswds="false">
       <mock:shadow-root>
         <button type="button" aria-label="Edit John Smith" part="button">
           Edit
@@ -84,10 +84,10 @@ describe('va-button', () => {
 
   it('renders a submit button', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" submit></va-button>');
+    await page.setContent('<va-button text="Edit" submit uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" text="Edit" submit>
+    <va-button class="hydrated" text="Edit" submit uswds="false">
       <mock:shadow-root>
         <button type="submit" part="button">
           Edit
@@ -99,10 +99,10 @@ describe('va-button', () => {
 
   it('renders a disabled button', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" disabled></va-button>');
+    await page.setContent('<va-button text="Edit" disabled uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" text="Edit" disabled>
+    <va-button class="hydrated" text="Edit" disabled uswds="false">
       <mock:shadow-root>
         <button aria-disabled="true" type="button" part="button">
           Edit
@@ -114,24 +114,24 @@ describe('va-button', () => {
 
   it('ignores text value and displays Continue when continue is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" continue></va-button>');
+    await page.setContent('<va-button text="Edit" continue uswds="false"></va-button>');
     const button = await page.find('va-button >>> button');
     expect(button.textContent).toEqual('Continue');
   });
 
   it('ignores text value and displays Back when back is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" back></va-button>');
+    await page.setContent('<va-button text="Edit" back uswds="false"></va-button>');
     const button = await page.find('va-button >>> button');
     expect(button.textContent).toEqual('Back');
   });
 
   it(`doesn't display icons if both continue and back are true`, async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button back continue></va-button>');
+    await page.setContent('<va-button back continue uswds="false"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" back continue>
+    <va-button class="hydrated" back continue uswds="false">
       <mock:shadow-root>
         <button type="button" part="button">
           Continue
@@ -143,13 +143,13 @@ describe('va-button', () => {
 
   it('passes an axe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit"></va-button>');
+    await page.setContent('<va-button text="Edit" uswds="false"></va-button>');
     await axeCheck(page);
   });
 
   it('fires analytics event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit"></va-button>');
+    await page.setContent('<va-button text="Edit" uswds="false"></va-button>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const button = await page.find('va-button >>> button');
     await button.click();
@@ -166,7 +166,7 @@ describe('va-button', () => {
   it(`doesn't fire analytics event when clicked and disableAnalytics is true`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button text="Edit" disable-analytics></va-button>',
+      '<va-button text="Edit" disable-analytics uswds="false"></va-button>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const button = await page.find('va-button >>> button');
@@ -176,7 +176,7 @@ describe('va-button', () => {
 
   it(`doesn't fire click event when disabled is true`, async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" disabled></va-button>');
+    await page.setContent('<va-button text="Edit" disabled uswds="false"></va-button>');
     const clickSpy = await page.spyOnEvent('click');
     const button = await page.find('va-button >>> button');
     await button.click();
@@ -186,7 +186,7 @@ describe('va-button', () => {
   it('has the correct aria-label when label is given', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button label="Edit dependent" text="Edit"></va-button>',
+      '<va-button label="Edit dependent" text="Edit" uswds="false"></va-button>',
     );
 
     const button = await page.find('va-button >>> button');
@@ -197,7 +197,7 @@ describe('va-button', () => {
 
   it('uswds v3 renders a button with text Edit', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" uswds></va-button>');
+    await page.setContent('<va-button text="Edit"></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
     <va-button class="hydrated" text="Edit" uswds="">
@@ -212,21 +212,21 @@ describe('va-button', () => {
 
   it('uswds v3 renders a secondary button variant (usa-button--outline)', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" secondary uswds></va-button>');
+    await page.setContent('<va-button text="Edit" secondary></va-button>');
     const button = await page.findAll("va-button >>> .usa-button--outline");
     expect(button.length).toBe(1);
   });
 
   it('uswds v3 renders a big button variant', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button text="Edit" big uswds></va-button>');
+    await page.setContent('<va-button text="Edit" big></va-button>');
     const button = await page.find('va-button >>> button');
     expect((await button.getComputedStyle()).padding).toEqual('16px 24px');
   });
 
   it('uswds v3 renders an icon before the button text when back is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button back uswds></va-button>');
+    await page.setContent('<va-button back></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
     <va-button back="" class="hydrated" uswds="">
@@ -242,10 +242,10 @@ describe('va-button', () => {
 
   it('uswds v3 renders an icon after the button text when continue is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button continue uswds></va-button>');
+    await page.setContent('<va-button continue></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button uswds="" continue class="hydrated">
+    <va-button continue class="hydrated" uswds="">
       <mock:shadow-root>
         <button class="usa-button" type="button" part="button">
           Continue
@@ -259,11 +259,11 @@ describe('va-button', () => {
   it('uswds v3 renders a button with an aria label of Edit John Smith', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button uswds text="Edit" label="Edit John Smith"></va-button>',
+      '<va-button text="Edit" label="Edit John Smith"></va-button>',
     );
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button class="hydrated" label="Edit John Smith" text="Edit" uswds="" >
+    <va-button class="hydrated" label="Edit John Smith" text="Edit" uswds="">
       <mock:shadow-root>
         <button aria-label="Edit John Smith" class="usa-button" part="button" type="button">
           Edit
@@ -275,10 +275,10 @@ describe('va-button', () => {
 
   it('uswds v3 renders a submit button', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit" submit></va-button>');
+    await page.setContent('<va-button text="Edit" submit></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button uswds="" class="hydrated" text="Edit" submit>
+    <va-button class="hydrated" text="Edit" submit uswds="">
       <mock:shadow-root>
         <button class="usa-button" type="submit" part="button">
           Edit
@@ -290,10 +290,10 @@ describe('va-button', () => {
 
   it('uswds v3 renders a disabled button', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit" disabled></va-button>');
+    await page.setContent('<va-button text="Edit" disabled></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button uswds="" class="hydrated" text="Edit" disabled>
+    <va-button class="hydrated" text="Edit" disabled uswds="">
       <mock:shadow-root>
         <button class="usa-button" aria-disabled="true" type="button" part="button">
           Edit
@@ -305,24 +305,24 @@ describe('va-button', () => {
 
   it('uswds v3 ignores text value and displays Continue when continue is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit" continue></va-button>');
+    await page.setContent('<va-button text="Edit" continue></va-button>');
     const button = await page.find('va-button >>> button');
     expect(button.textContent).toEqual('Continue');
   });
 
   it('uswds v3 ignores text value and displays Back when back is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit" back></va-button>');
+    await page.setContent('<va-button text="Edit" back></va-button>');
     const button = await page.find('va-button >>> button');
     expect(button.textContent).toEqual('Back');
   });
 
   it(`uswds v3 doesn't display icons if both continue and back are true`, async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds back continue></va-button>');
+    await page.setContent('<va-button back continue></va-button>');
     const element = await page.find('va-button');
     expect(element).toEqualHtml(`
-    <va-button uswds="" class="hydrated" back continue>
+    <va-button class="hydrated" back continue uswds="">
       <mock:shadow-root>
         <button class="usa-button usa-button--outline" type="button" part="button">
           Continue
@@ -334,13 +334,13 @@ describe('va-button', () => {
 
   it('uswds v3 passes an axe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit"></va-button>');
+    await page.setContent('<va-button text="Edit"></va-button>');
     await axeCheck(page);
   });
 
   it('uswds v3 fires analytics event when clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit"></va-button>');
+    await page.setContent('<va-button text="Edit"></va-button>');
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const button = await page.find('va-button >>> button');
     await button.click();
@@ -357,7 +357,7 @@ describe('va-button', () => {
   it(`uswds v3 doesn't fire analytics event when clicked and disableAnalytics is true`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button uswds text="Edit" disable-analytics></va-button>',
+      '<va-button text="Edit" disable-analytics></va-button>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const button = await page.find('va-button >>> button');
@@ -367,7 +367,7 @@ describe('va-button', () => {
 
   it(`uswds v3 doesn't fire click event when disabled is true`, async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-button uswds text="Edit" disabled></va-button>');
+    await page.setContent('<va-button text="Edit" disabled></va-button>');
     const clickSpy = await page.spyOnEvent('click');
     const button = await page.find('va-button >>> button');
     await button.click();
@@ -377,7 +377,7 @@ describe('va-button', () => {
   it('uswds v3 has the correct aria-label when label is given', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-button uswds label="Edit dependent" text="Edit"></va-button>',
+      '<va-button label="Edit dependent" text="Edit"></va-button>',
     );
 
     const button = await page.find('va-button >>> button');
diff --git a/packages/web-components/src/components/va-button/va-button.scss b/packages/web-components/src/components/va-button/va-button.scss
index cee2aed8e..a7935faeb 100644
--- a/packages/web-components/src/components/va-button/va-button.scss
+++ b/packages/web-components/src/components/va-button/va-button.scss
@@ -34,7 +34,7 @@
 
 @import '../../mixins/buttons.css';
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   button {
     align-items: center;
     background-color: var(--color-primary);
@@ -66,30 +66,30 @@
   }
 }
 
-:host(:not([uswds='true'], [uswds=''])[back]:not([back='false'])) button,
-:host(:not([uswds='true'], [uswds=''])[secondary]:not([secondary='false'])) button {
+:host([uswds='false'][back]:not([back='false'])) button,
+:host([uswds='false'][secondary]:not([secondary='false'])) button {
   background-color: var(--color-white);
   box-shadow: inset 0 0 0 2px var(--color-primary);
   color: var(--color-primary);
 }
 
-:host(:not([uswds='true'], [uswds=''])[back]:not([back='false'])) button:active,
-:host(:not([uswds='true'], [uswds=''])[back]:not([back='false'])) button:hover,
-:host(:not([uswds='true'], [uswds=''])[secondary]:not([secondary='false'])) button:active,
-:host(:not([uswds='true'], [uswds=''])[secondary]:not([secondary='false'])) button:hover {
+:host([uswds='false'][back]:not([back='false'])) button:active,
+:host([uswds='false'][back]:not([back='false'])) button:hover,
+:host([uswds='false'][secondary]:not([secondary='false'])) button:active,
+:host([uswds='false'][secondary]:not([secondary='false'])) button:hover {
   background-color: var(--color-gray-cool-light);
   box-shadow: inset 0 0 0 2px var(--color-primary-dark);
   color: var(--color-primary-dark);
 }
 
-:host(:not([uswds='true'], [uswds=''])[back]:not([back='false'])) button:focus,
-:host(:not([uswds='true'], [uswds=''])[secondary]:not([secondary='false'])) button:focus {
+:host([uswds='false'][back]:not([back='false'])) button:focus,
+:host([uswds='false'][secondary]:not([secondary='false'])) button:focus {
   background-color: var(--color-gray-cool-light);
   box-shadow: inset 0 0 0 2px var(--color-primary);
   color: var(--color-primary);
 }
 
-:host(:not([uswds='true'], [uswds=''])[big]:not([big='false'])) button {
+:host([uswds='false'][big]:not([big='false'])) button {
   border-radius: 8px;
   font-size: 2.4rem;
   padding: 1.5rem 3rem;
@@ -113,7 +113,7 @@ i.fa-angles-right::before {
   margin-left: 8px;
 }
 
-:host(:not([uswds='true'], [uswds=''])[disabled]:not([disabled='false'])) button {
+:host([uswds='false'][disabled]:not([disabled='false'])) button {
   background-color: var(--color-gray-lighter);
   box-shadow: none;
   color: var(--color-white);
diff --git a/packages/web-components/src/components/va-button/va-button.tsx b/packages/web-components/src/components/va-button/va-button.tsx
index e7d330184..3b81e4e3c 100644
--- a/packages/web-components/src/components/va-button/va-button.tsx
+++ b/packages/web-components/src/components/va-button/va-button.tsx
@@ -6,6 +6,7 @@ import {
   h,
   Listen,
   Prop,
+  Element
 } from '@stencil/core';
 import classnames from 'classnames';
 
@@ -22,6 +23,8 @@ import classnames from 'classnames';
   shadow: true,
 })
 export class VaButton {
+  @Element() el: HTMLElement;
+
   /**
    * If `true`, the button will use `Back` as its text and an icon to represent going back in form flows.
    */
@@ -75,7 +78,7 @@ export class VaButton {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop({ reflect: true }) uswds?: boolean = false;
+  @Prop({ reflect: true }) uswds?: boolean = true;
 
   /**
    * The event used to track usage of the component.
@@ -87,6 +90,14 @@ export class VaButton {
   })
   componentLibraryAnalytics: EventEmitter;
 
+  componentDidLoad() {
+    // check if the element has a class named uswds-false added from parent
+    if (this.el.classList.contains('uswds-false')) {
+      // add attribute manually
+      this.el.setAttribute('uswds', 'false');
+    }
+  }
+
   private handleClick = (): void => {
     if (!this.disableAnalytics) {
       const detail = {
@@ -124,6 +135,7 @@ export class VaButton {
     this.handleClick();
   }
 
+
   render() {
     const {
       back,
diff --git a/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts b/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts
index 55c348343..74a08f670 100644
--- a/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts
+++ b/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts
@@ -4,7 +4,7 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-checkbox-group', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group uswds="false"></va-checkbox-group>');
 
     const element = await page.find('va-checkbox-group');
     expect(element).toHaveClass('hydrated');
@@ -14,10 +14,10 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group>
-        <va-checkbox label="Option one" value="1"></va-checkbox>
-        <va-checkbox label="Option 2" value="2"></va-checkbox>
-        <va-checkbox label="Option 3" value="3"></va-checkbox>
+      <va-checkbox-group uswds="false">
+        <va-checkbox label="Option one" value="1" uswds="false"></va-checkbox>
+        <va-checkbox label="Option 2" value="2" uswds="false"></va-checkbox>
+        <va-checkbox label="Option 3" value="3" uswds="false"></va-checkbox>
       </va-checkbox-group>
     `,
     );
@@ -28,7 +28,7 @@ describe('va-checkbox-group', () => {
   it('renders an error message if passed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox-group error="This is an error"></va-checkbox-group>',
+      '<va-checkbox-group error="This is an error" uswds="false"></va-checkbox-group>',
     );
 
     const element = await page.find('va-checkbox-group >>> #error-message');
@@ -42,7 +42,7 @@ describe('va-checkbox-group', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group hint="This is hint text" />');
+    await page.setContent('<va-checkbox-group hint="This is hint text" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-checkbox-group >>> div.hint-text');
@@ -53,9 +53,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group error="There has been an error" label="This is a label">
-        <va-checkbox label="Option one" name="example" value="1"/>
-        <va-checkbox label="Option two" name="example" value="2"/>
+      <va-checkbox-group error="There has been an error" label="This is a label" uswds="false">
+        <va-checkbox label="Option one" name="example" value="1" uswds="false"/>
+        <va-checkbox label="Option two" name="example" value="2" uswds="false"/>
       </va-checkbox-group>
     `,
     );
@@ -65,7 +65,7 @@ describe('va-checkbox-group', () => {
 
   it('renders a required span based on prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group required uswds="false"></va-checkbox-group uswds="false">');
 
     const element = await page.find('va-checkbox-group >>> .required');
     expect(element).toEqualHtml(`
@@ -78,8 +78,8 @@ describe('va-checkbox-group', () => {
   it('fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-checkbox-group label="Regular label" enable-analytics>
-        <va-checkbox label="First option" value="one"></va-checkbox>
+      <va-checkbox-group label="Regular label" enable-analytics uswds="false">
+        <va-checkbox label="First option" value="one" uswds="false"></va-checkbox>
       </va-checkbox-group>
       `);
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -100,8 +100,8 @@ describe('va-checkbox-group', () => {
   it("doesn't fire an analytics event by default", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-checkbox-group label="Regular label">
-        <va-checkbox label="First option" value="one"></va-checkbox>
+      <va-checkbox-group label="Regular label" uswds="false">
+        <va-checkbox label="First option" value="one" uswds="false"></va-checkbox>
       </va-checkbox-group>
       `);
 
@@ -115,9 +115,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group>
-        <va-checkbox label="Option 1" value="1"></va-checkbox>
-        <va-checkbox label="Option 2" value="2"></va-checkbox>
+      <va-checkbox-group uswds="false">
+        <va-checkbox label="Option 1" value="1" uswds="false"></va-checkbox>
+        <va-checkbox label="Option 2" value="2" uswds="false"></va-checkbox>
       </va-checkbox-group>
     `,
     );
@@ -130,7 +130,7 @@ describe('va-checkbox-group', () => {
 
   it('renders H3 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group label="Testing H3" label-header-level="3" />');
+    await page.setContent('<va-checkbox-group label="Testing H3" label-header-level="3" uswds="false"/>');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -142,7 +142,7 @@ describe('va-checkbox-group', () => {
 
   it('renders H5 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group label="Testing H5" label-header-level="5" required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group label="Testing H5" label-header-level="5" required uswds="false"></va-checkbox-group>');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -157,7 +157,7 @@ describe('va-checkbox-group', () => {
 
   it('renders legend text and ignores adding a header if an invalid level is included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group label="Testing" label-header-level="7" required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group label="Testing" label-header-level="7" required uswds="false"></va-checkbox-group>');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -175,7 +175,7 @@ describe('va-checkbox-group', () => {
 
   it('uswds v3 renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group></va-checkbox-group>');
 
     const element = await page.find('va-checkbox-group');
     expect(element).toHaveClass('hydrated');
@@ -185,10 +185,10 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group uswds>
-        <va-checkbox uswds label="Option one" value="1"></va-checkbox>
-        <va-checkbox uswds label="Option 2" value="2"></va-checkbox>
-        <va-checkbox uswds label="Option 3" value="3" disabled></va-checkbox>
+      <va-checkbox-group >
+        <va-checkbox label="Option one" value="1"></va-checkbox>
+        <va-checkbox label="Option 2" value="2"></va-checkbox>
+        <va-checkbox label="Option 3" value="3" disabled></va-checkbox>
       </va-checkbox-group>
     `,
     );
@@ -199,7 +199,7 @@ describe('va-checkbox-group', () => {
   it('uswds v3 renders an error message if passed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox-group uswds error="This is an error"></va-checkbox-group>',
+      '<va-checkbox-group error="This is an error"></va-checkbox-group>',
     );
 
     const element = await page.find('va-checkbox-group >>> #checkbox-error-message');
@@ -215,7 +215,7 @@ describe('va-checkbox-group', () => {
 
   it('uswds v3 renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds hint="This is hint text" />');
+    await page.setContent('<va-checkbox-group hint="This is hint text" />');
 
     const hintTextElement = await page.find('va-checkbox-group >>> .usa-hint');
     expect(hintTextElement.innerText).toContain('This is hint text');
@@ -225,9 +225,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group uswds error="There has been an error" label="This is a label">
-        <va-checkbox uswds label="Option one" name="example" value="1"/>
-        <va-checkbox uswds label="Option two" name="example" value="2"/>
+      <va-checkbox-group error="There has been an error" label="This is a label">
+        <va-checkbox label="Option one" name="example" value="1"/>
+        <va-checkbox label="Option two" name="example" value="2"/>
       </va-checkbox-group>
     `,
     );
@@ -237,7 +237,7 @@ describe('va-checkbox-group', () => {
 
   it('uswds v3 renders a required span based on prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group required></va-checkbox-group>');
 
     const element = await page.find('va-checkbox-group >>> .usa-label--required');
     expect(element).toEqualHtml(`
@@ -250,8 +250,8 @@ describe('va-checkbox-group', () => {
   it('uswds v3 fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-checkbox-group uswds label="Regular label" enable-analytics>
-        <va-checkbox uswds label="First option" value="one"></va-checkbox>
+      <va-checkbox-group label="Regular label" enable-analytics>
+        <va-checkbox label="First option" value="one"></va-checkbox>
       </va-checkbox-group>
       `);
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -272,8 +272,8 @@ describe('va-checkbox-group', () => {
   it("uswds v3 doesn't fire an analytics event by default", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-checkbox-group uswds label="Regular label">
-        <va-checkbox uswds label="First option" value="one"></va-checkbox>
+      <va-checkbox-group label="Regular label">
+        <va-checkbox label="First option" value="one"></va-checkbox>
       </va-checkbox-group>
       `);
 
@@ -288,8 +288,8 @@ describe('va-checkbox-group', () => {
     await page.setContent(
       `
       <va-checkbox-group uswds>
-        <va-checkbox uswds label="Option 1" value="1"></va-checkbox>
-        <va-checkbox uswds label="Option 2" value="2"></va-checkbox>
+        <va-checkbox label="Option 1" value="1"></va-checkbox>
+        <va-checkbox label="Option 2" value="2"></va-checkbox>
       </va-checkbox-group>
     `,
     );
@@ -302,7 +302,7 @@ describe('va-checkbox-group', () => {
 
   it('uswds v3 renders H3 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds label="Testing H3" label-header-level="3" />');
+    await page.setContent('<va-checkbox-group label="Testing H3" label-header-level="3" />');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -314,7 +314,7 @@ describe('va-checkbox-group', () => {
 
   it('renders H5 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds label="Testing H5" label-header-level="5" required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group label="Testing H5" label-header-level="5" required></va-checkbox-group>');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -329,7 +329,7 @@ describe('va-checkbox-group', () => {
 
   it('renders legend text and ignores adding a header if an invalid level is included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox-group uswds label="Testing" label-header-level="7" required></va-checkbox-group>');
+    await page.setContent('<va-checkbox-group label="Testing" label-header-level="7" required></va-checkbox-group>');
 
     const legend = await page.find('va-checkbox-group >>> legend');
     expect(legend).toEqualHtml(`
@@ -346,9 +346,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group label="This is a label" uswds use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" uswds>
-        <va-checkbox uswds label="Option 1" value="1"></va-checkbox>
-        <va-checkbox uswds label="Option 2" value="2"></va-checkbox>
+      <va-checkbox-group label="This is a label" uswds use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
+        <va-checkbox label="Option 1" value="1"></va-checkbox>
+        <va-checkbox label="Option 2" value="2"></va-checkbox>
       </va-checkbox-group>
     `,);
 
@@ -368,9 +368,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" uswds>
-        <va-checkbox uswds label="Option 1" value="1"></va-checkbox>
-        <va-checkbox uswds label="Option 2" value="2"></va-checkbox>
+      <va-checkbox-group label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
+        <va-checkbox label="Option 1" value="1"></va-checkbox>
+        <va-checkbox label="Option 2" value="2"></va-checkbox>
       </va-checkbox-group>
     `,);
 
@@ -382,9 +382,9 @@ describe('va-checkbox-group', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-checkbox-group label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" uswds>
-        <va-checkbox uswds label="Option 1" value="1"></va-checkbox>
-        <va-checkbox uswds label="Option 2" value="2"></va-checkbox>
+      <va-checkbox-group label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" uswds>
+        <va-checkbox label="Option 1" value="1"></va-checkbox>
+        <va-checkbox label="Option 2" value="2"></va-checkbox>
       </va-checkbox-group>
     `,);
     await axeCheck(page);
diff --git a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss
index f33aa7311..9f6b483f1 100644
--- a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss
+++ b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss
@@ -17,7 +17,7 @@
   padding: 0;
 }
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   margin-top: 24px;
 }
 
@@ -28,7 +28,7 @@
 @import '../../mixins/hint-text.css';
 @import '../../mixins/headers.css';
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   #error-message {
     font-size: 1.6rem;
     line-height: 2.4rem;
diff --git a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx
index 9ff1c9793..070ff0b4d 100644
--- a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx
+++ b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx
@@ -66,7 +66,7 @@ export class VaCheckboxGroup {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Insert a header with defined level inside the label (legend)
diff --git a/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts b/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts
index d2bb79f09..914bb61ac 100644
--- a/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts
+++ b/packages/web-components/src/components/va-checkbox/test/va-checkbox.e2e.ts
@@ -4,7 +4,7 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-checkbox', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox></va-checkbox>');
+    await page.setContent('<va-checkbox uswds="false"></va-checkbox>');
 
     const element = await page.find('va-checkbox');
     expect(element).toHaveClass('hydrated');
@@ -12,7 +12,7 @@ describe('va-checkbox', () => {
 
   it('renders with aria-invalid set to false by default', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox></va-checkbox>');
+    await page.setContent('<va-checkbox uswds="false"></va-checkbox>');
 
     const input = await page.find('va-checkbox >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('false');
@@ -20,7 +20,7 @@ describe('va-checkbox', () => {
 
   it('renders a label', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox label="Cool label, right?" />');
+    await page.setContent('<va-checkbox label="Cool label, right?" uswds="false"/>');
     const element = await page.find('va-checkbox >>> label');
     expect(element).not.toBeNull();
   });
@@ -28,7 +28,7 @@ describe('va-checkbox', () => {
   it('renders an error message', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox error="Something went horribly wrong" />',
+      '<va-checkbox error="Something went horribly wrong" uswds="false"/>',
     );
     const element = await page.find('va-checkbox >>> #checkbox-error-message');
     const input = await page.find('va-checkbox >>> input');
@@ -40,7 +40,7 @@ describe('va-checkbox', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox hint="This is hint text" />');
+    await page.setContent('<va-checkbox hint="This is hint text" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-checkbox >>> span.hint-text');
@@ -49,7 +49,7 @@ describe('va-checkbox', () => {
 
   it('renders a required span', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox label="I am Checkbox" required/>');
+    await page.setContent('<va-checkbox label="I am Checkbox" required uswds="false"/>');
     const element = await page.find('va-checkbox >>> .required');
     expect(element.textContent).toContain('required');
   });
@@ -57,7 +57,7 @@ describe('va-checkbox', () => {
   it('renders a description', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox><p slot="description">This is a description!</p></va-checkbox',
+      '<va-checkbox uswds="false"><p slot="description">This is a description!</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -71,7 +71,7 @@ describe('va-checkbox', () => {
   it.skip('does not render unknown content', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox><p slot="nope">Should not show up</p><p>Nor should unnamed slotted content</p></va-checkbox',
+      '<va-checkbox uswds="false"><p slot="nope">Should not show up</p><p>Nor should unnamed slotted content</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
     expect(element).toEqualText('');
@@ -80,7 +80,7 @@ describe('va-checkbox', () => {
   it('should prefer rendering the description prop over the slotted element', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox description="Description prop"><p slot="description">Slotted description</p></va-checkbox',
+      '<va-checkbox description="Description prop" uswds="false"><p slot="description">Slotted description</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -93,7 +93,7 @@ describe('va-checkbox', () => {
 
   it('adds new aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox error="This is a mistake" message-aria-describedby="This is a message"/>');
+    await page.setContent('<va-checkbox error="This is a mistake" message-aria-describedby="This is a message" uswds="false"/>');
 
     // Render the error message text
     const inputEl = await page.find('va-checkbox >>> input');
@@ -102,7 +102,7 @@ describe('va-checkbox', () => {
 
   it('adds aria-describedby input-message id', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox message-aria-describedby="This is a message" />');
+    await page.setContent('<va-checkbox message-aria-describedby="This is a message" uswds="false"/>');
 
     // Render the error message text
     const inputEl = await page.find('va-checkbox >>> input');
@@ -112,7 +112,7 @@ describe('va-checkbox', () => {
   it('adds aria-describedby input-message, checkbox-error-message and description ids', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-checkbox error="Something went horribly wrong" message-aria-describedby="This is a message">
+      `<va-checkbox error="Something went horribly wrong" message-aria-describedby="This is a message" uswds="false">
          <p slot="description">Slotted description</p>
       </va-checkbox>`,
     );
@@ -126,7 +126,7 @@ describe('va-checkbox', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-checkbox required label="This is a test" error="With an error message"/>',
+      '<va-checkbox required label="This is a test" error="With an error message" uswds="false"/>',
     );
 
     await axeCheck(page);
@@ -135,7 +135,7 @@ describe('va-checkbox', () => {
   it('fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox label="Just another checkbox here" enable-analytics required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" enable-analytics required description="Description content" uswds="false"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -156,7 +156,7 @@ describe('va-checkbox', () => {
   it('fires an analytics event with description slotted content', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-checkbox label="Just another checkbox here" enable-analytics>
+      `<va-checkbox label="Just another checkbox here" enable-analytics uswds="false">
         <div slot="description">Description content in a slot.<p>Testing nested nodes.</p></div>
         <p slot="description">And multiple slots.</p>
        </va-checkbox`,
@@ -182,7 +182,7 @@ describe('va-checkbox', () => {
   it("doesn't fire an analytics event when enableAnalytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content" uswds="false"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -194,7 +194,7 @@ describe('va-checkbox', () => {
   it('emits the vaChange event', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content" uswds="false"/>',
     );
     const changeSpy = await page.spyOnEvent('vaChange');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -206,7 +206,7 @@ describe('va-checkbox', () => {
   it('emits blur event', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content" uswds="false"/>',
     );
     const blurSpy = await page.spyOnEvent('blur');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -219,7 +219,7 @@ describe('va-checkbox', () => {
   it('updates the checked prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox label="Just another checkbox here" checked/>',
+      '<va-checkbox label="Just another checkbox here" checked uswds="false"/>',
     );
     const inputEl = await page.find('va-checkbox >>> input');
     expect(await inputEl.getProperty('checked')).toBeTruthy();
@@ -234,7 +234,7 @@ describe('va-checkbox', () => {
   // Begin USWDS v3 variation tests
   it('uswds v3 variation renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds></va-checkbox>');
+    await page.setContent('<va-checkbox></va-checkbox>');
 
     const element = await page.find('va-checkbox');
     expect(element).toHaveClass('hydrated');
@@ -243,7 +243,7 @@ describe('va-checkbox', () => {
   it('uswds v3 displays checkbox description text', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Example label" checkbox-description="Example checkbox description" />',
+      '<va-checkbox label="Example label" checkbox-description="Example checkbox description" />',
     );
 
     const hint = await page.find('va-checkbox >>> .usa-checkbox__label-description');
@@ -253,7 +253,7 @@ describe('va-checkbox', () => {
   it('uswds v3 has tile class added', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds tile label="Example label" />',
+      '<va-checkbox tile label="Example label" />',
     );
 
     const input = await page.find('va-checkbox >>> .usa-checkbox__input');
@@ -262,7 +262,7 @@ describe('va-checkbox', () => {
 
   it('uswds v3 renders with aria-invalid set to false by default', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds></va-checkbox>');
+    await page.setContent('<va-checkbox></va-checkbox>');
 
     const input = await page.find('va-checkbox >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('false');
@@ -270,7 +270,7 @@ describe('va-checkbox', () => {
 
   it('uswds v3 renders a label', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds label="Cool label, right?" />');
+    await page.setContent('<va-checkbox label="Cool label, right?" />');
     const element = await page.find('va-checkbox >>> label');
     expect(element).not.toBeNull();
   });
@@ -278,7 +278,7 @@ describe('va-checkbox', () => {
   it('uswds v3 renders an error message', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds error="Something went horribly wrong" />',
+      '<va-checkbox error="Something went horribly wrong" />',
     );
     const element = await page.find('va-checkbox >>> #checkbox-error-message');
     const input = await page.find('va-checkbox >>> input');
@@ -289,7 +289,7 @@ describe('va-checkbox', () => {
 
   it('uswds v3 renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds hint="This is hint text" />');
+    await page.setContent('<va-checkbox hint="This is hint text" />');
 
     const hintTextElement = await page.find('va-checkbox >>> .usa-hint');
     expect(hintTextElement.innerText).toContain('This is hint text');
@@ -297,7 +297,7 @@ describe('va-checkbox', () => {
 
   it('uswds v3 renders a required span', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds label="I am Checkbox" required/>');
+    await page.setContent('<va-checkbox label="I am Checkbox" required/>');
     const element = await page.find('va-checkbox >>> .usa-label--required');
     expect(element.textContent).toContain('required');
   });
@@ -305,7 +305,7 @@ describe('va-checkbox', () => {
   it('uswds v3 renders a description slot', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds><p slot="description">This is a description!</p></va-checkbox',
+      '<va-checkbox><p slot="description">This is a description!</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -316,7 +316,7 @@ describe('va-checkbox', () => {
   it('uswds v3 should prefer rendering the description prop over the slotted element', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds description="Description prop"><p slot="description">Slotted description</p></va-checkbox',
+      '<va-checkbox description="Description prop"><p slot="description">Slotted description</p></va-checkbox',
     );
     const element = await page.find('va-checkbox');
     const inputEl = await page.find('va-checkbox >>> input');
@@ -329,7 +329,7 @@ describe('va-checkbox', () => {
 
   it('uswds v3 adds new aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-checkbox uswds error="This is a mistake" />');
+    await page.setContent('<va-checkbox error="This is a mistake" />');
 
     const inputEl = await page.find('va-checkbox >>> input');
     expect(inputEl.getAttribute('aria-describedby')).toContain('checkbox-error-message');
@@ -339,7 +339,7 @@ describe('va-checkbox', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-checkbox uswds required label="This is a test" error="With an error message"/>',
+      '<va-checkbox required label="This is a test" error="With an error message"/>',
     );
 
     await axeCheck(page);
@@ -348,7 +348,7 @@ describe('va-checkbox', () => {
   it('uswds v3 adds aria-describedby input-message, checkbox-error-message and description ids', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-checkbox uswds error="Something went horribly wrong" message-aria-describedby="This is a message">
+      `<va-checkbox error="Something went horribly wrong" message-aria-describedby="This is a message">
          <p slot="description">Slotted description</p>
       </va-checkbox>`,
     );
@@ -361,7 +361,7 @@ describe('va-checkbox', () => {
   it('uswds v3 fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Just another checkbox here" enable-analytics required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" enable-analytics required description="Description content"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const checkboxEl = await page.find('va-checkbox >>> .usa-checkbox__label');
@@ -382,7 +382,7 @@ describe('va-checkbox', () => {
   it('uswds v3 fires an analytics event with description slotted content', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-checkbox uswds label="Just another checkbox here" enable-analytics>
+      `<va-checkbox label="Just another checkbox here" enable-analytics>
         <div slot="description">Description content in a slot.<p>Testing nested nodes.</p></div>
         <p slot="description">And multiple slots.</p>
        </va-checkbox`,
@@ -407,7 +407,7 @@ describe('va-checkbox', () => {
   it("uswds v3 doesn't fire an analytics event when enableAnalytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const checkboxEl = await page.find('va-checkbox >>> .usa-checkbox__label');
@@ -419,7 +419,7 @@ describe('va-checkbox', () => {
   it('uswds v3 emits the vaChange event', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
     );
     const changeSpy = await page.spyOnEvent('vaChange');
     const checkboxEl = await page.find('va-checkbox >>> .usa-checkbox__label');
@@ -431,7 +431,7 @@ describe('va-checkbox', () => {
   it('uswds v3 emits blur event', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Just another checkbox here" required description="Description content"/>',
+      '<va-checkbox label="Just another checkbox here" required description="Description content"/>',
     );
     const blurSpy = await page.spyOnEvent('blur');
     const checkboxEl = await page.find('va-checkbox >>> .usa-checkbox__label');
@@ -444,7 +444,7 @@ describe('va-checkbox', () => {
   it('uswds v3 updates the checked prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-checkbox uswds label="Just another checkbox here" checked />',
+      '<va-checkbox label="Just another checkbox here" checked />',
     );
     const checkboxEl = await page.find('va-checkbox >>> input');
     expect(await checkboxEl.getProperty('checked')).toBeTruthy();
diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.scss b/packages/web-components/src/components/va-checkbox/va-checkbox.scss
index b026d0caa..8355b7fd3 100644
--- a/packages/web-components/src/components/va-checkbox/va-checkbox.scss
+++ b/packages/web-components/src/components/va-checkbox/va-checkbox.scss
@@ -31,7 +31,7 @@
 @import '../../mixins/form-field-error.css';
 @import '../../mixins/hint-text.css';
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   --visible-checkbox-size: 2rem;
   --visible-checkbox-top-margin: 0.14rem;
 
@@ -45,11 +45,11 @@
   }
 }
 
-:host([error]:not([error='']):not([uswds='true'], [uswds=''])) input + label {
+:host([error][uswds='false']:not([error=''])) input + label {
   margin-top: 1.2rem;
 }
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   input {
     margin: 0;
     padding: 0;
@@ -111,14 +111,14 @@
   }
 }
 
-:host(:not([uswds='true'], [uswds=''])[tile='true']) label {
+:host([uswds='false'][tile='true']) label {
   padding: 12px 16px 12px 12px;
   border: 2px solid var(--color-gray-light);
   border-radius: 0.25em;
   width: 320px;
 }
 
-:host(:not([uswds='true'], [uswds=''])[tile='true']) input:checked + label {
+:host([uswds='false'][tile='true']) input:checked + label {
   background-color: rgba(0, 94, 162, 0.1);
   border-color: rgb(0, 94, 162);
 }
diff --git a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx b/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
index 6a0282766..5bc6421db 100644
--- a/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
+++ b/packages/web-components/src/components/va-checkbox/va-checkbox.tsx
@@ -89,7 +89,7 @@ export class VaCheckbox {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop({ reflect: true }) uswds?: boolean = false;
+  @Prop({ reflect: true }) uswds?: boolean = true;
 
   /**
    * Description of the option displayed below the checkbox label. Available when uswds is true.
@@ -169,6 +169,14 @@ export class VaCheckbox {
     i18next.off('languageChanged');
   }
 
+  componentDidLoad() {
+    // check if the element has a class named uswds-false added from parent
+    if (this.el.classList.contains('uswds-false')) {
+      // add attribute manually
+      this.el.setAttribute('uswds', 'false');
+    }
+  }
+
   render() {
     const {
       error,
diff --git a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
index 4a94cb045..398d9b2f6 100644
--- a/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
+++ b/packages/web-components/src/components/va-crisis-line-modal/va-crisis-line-modal.tsx
@@ -88,7 +88,6 @@ export class VACrisisLineModal {
           onCloseEvent={() => this.setNotVisible()}
           visible={this.isOpen}
           large={true}
-          uswds={true}
         >
           <p>
             If you are a Veteran in crisis or concerned about one, connect
diff --git a/packages/web-components/src/components/va-date/va-date.css b/packages/web-components/src/components/va-date/va-date.css
index fe7519abf..804c8f5d3 100644
--- a/packages/web-components/src/components/va-date/va-date.css
+++ b/packages/web-components/src/components/va-date/va-date.css
@@ -34,8 +34,8 @@ span.required {
   color: var(--color-secondary-dark);
 }
 
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) va-select::part(select),
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) va-text-input::part(input) {
+:host([error]:not([error=''])[uswds='false']) va-select::part(select),
+:host([error]:not([error=''])[uswds='false']) va-text-input::part(input) {
   border: 4px solid var(--color-secondary-dark);
 }
 
diff --git a/packages/web-components/src/components/va-date/va-date.tsx b/packages/web-components/src/components/va-date/va-date.tsx
index fa6926599..deba0df12 100644
--- a/packages/web-components/src/components/va-date/va-date.tsx
+++ b/packages/web-components/src/components/va-date/va-date.tsx
@@ -122,6 +122,12 @@ export class VaDate {
   })
   componentLibraryAnalytics: EventEmitter;
 
+  componentDidLoad() {
+    // add this attr so that error state css selectors will target inputs
+    // without causing conflict in memorable-date
+    this.el.setAttribute('uswds', 'false');
+  }
+
   /**
    * Set the value prop as an ISO-8601 date using provided arguments.
    * Strips trailing hyphens and sets date to be null if the
@@ -259,8 +265,9 @@ export class VaDate {
               onVaSelect={handleDateChange}
               onBlur={this.handleMonthBlur}
               invalid={this.invalidMonth}
-              class="select-month"
+              class="select-month uswds-false"
               aria-label="Please enter two digits for the month"
+              uswds={false}
             >
               <option value=""></option>
               {months &&
@@ -280,8 +287,9 @@ export class VaDate {
                 onVaSelect={handleDateChange}
                 onBlur={this.handleDayBlur}
                 invalid={this.invalidDay}
-                class="select-day"
+                class="select-day uswds-false"
                 aria-label="Please enter two digits for the day"
+                uswds={false}
               >
                 <option value=""></option>
                 {daysForSelectedMonth &&
@@ -303,10 +311,11 @@ export class VaDate {
               invalid={this.invalidYear}
               onInput={handleDateChange}
               onBlur={this.handleYearBlur}
-              class="input-year"
+              class="input-year uswds-false"
               inputmode="numeric"
               type="text"
               aria-label="Please enter four digits for the year"
+              uswds={false}
             />
           </div>
         </fieldset>
diff --git a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
index 882feb4c7..a542e3bc7 100644
--- a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
+++ b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
@@ -16,7 +16,7 @@ describe('va-file-input', () => {
           <label for="fileInputButton">This is the file upload label</label>
           <slot></slot>
           <span id="error-message" role="alert"></span>
-          <va-button id="fileInputButton" aria-label="This is the file upload label" secondary="" class="hydrated"></va-button>
+          <va-button id="fileInputButton" aria-label="This is the file upload label" secondary="" class="hydrated uswds-false" uswds="false"></va-button>
           <input type="file" id="fileInputField" hidden>
         </mock:shadow-root>
       </va-text-input>
diff --git a/packages/web-components/src/components/va-file-input/va-file-input.tsx b/packages/web-components/src/components/va-file-input/va-file-input.tsx
index cd18ecabc..7ff8af6a7 100644
--- a/packages/web-components/src/components/va-file-input/va-file-input.tsx
+++ b/packages/web-components/src/components/va-file-input/va-file-input.tsx
@@ -221,6 +221,8 @@ export class VaFileInput {
             secondary
             text={text}
             aria-describedby={error ? 'error-message' : undefined}
+            class="uswds-false"
+            uswds={false}
           />
           <input
             id="fileInputField"
diff --git a/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts b/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
index 185cb7404..0d1913b26 100644
--- a/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
+++ b/packages/web-components/src/components/va-memorable-date/test/va-memorable-date.e2e.ts
@@ -4,12 +4,12 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-memorable-date', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date></va-memorable-date>');
+    await page.setContent('<va-memorable-date uswds="false"></va-memorable-date>');
 
     const element = await page.find('va-memorable-date');
     expect(element).toHaveClass('hydrated');
     expect(element).toEqualHtml(`
-      <va-memorable-date class='hydrated'>
+      <va-memorable-date class='hydrated' uswds="false">
       <mock:shadow-root>
         <fieldset>
           <legend>
@@ -18,9 +18,9 @@ describe('va-memorable-date', () => {
           <span id="error-message" role="alert"></span>
           <slot></slot>
           <div class='date-container'>
-            <va-text-input aria-describedby='dateHint' class='hydrated input-month memorable-date-input'></va-text-input>
-            <va-text-input aria-describedby='dateHint' class='hydrated input-day memorable-date-input'></va-text-input>
-            <va-text-input aria-describedby='dateHint' class='hydrated input-year memorable-date-input' value=''></va-text-input>
+            <va-text-input aria-describedby='dateHint' class='hydrated input-month memorable-date-input uswds-false' uswds="false"></va-text-input>
+            <va-text-input aria-describedby='dateHint' class='hydrated input-day memorable-date-input uswds-false' uswds="false"></va-text-input>
+            <va-text-input aria-describedby='dateHint' class='hydrated input-year memorable-date-input uswds-false' uswds="false" value=''></va-text-input>
           </div>
         </fieldset>
       </mock:shadow-root>
@@ -32,7 +32,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-memorable-date day="5" label="Test Label" month="3" name="test" year="2000"></va-memorable-date>
+      <va-memorable-date day="5" label="Test Label" month="3" name="test" year="2000" uswds="false"></va-memorable-date>
       `,
     );
     await axeCheck(page);
@@ -40,12 +40,12 @@ describe('va-memorable-date', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date label="Label" hint="hint text" required></va-memorable-date>');
+    await page.setContent('<va-memorable-date label="Label" hint="hint text" required uswds="false"></va-memorable-date>');
 
     const element = await page.find('va-memorable-date');
     expect(element).toHaveClass('hydrated');
     expect(element).toEqualHtml(`
-      <va-memorable-date class='hydrated' label='Label' hint='hint text' required=''>
+      <va-memorable-date class='hydrated' label='Label' hint='hint text' required='' uswds="false">
       <mock:shadow-root>
         <fieldset>
           <legend>
@@ -57,9 +57,9 @@ describe('va-memorable-date', () => {
           <span id="error-message" role="alert"></span>
           <slot></slot>
           <div class='date-container'>
-            <va-text-input aria-describedby='dateHint hint' class='hydrated input-month memorable-date-input'></va-text-input>
-            <va-text-input aria-describedby='dateHint hint' class='hydrated input-day memorable-date-input'></va-text-input>
-            <va-text-input aria-describedby='dateHint hint' class='hydrated input-year memorable-date-input' value=''></va-text-input>
+            <va-text-input aria-describedby='dateHint hint' class='hydrated input-month memorable-date-input uswds-false' uswds="false"></va-text-input>
+            <va-text-input aria-describedby='dateHint hint' class='hydrated input-day memorable-date-input uswds-false' uswds="false"></va-text-input>
+            <va-text-input aria-describedby='dateHint hint' class='hydrated input-year memorable-date-input uswds-false' uswds="false" value=''></va-text-input>
           </div>
         </fieldset>
       </mock:shadow-root>
@@ -69,7 +69,7 @@ describe('va-memorable-date', () => {
 
   it('renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date error="This is a mistake" />');
+    await page.setContent('<va-memorable-date error="This is a mistake" uswds="false"/>');
 
     // Render the error message text
     const error = await page.find('va-memorable-date >>> span#error-message');
@@ -81,7 +81,7 @@ describe('va-memorable-date', () => {
 
     // await page.addScriptTag({ content: ``);
     await page.setContent(
-      '<va-memorable-date value="1999-05-03" name="test" error="custom error" />',
+      '<va-memorable-date value="1999-05-03" name="test" error="custom error" uswds="false"/>',
     );
     const date = await page.find('va-memorable-date');
 
@@ -97,7 +97,7 @@ describe('va-memorable-date', () => {
   it('renders a required span', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date label="This is a field" required />',
+      '<va-memorable-date label="This is a field" required uswds="false"/>',
     );
 
     const requiredSpan = await page.find('va-memorable-date >>> span.required');
@@ -108,7 +108,7 @@ describe('va-memorable-date', () => {
     it('does year validation without required prop', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" />',
+        '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -126,7 +126,7 @@ describe('va-memorable-date', () => {
     it('does month validation without required prop and displays the correct error message', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" />',
+        '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -148,7 +148,7 @@ describe('va-memorable-date', () => {
     it('does day validation without required prop', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" />',
+        '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -167,7 +167,7 @@ describe('va-memorable-date', () => {
    it('does validation for required components', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date name="test" required />',
+        '<va-memorable-date name="test" required uswds="false"/>',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -183,7 +183,7 @@ describe('va-memorable-date', () => {
 
     it('allows for a custom required message', async () => {
       const page = await newE2EPage();
-      await page.setContent('<va-memorable-date value="2000-01-01" name="test" label="This is a field" required />');
+      await page.setContent('<va-memorable-date value="2000-01-01" name="test" label="This is a field" required uswds="false"/>');
 
       // Act
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -205,7 +205,7 @@ describe('va-memorable-date', () => {
     it('resets error to null when fixed', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" required="true" />',
+        '<va-memorable-date value="1999-05-03" name="test" required="true" uswds="false"/>',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -232,7 +232,7 @@ describe('va-memorable-date', () => {
       it('correctly indicates an invalid year', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date value="1999-05-03" name="test" required="true" />',
+          '<va-memorable-date value="1999-05-03" name="test" required="true" uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -275,7 +275,7 @@ describe('va-memorable-date', () => {
       it('correctly indicates an invalid month', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date value="1999-05-03" name="test" required="true" />',
+          '<va-memorable-date value="1999-05-03" name="test" required="true" uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -318,7 +318,7 @@ describe('va-memorable-date', () => {
       it('correctly indicates an invalid day', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date value="1999-05-03" name="test" required="true" />',
+          '<va-memorable-date value="1999-05-03" name="test" required="true" uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -360,7 +360,7 @@ describe('va-memorable-date', () => {
       it('passes the invalidDay prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-day />',
+          '<va-memorable-date name="test" invalid-day uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -380,7 +380,7 @@ describe('va-memorable-date', () => {
       it('passes the invalidMonth prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-month />',
+          '<va-memorable-date name="test" invalid-month uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -400,7 +400,7 @@ describe('va-memorable-date', () => {
       it('passes the invalidYear prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-year />',
+          '<va-memorable-date name="test" invalid-year uswds="false"/>',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -421,7 +421,7 @@ describe('va-memorable-date', () => {
 
   it('sets a label', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date label="This is a label" />');
+    await page.setContent('<va-memorable-date label="This is a label" uswds="false"/>');
 
     const label = await page.find('va-memorable-date >>> legend');
     expect(label.innerText).toContain('This is a label');
@@ -429,7 +429,7 @@ describe('va-memorable-date', () => {
 
   it('sets a default date', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date value="1999-05-03" />');
+    await page.setContent('<va-memorable-date value="1999-05-03" uswds="false"/>');
 
     const month = await page.find('va-memorable-date >>> .input-month');
     const day = await page.find('va-memorable-date >>> .input-day');
@@ -443,7 +443,7 @@ describe('va-memorable-date', () => {
   it('updates date based on input fields', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date value="1999-05-03" name="test" />',
+      '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
     );
 
     const date = await page.find('va-memorable-date');
@@ -478,7 +478,7 @@ describe('va-memorable-date', () => {
 
   it('year input only allows for 4 characters to be used', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date name="test" />');
+    await page.setContent('<va-memorable-date name="test" uswds="false"/>');
 
     const elementYear = await page.find('va-memorable-date >>> .input-year');
     const handleYear = await page.$('pierce/[name="testYear"]');
@@ -496,7 +496,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-memorable-date value="1999-05-03" name="test" />',
+      '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
     );
 
     const handleYear = await page.$('pierce/[name="testYear"]');
@@ -511,7 +511,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-memorable-date value="1999-05-03" name="test" />',
+      '<va-memorable-date value="1999-05-03" name="test" uswds="false"/>',
     );
 
     const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -540,7 +540,7 @@ describe('va-memorable-date', () => {
   it('formats single digit days and months into 2 digits with a leading 0', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-memorable-date name="test"/>');
+    await page.setContent('<va-memorable-date name="test" uswds="false"/>');
     const date = await page.find('va-memorable-date');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
     const handleDay = await page.$('pierce/[name="testDay"]');
@@ -565,7 +565,7 @@ describe('va-memorable-date', () => {
   it('fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date enable-analytics name="test" label="Example label" />',
+      '<va-memorable-date enable-analytics name="test" label="Example label" uswds="false"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -602,7 +602,7 @@ describe('va-memorable-date', () => {
 
   it('Applies a unique name attribute for each input', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date name="test" />');
+    await page.setContent('<va-memorable-date name="test" uswds="false"/>');
 
     const yearInput = await page.$('pierce/[name="testYear"]');
     const monthInput = await page.$('pierce/[name="testMonth"]');
@@ -614,7 +614,7 @@ describe('va-memorable-date', () => {
 
   it('When the name prop is not set, the input name attributes default to input type name', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date />');
+    await page.setContent('<va-memorable-date uswds="false"/>');
 
     const yearInput = await page.$('pierce/[name="Year"]');
     const monthInput = await page.$('pierce/[name="Month"]');
@@ -1453,7 +1453,7 @@ describe('va-memorable-date', () => {
 
   it('v1 without monthSelect day and month input fields only allows for a maximum of 2 characters to be used', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date name="test" month-select="false"/>');
+    await page.setContent('<va-memorable-date name="test" month-select="false" uswds="false"/>');
 
     const elementMonth = await page.find('va-memorable-date >>> .input-month');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1480,7 +1480,7 @@ describe('va-memorable-date', () => {
     it('uswds v3 without monthSelect does year validation without required prop', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" uswds month-select="false" />',
+        '<va-memorable-date value="1999-05-03" name="test" month-select="false" />',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1498,7 +1498,7 @@ describe('va-memorable-date', () => {
     it('uswds v3 without monthSelect does day validation without required prop', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" uswds month-select="false" />',
+        '<va-memorable-date value="1999-05-03" name="test" month-select="false" />',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1517,7 +1517,7 @@ describe('va-memorable-date', () => {
    it('uswds v3 without monthSelect does validation for required components and displays the correct error message', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date name="test" required uswds month-select="false" />',
+        '<va-memorable-date name="test" required month-select="false" />',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1537,7 +1537,7 @@ describe('va-memorable-date', () => {
     it('uswds v3 with monthSelect displays the correct error message', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date name="test" required uswds month-select="true" />',
+        '<va-memorable-date name="test" required month-select="true" />',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1556,7 +1556,7 @@ describe('va-memorable-date', () => {
 
     it('uswds v3 without monthSelect allows for a custom required message', async () => {
       const page = await newE2EPage();
-      await page.setContent('<va-memorable-date value="2000-01-01" name="test" label="This is a field" required uswds month-select="false" />');
+      await page.setContent('<va-memorable-date value="2000-01-01" name="test" label="This is a field" required month-select="false" />');
 
       // Act
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1578,7 +1578,7 @@ describe('va-memorable-date', () => {
     it('uswds v3 without monthSelect resets error to null when fixed', async () => {
       const page = await newE2EPage();
       await page.setContent(
-        '<va-memorable-date value="1999-05-03" name="test" required="true" uswds month-select="false" />',
+        '<va-memorable-date value="1999-05-03" name="test" required="true" month-select="false" />',
       );
       const date = await page.find('va-memorable-date');
       const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1605,7 +1605,7 @@ describe('va-memorable-date', () => {
       it('uswds v3 without monthSelect correctly indicates an invalid year', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date value="1999-05-03" name="test" required="true" uswds month-select="false" />',
+          '<va-memorable-date value="1999-05-03" name="test" required="true" month-select="false" />',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1648,7 +1648,7 @@ describe('va-memorable-date', () => {
       it('uswds v3 without monthSelect correctly indicates an invalid day', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date value="1999-05-03" name="test" required="true" uswds month-select="false" />',
+          '<va-memorable-date value="1999-05-03" name="test" required="true" month-select="false" />',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1690,7 +1690,7 @@ describe('va-memorable-date', () => {
       it('uswds v3 without monthSelect passes the invalidDay prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-day uswds month-select="false" />',
+          '<va-memorable-date name="test" invalid-day month-select="false" />',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1710,7 +1710,7 @@ describe('va-memorable-date', () => {
       it('uswds v3 without monthSelect passes the invalidMonth prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-month uswds month-select="false" />',
+          '<va-memorable-date name="test" invalid-month month-select="false" />',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1730,7 +1730,7 @@ describe('va-memorable-date', () => {
       it('uswds v3 without monthSelect passes the invalidYear prop correctly', async () => {
         const page = await newE2EPage();
         await page.setContent(
-          '<va-memorable-date name="test" invalid-year uswds month-select />',
+          '<va-memorable-date name="test" invalid-year month-select />',
         );
         const handleYear = await page.$('pierce/[name="testYear"]');
         const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1751,7 +1751,7 @@ describe('va-memorable-date', () => {
 
   it('uswds v3 without monthSelect sets a label', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date label="This is a label" uswds month-select="false" />');
+    await page.setContent('<va-memorable-date label="This is a label" month-select="false" />');
 
     const label = await page.find('va-memorable-date >>> legend');
     expect(label.innerText).toContain('This is a label');
@@ -1761,7 +1761,7 @@ describe('va-memorable-date', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-memorable-date value="1999-05-03" name="test" uswds month-select="false" />',
+      '<va-memorable-date value="1999-05-03" name="test" month-select="false" />',
     );
 
     const handleYear = await page.$('pierce/[name="testYear"]');
@@ -1775,7 +1775,7 @@ describe('va-memorable-date', () => {
   it('uswds v3 without monthSelect formats single digit days and months into 2 digits with a leading 0', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-memorable-date name="test" uswds month-select="false" />');
+    await page.setContent('<va-memorable-date name="test" month-select="false" />');
     const date = await page.find('va-memorable-date');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
     const handleDay = await page.$('pierce/[name="testDay"]');
@@ -1800,7 +1800,7 @@ describe('va-memorable-date', () => {
   it('uswds v3 without monthSelect fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date enable-analytics name="test" label="Example label" uswds month-select="false" />',
+      '<va-memorable-date enable-analytics name="test" label="Example label" month-select="false" />',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const handleMonth = await page.$('pierce/[name="testMonth"]');
@@ -1837,7 +1837,7 @@ describe('va-memorable-date', () => {
 
   it('uswds v3 Applies a unique name attribute for each input', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date name="test" uswds />');
+    await page.setContent('<va-memorable-date name="test" />');
 
     const yearInput = await page.$('pierce/[name="testYear"]');
     const monthInput = await page.$('pierce/[name="testMonth"]');
@@ -1849,7 +1849,7 @@ describe('va-memorable-date', () => {
 
   it('uswds v3 When the name prop is not set, input name attributes default to input type name', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-memorable-date uswds />');
+    await page.setContent('<va-memorable-date />');
 
     const yearInput = await page.$('pierce/[name="Year"]');
     const monthInput = await page.$('pierce/[name="Month"]');
@@ -1862,7 +1862,7 @@ describe('va-memorable-date', () => {
   it('uswds useFormsPattern displays header for the single field pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-memorable-date use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-memorable-date >>> h1');
@@ -1872,7 +1872,7 @@ describe('va-memorable-date', () => {
   it('uswds useFormsPattern displays header for the multiple field pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-memorable-date use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-memorable-date >>> h1');
@@ -1882,7 +1882,7 @@ describe('va-memorable-date', () => {
   it('uswds useFormsPattern does not display header if "single" or "multiple" is not indicated', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-memorable-date form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-textarea >>> h1');
@@ -1892,7 +1892,7 @@ describe('va-memorable-date', () => {
   it('uswds useFormsPattern does not display header if "single" or "multiple" is not indicated', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-memorable-date form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-memorable-date form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     await axeCheck(page);
diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss b/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
index 08551a18a..0631c602f 100644
--- a/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
+++ b/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
@@ -39,11 +39,11 @@
   }
 }
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   margin-top: 24px;
 }
 
-:host([uswds]:not([uswds='false'])) #error-message {
+:host(:not([uswds='false'])) #error-message {
   margin-bottom: 0;
 }
 
@@ -57,29 +57,29 @@
 @import '../../mixins/form-field-error.css';
 
 // Resets error border to not show for 'any' error, so we can only show for 'specific' errors
-:host([error]:not([error='']):not([uswds='true'])) va-select::part(select),
-:host([error]:not([error='']):not([uswds='true'])) va-text-input::part(input) {
+:host([error][uswds='false']:not([error=''])) va-select::part(select),
+:host([error][uswds='false']:not([error=''])) va-text-input::part(input) {
   border: 0.1rem solid var(--color-gray);
 }
 
-:host([error='month-range']:not([error='']):not([uswds='true']))
+:host([error='month-range'][uswds='false']:not([error='']))
   va-select.input-month::part(select),
-:host([error='month-range']:not([error='']):not([uswds='true']))
+:host([error='month-range'][uswds='false']:not([error='']))
   va-text-input.input-month::part(input) {
   border: 4px solid var(--color-secondary-dark);
 }
 
-:host([error='day-range']:not([error='']):not([uswds='true']))
+:host([error='day-range'][uswds='false']:not([error='']))
   va-text-input.input-day::part(input) {
   border: 4px solid var(--color-secondary-dark);
 }
 
-:host([error='year-range']:not([error='']):not([uswds='true']))
+:host([error='year-range'][uswds='false']:not([error='']))
   va-text-input.input-year::part(input) {
   border: 4px solid var(--color-secondary-dark);
 }
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   .input-month,
   .input-day,
   .input-year {
diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx b/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
index 1e232dd6c..b59a963de 100644
--- a/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
+++ b/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
@@ -58,7 +58,7 @@ export class VaMemorableDate {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs. `uswds` should be true.
@@ -311,7 +311,6 @@ export class VaMemorableDate {
       const monthDisplay = monthSelect
         ? <div class="usa-form-group usa-form-group--month usa-form-group--select">
           <va-select
-            uswds
             label={i18next.t('month')}
             name={name ? `${name}Month` : 'Month'}
             aria-describedby={describedbyIds}
@@ -335,7 +334,6 @@ export class VaMemorableDate {
         </div>
       : <div class="usa-form-group usa-form-group--month">
         <va-text-input
-          uswds
           label={i18next.t('month')}
           name={name ? `${name}Month` : 'Month'}
           maxlength={2}
@@ -384,7 +382,6 @@ export class VaMemorableDate {
                 {monthDisplay}
                 <div class="usa-form-group usa-form-group--day">
                   <va-text-input
-                    uswds
                     label={i18next.t('day')}
                     name={name ? `${name}Day` : 'Day'}
                     maxlength={2}
@@ -405,7 +402,6 @@ export class VaMemorableDate {
                 </div>
                 <div class="usa-form-group usa-form-group--year">
                   <va-text-input
-                    uswds
                     label={i18next.t('year')}
                     name={name ? `${name}Year` : 'Year'}
                     maxlength={4}
@@ -460,10 +456,11 @@ export class VaMemorableDate {
                 value={month?.toString()}
                 onInput={handleDateChange}
                 onBlur={this.handleMonthBlur}
-                class="input-month memorable-date-input"
+                class="input-month memorable-date-input uswds-false"
                 inputmode="numeric"
                 type="text"
                 error={this.invalidMonth ? getErrorMessage(error) : null}
+                uswds={false}
                 />
               <va-text-input
                 label={i18next.t('day')}
@@ -478,10 +475,11 @@ export class VaMemorableDate {
                 value={day?.toString()}
                 onInput={handleDateChange}
                 onBlur={this.handleDayBlur}
-                class="input-day memorable-date-input"
+                class="input-day memorable-date-input uswds-false"
                 inputmode="numeric"
                 type="text"
                 error={this.invalidDay ? getErrorMessage(error) : null}
+                uswds={false}
                 />
               <va-text-input
                 label={i18next.t('year')}
@@ -496,10 +494,11 @@ export class VaMemorableDate {
                 value={year?.toString()}
                 onInput={handleDateChange}
                 onBlur={this.handleYearBlur}
-                class="input-year memorable-date-input"
+                class="input-year memorable-date-input uswds-false"
                 inputmode="numeric"
                 type="text"
                 error={this.invalidYear ? getErrorMessage(error) : null}
+                uswds={false}
                 />
             </div>
           </fieldset>
diff --git a/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts b/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
index bdaa5c22b..a8442fd67 100644
--- a/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
+++ b/packages/web-components/src/components/va-modal/test/va-modal.e2e.ts
@@ -5,7 +5,7 @@ describe('va-modal', () => {
   it('renders', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -14,7 +14,7 @@ describe('va-modal', () => {
 
     const element = await page.find('va-modal');
     expect(element).toEqualHtml(`
-      <va-modal class="hydrated" modal-title="Example Title" visible="">
+      <va-modal class="hydrated" modal-title="Example Title" visible="" uswds="false">
         <mock:shadow-root>
           <div aria-describedby="modal-content" aria-label="Example Title modal" aria-modal="true" class="va-modal-inner" role="dialog">
             <button aria-label="Close Example Title modal" class="last-focusable-child va-modal-close" type="button">
@@ -42,7 +42,7 @@ describe('va-modal', () => {
   it('passes an axe check when visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -55,7 +55,7 @@ describe('va-modal', () => {
   it('passes an axe check when not visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title">
+      <va-modal modal-title="Example Title" uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -68,7 +68,7 @@ describe('va-modal', () => {
   it('should trigger closeEvent using the Escape key when modal is visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -85,7 +85,7 @@ describe('va-modal', () => {
   it('should not trigger closeEvent using the Escape key when modal is not visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title">
+      <va-modal modal-title="Example Title" uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -102,7 +102,7 @@ describe('va-modal', () => {
   it('should open with focus assigned to close button', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -119,7 +119,7 @@ describe('va-modal', () => {
   it('should open with focus assigned to given selector', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible initial-focus-selector=".va-modal-title">
+      <va-modal modal-title="Example Title" visible initial-focus-selector=".va-modal-title" uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -135,7 +135,7 @@ describe('va-modal', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <input id="pre-modal-checkbox" type="checkbox" />
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -174,7 +174,7 @@ describe('va-modal', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <input id="pre-modal-checkbox" type="checkbox" />
-      <va-modal modal-title="Example Title" visible>
+      <va-modal modal-title="Example Title" visible uswds="false">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -211,7 +211,7 @@ describe('va-modal', () => {
   it('fires a single analytics event when va-modal displays', async () => {
     const page = await newE2EPage();
     await page.setContent(
-    `<va-modal modal-title="Example Title" status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
+    `<va-modal modal-title="Example Title" status="info" primary-button-text="Primary button" secondary-button-text="Secondary button" uswds="false">
       <p>Example modal content</p>
     </va-modal>`,
     );
@@ -237,7 +237,7 @@ describe('va-modal', () => {
   it('fires a single analytics event for each button clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-modal modal-title="Example Title" visible status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
+      `<va-modal modal-title="Example Title" visible status="info" primary-button-text="Primary button" secondary-button-text="Secondary button" uswds="false">
       <p>Example modal content</p>
     </va-modal>`,
     );
@@ -276,7 +276,7 @@ describe('va-modal', () => {
   it('uswds v3 renders', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -285,7 +285,7 @@ describe('va-modal', () => {
 
     const element = await page.find('va-modal');
     expect(element).toEqualHtml(`
-      <va-modal class="hydrated" modal-title="Example Title" uswds="" visible="">
+      <va-modal class="hydrated" modal-title="Example Title" visible="">
         <mock:shadow-root>
         <div aria-label="Example Title modal" aria-modal="true" class="usa-modal" role="dialog">
             <div class="usa-modal__content">
@@ -315,7 +315,7 @@ describe('va-modal', () => {
   it('uswds v3 passes an axe check when visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -328,7 +328,7 @@ describe('va-modal', () => {
   it('uswds v3 passes an axe check when not visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" uswds>
+      <va-modal modal-title="Example Title">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -341,7 +341,7 @@ describe('va-modal', () => {
   it('uswds v3 should trigger closeEvent using the Escape key when modal is visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -358,7 +358,7 @@ describe('va-modal', () => {
   it('uswds v3 should not trigger closeEvent using the Escape key when modal is not visible', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" uswds>
+      <va-modal modal-title="Example Title">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -375,7 +375,7 @@ describe('va-modal', () => {
   it('uswds v3 should open with focus assigned to close button', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -392,7 +392,7 @@ describe('va-modal', () => {
   it('uswds v3 should open with focus assigned to given selector', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-modal modal-title="Example Title" visible initial-focus-selector=".usa-modal__heading" uswds>
+      <va-modal modal-title="Example Title" visible initial-focus-selector=".usa-modal__heading">
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -408,7 +408,7 @@ describe('va-modal', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <input id="pre-modal-checkbox" type="checkbox" />
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -447,7 +447,7 @@ describe('va-modal', () => {
     const page = await newE2EPage();
     await page.setContent(`
       <input id="pre-modal-checkbox" type="checkbox" />
-      <va-modal modal-title="Example Title" visible uswds>
+      <va-modal modal-title="Example Title" visible>
         <p>
           A modal may pass any React nodes as children to be displayed within it.
         </p>
@@ -484,7 +484,7 @@ describe('va-modal', () => {
   it('uswds v3 fires a single analytics event when va-modal displays', async () => {
     const page = await newE2EPage();
     await page.setContent(
-    `<va-modal uswds modal-title="Example Title" status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
+    `<va-modal modal-title="Example Title" status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
       <p>Example modal content</p>
     </va-modal>`,
     );
@@ -510,7 +510,7 @@ describe('va-modal', () => {
   it('uswds v3 fires a single analytics event for each button clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<va-modal uswds modal-title="Example Title" visible status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
+      `<va-modal modal-title="Example Title" visible status="info" primary-button-text="Primary button" secondary-button-text="Secondary button">
       <p>Example modal content</p>
     </va-modal>`,
     );
diff --git a/packages/web-components/src/components/va-modal/va-modal.scss b/packages/web-components/src/components/va-modal/va-modal.scss
index ade8dee9c..332f71132 100644
--- a/packages/web-components/src/components/va-modal/va-modal.scss
+++ b/packages/web-components/src/components/va-modal/va-modal.scss
@@ -238,7 +238,7 @@ i::before {
   background-color: var(--color-gray-cool-light);
 }
 
-:host(:not([uswds="true"],[uswds=""])) .va-modal-alert {
+:host([uswds='false']) .va-modal-alert {
   border-left-style: solid;
   border-left-width: 10px;
   display: inline-flex;
diff --git a/packages/web-components/src/components/va-modal/va-modal.tsx b/packages/web-components/src/components/va-modal/va-modal.tsx
index 64aa98d6d..874cee703 100644
--- a/packages/web-components/src/components/va-modal/va-modal.tsx
+++ b/packages/web-components/src/components/va-modal/va-modal.tsx
@@ -124,7 +124,7 @@ export class VaModal {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Whether or not the component will be forced to take action.
@@ -473,7 +473,6 @@ export class VaModal {
                         <va-button
                           onClick={e => this.handlePrimaryButtonClick(e)}
                           text={primaryButtonText}
-                          uswds
                           />
                       </li>
                     )}
@@ -484,7 +483,6 @@ export class VaModal {
                             onClick={e => this.handleSecondaryButtonClick(e)}
                             secondary
                             text={secondaryButtonText}
-                            uswds
                           />
                         )}
                         {unstyled && (
diff --git a/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts b/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts
index 6e05baab2..f633598fc 100644
--- a/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts
+++ b/packages/web-components/src/components/va-number-input/test/va-number-input.e2e.ts
@@ -5,11 +5,11 @@ describe('va-number-input', () => {
   it('renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Hello, world" />');
+    await page.setContent('<va-number-input label="Hello, world" uswds="false"/>');
     const element = await page.find('va-number-input');
 
     expect(element).toEqualHtml(`
-      <va-number-input class="hydrated" label="Hello, world">
+      <va-number-input class="hydrated" label="Hello, world" uswds="false">
         <mock:shadow-root>
           <label for="inputField">
             Hello, world
@@ -25,7 +25,7 @@ describe('va-number-input', () => {
 
   it('renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input error="This is a mistake" />');
+    await page.setContent('<va-number-input error="This is a mistake" uswds="false"/>');
 
     // Render the error message text
     const error = await page.find('va-number-input >>> span#error-message');
@@ -36,7 +36,7 @@ describe('va-number-input', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input hint="This is hint text" />');
+    await page.setContent('<va-number-input hint="This is hint text" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-number-input >>> span.hint-text');
@@ -46,7 +46,7 @@ describe('va-number-input', () => {
   it('renders a required span', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-number-input label="This is a field" required />',
+      '<va-number-input label="This is a field" required uswds="false"/>',
     );
 
     const requiredSpan = await page.find(
@@ -60,7 +60,7 @@ describe('va-number-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-number-input required label="This is a test" error="With an error message"/>',
+      '<va-number-input required label="This is a test" error="With an error message" uswds="false"/>',
     );
 
     await axeCheck(page);
@@ -70,7 +70,7 @@ describe('va-number-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-number-input label="Input Field" enable-analytics/>',
+      '<va-number-input label="Input Field" enable-analytics uswds="false"/>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -94,7 +94,7 @@ describe('va-number-input', () => {
   it('emits blur event', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field"/>');
+    await page.setContent('<va-number-input label="Input Field" uswds="false"/>');
 
     const inputEl = await page.find('va-number-input >>> input');
     const blurSpy = await page.spyOnEvent('blur');
@@ -106,7 +106,7 @@ describe('va-number-input', () => {
   it('emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field"/>');
+    await page.setContent('<va-number-input label="Input Field" uswds="false"/>');
 
     const inputEl = await page.find('va-number-input >>> input');
     const inputSpy = await page.spyOnEvent('input');
@@ -131,7 +131,7 @@ describe('va-number-input', () => {
   it("doesn't fire analytics events", async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field"/>');
+    await page.setContent('<va-number-input label="Input Field" uswds="false"/>');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-number-input >>> input');
@@ -143,7 +143,7 @@ describe('va-number-input', () => {
 
   it('defaults to type of text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input />');
+    await page.setContent('<va-number-input uswds="false"/>');
 
     // Level-setting expectations
     const inputEl = await page.find('va-number-input >>> input');
@@ -152,7 +152,7 @@ describe('va-number-input', () => {
 
   it('sets a range based on min and max attributes', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input min="0" max="4" />');
+    await page.setContent('<va-number-input min="0" max="4" uswds="false"/>');
 
     const inputEl = await page.find('va-number-input >>> input');
     expect(inputEl.getAttribute('min')).toBe('0');
@@ -163,7 +163,7 @@ describe('va-number-input', () => {
     const inputModes = ['decimal', 'numeric'];
     for (const inputMode of inputModes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-number-input inputmode="${inputMode}" />`);
+      await page.setContent(`<va-number-input inputmode="${inputMode}" uswds="false"/>`);
       const inputEl = await page.find('va-number-input >>> input');
       expect(inputEl.getAttribute('inputmode')).toBe(inputMode);
     }
@@ -171,14 +171,14 @@ describe('va-number-input', () => {
 
   it('renders a "$" if currency flag set to true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input currency />');
+    await page.setContent('<va-number-input currency uswds="false"/>');
     const currencyTextElement = await page.find('va-number-input >>> div > span');
     expect(currencyTextElement.innerText).toContain('$');
   });
 
   it('adds aria-describedby input-message id', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input message-aria-describedby="example message" />');
+    await page.setContent('<va-number-input message-aria-describedby="example message" uswds="false"/>');
     const el = await page.find('va-number-input');
     const inputEl = await page.find('va-number-input >>> input');
 
@@ -196,7 +196,7 @@ describe('va-number-input', () => {
 
   it('should show validation message when error prop is undefined', async () => {
     const page = await newE2EPage();
-    await page.setContent('<div><va-number-input label="test input" /></div>');
+    await page.setContent('<div><va-number-input label="test input" uswds="false"/></div>');
     const inputEl = await page.find('va-number-input >>> input');
 
     await inputEl.press('a');
@@ -209,7 +209,7 @@ describe('va-number-input', () => {
 
   it('should not show default validation message when error prop is defined', async () => {
     const page = await newE2EPage();
-    await page.setContent('<div><va-number-input label="test input" error="This is an error"/></div>');
+    await page.setContent('<div><va-number-input label="test input" error="This is an error" uswds="false"/></div>');
     const inputEl = await page.find('va-number-input >>> input');
     await inputEl.press('a');
     await inputEl.press('b');
@@ -224,11 +224,11 @@ describe('va-number-input', () => {
   it('uswds renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Hello, world" uswds />');
+    await page.setContent('<va-number-input label="Hello, world"/>');
     const element = await page.find('va-number-input');
 
     expect(element).toEqualHtml(`
-      <va-number-input class="hydrated" label="Hello, world" uswds="">
+      <va-number-input class="hydrated" label="Hello, world">
         <mock:shadow-root>
           <div class="input-wrap">
             <label for="inputField" id="input-label" class="usa-label" part="label">
@@ -244,7 +244,7 @@ describe('va-number-input', () => {
 
   it('uswds renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input error="This is a mistake" uswds />');
+    await page.setContent('<va-number-input error="This is a mistake" />');
 
     // Render the error message text
     const error = await page.find('va-number-input >>> .usa-error-message');
@@ -255,7 +255,7 @@ describe('va-number-input', () => {
 
   it('uswds renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input label="Hello world" hint="This is hint text" uswds />');
+    await page.setContent('<va-number-input label="Hello world" hint="This is hint text" />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-number-input >>> span.usa-hint');
@@ -265,7 +265,7 @@ describe('va-number-input', () => {
   it('uswds renders a required span', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-number-input label="This is a field" required uswds />',
+      '<va-number-input label="This is a field" required />',
     );
 
     const requiredSpan = await page.find(
@@ -279,7 +279,7 @@ describe('va-number-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-number-input required label="This is a test" error="With an error message" uswds />',
+      '<va-number-input required label="This is a test" error="With an error message" />',
     );
 
     await axeCheck(page);
@@ -289,7 +289,7 @@ describe('va-number-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-number-input label="Input Field" enable-analytics uswds />',
+      '<va-number-input label="Input Field" enable-analytics />',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -313,7 +313,7 @@ describe('va-number-input', () => {
   it('uswds emits blur event', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field" uswds />');
+    await page.setContent('<va-number-input label="Input Field" />');
 
     const inputEl = await page.find('va-number-input >>> input');
     const blurSpy = await page.spyOnEvent('blur');
@@ -325,7 +325,7 @@ describe('va-number-input', () => {
   it('uswds emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field" uswds />');
+    await page.setContent('<va-number-input label="Input Field" />');
 
     const inputEl = await page.find('va-number-input >>> input');
     const inputSpy = await page.spyOnEvent('input');
@@ -350,7 +350,7 @@ describe('va-number-input', () => {
   it("uswds doesn't fire analytics events", async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-number-input label="Input Field" uswds />');
+    await page.setContent('<va-number-input label="Input Field" />');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-number-input >>> input');
@@ -362,7 +362,7 @@ describe('va-number-input', () => {
 
   it('uswds defaults to type of text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input uswds />');
+    await page.setContent('<va-number-input />');
 
     // Level-setting expectations
     const inputEl = await page.find('va-number-input >>> input');
@@ -371,7 +371,7 @@ describe('va-number-input', () => {
 
   it('uswds sets a range based on min and max attributes', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input min="0" max="4" uswds />');
+    await page.setContent('<va-number-input min="0" max="4" />');
 
     const inputEl = await page.find('va-number-input >>> input');
     expect(inputEl.getAttribute('min')).toBe('0');
@@ -382,7 +382,7 @@ describe('va-number-input', () => {
     const inputModes = ['decimal', 'numeric'];
     for (const inputMode of inputModes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-number-input inputmode="${inputMode}" uswds />`);
+      await page.setContent(`<va-number-input inputmode="${inputMode}" />`);
       const inputEl = await page.find('va-number-input >>> input');
       expect(inputEl.getAttribute('inputmode')).toBe(inputMode);
     }
@@ -390,7 +390,7 @@ describe('va-number-input', () => {
 
   it('uswds adds aria-describedby input-message id', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input message-aria-describedby="example message" uswds />');
+    await page.setContent('<va-number-input message-aria-describedby="example message" />');
     const el = await page.find('va-number-input');
     const inputEl = await page.find('va-number-input >>> input');
 
@@ -408,7 +408,7 @@ describe('va-number-input', () => {
   
   it('uswds should show validation message when error prop is undefined', async () => {
     const page = await newE2EPage();
-    await page.setContent('<div><va-number-input uswds label="test input" /></div>');
+    await page.setContent('<div><va-number-input label="test input" /></div>');
     const inputEl = await page.find('va-number-input >>> input');
 
     await inputEl.press('a');
@@ -421,7 +421,7 @@ describe('va-number-input', () => {
 
   it('uswds should not show default validation message when error prop is defined', async () => {
     const page = await newE2EPage();
-    await page.setContent('<div><va-number-input uswds label="test input" error="This is an error"/></div>');
+    await page.setContent('<div><va-number-input label="test input" error="This is an error"/></div>');
     const inputEl = await page.find('va-number-input >>> input');
 
     await inputEl.press('a');
@@ -435,7 +435,7 @@ describe('va-number-input', () => {
 
   it('uswds useFormsPattern displays header for the single field pattern', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input label="This is a label" uswds use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-number-input label="This is a label" use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-number-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -443,7 +443,7 @@ describe('va-number-input', () => {
 
   it('uswds useFormsPattern displays header for the multiple fields pattern', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-number-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-number-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -451,7 +451,7 @@ describe('va-number-input', () => {
 
   it('uswds useFormsPattern does not display header if "single" or "multiple" is not indicated', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-number-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-number-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -459,7 +459,7 @@ describe('va-number-input', () => {
 
   it('uswds useFormsPattern passes an aXe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-number-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-number-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     await axeCheck(page);
   });
diff --git a/packages/web-components/src/components/va-number-input/va-number-input.scss b/packages/web-components/src/components/va-number-input/va-number-input.scss
index 5edeb16b1..33058fd9f 100644
--- a/packages/web-components/src/components/va-number-input/va-number-input.scss
+++ b/packages/web-components/src/components/va-number-input/va-number-input.scss
@@ -12,7 +12,7 @@
 @import '../../mixins/hint-text.css';
 @import '~@department-of-veterans-affairs/css-library/dist/elements.css';
 
-:host(:not([uswds='true'], [uswds=''])) {
+:host([uswds='false']) {
   input[type='number'] {
     -moz-appearance: textfield;
   }
diff --git a/packages/web-components/src/components/va-number-input/va-number-input.tsx b/packages/web-components/src/components/va-number-input/va-number-input.tsx
index 87b08d096..b1d1038d7 100644
--- a/packages/web-components/src/components/va-number-input/va-number-input.tsx
+++ b/packages/web-components/src/components/va-number-input/va-number-input.tsx
@@ -109,7 +109,7 @@ export class VaNumberInput {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs. `uswds` should be true.
diff --git a/packages/web-components/src/components/va-omb-info/test/va-omb-info.e2e.ts b/packages/web-components/src/components/va-omb-info/test/va-omb-info.e2e.ts
index 8de984a30..9ee12068a 100644
--- a/packages/web-components/src/components/va-omb-info/test/va-omb-info.e2e.ts
+++ b/packages/web-components/src/components/va-omb-info/test/va-omb-info.e2e.ts
@@ -17,7 +17,7 @@ describe('va-omb-info', () => {
             </strong>
           </div>
           <div>
-            <va-button class="hydrated" secondary></va-button>
+            <va-button class="hydrated uswds-false" uswds="false" secondary></va-button>
           </div>
           <va-modal class="hydrated" large>
             <slot></slot>
diff --git a/packages/web-components/src/components/va-omb-info/va-omb-info.tsx b/packages/web-components/src/components/va-omb-info/va-omb-info.tsx
index 37a978d1e..a95db8465 100644
--- a/packages/web-components/src/components/va-omb-info/va-omb-info.tsx
+++ b/packages/web-components/src/components/va-omb-info/va-omb-info.tsx
@@ -172,6 +172,8 @@ export class VaOmbInfo {
             onFocusin={() => this.trapFocus()}
             secondary
             text="View Privacy Act Statement"
+            uswds={false}
+            class="uswds-false"
           />
         </div>
         <va-modal
@@ -180,6 +182,7 @@ export class VaOmbInfo {
           onCloseEvent={toggleModalVisible}
           visible={visible}
           ariaHiddenNodeExceptions={[this.el]}
+          uswds={false}
         >
           <slot onSlotchange={handleSlotChange}></slot>
           {modalContents}
diff --git a/packages/web-components/src/components/va-pagination/test/va-pagination.e2e.ts b/packages/web-components/src/components/va-pagination/test/va-pagination.e2e.ts
index c2b7d56ab..438bab4f3 100644
--- a/packages/web-components/src/components/va-pagination/test/va-pagination.e2e.ts
+++ b/packages/web-components/src/components/va-pagination/test/va-pagination.e2e.ts
@@ -4,11 +4,11 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-pagination', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-pagination></va-pagination>');
+    await page.setContent('<va-pagination uswds="false"></va-pagination>');
 
     const element = await page.find('va-pagination');
     expect(element).toEqualHtml(`
-      <va-pagination class="hydrated" role="navigation" aria-label="Pagination">
+      <va-pagination class="hydrated" role="navigation" aria-label="Pagination" uswds="false">
         <mock:shadow-root>
           <ul class="pagination-prev"></ul>
           <ul class="pagination-inner"></ul>
@@ -21,7 +21,7 @@ describe('va-pagination', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-pagination page="3" pages="50">
+      <va-pagination page="3" pages="50" uswds="false">
       </va-pagination>
     `);
 
@@ -31,12 +31,12 @@ describe('va-pagination', () => {
   it('should show both "Prev" and "Next" if in a middle page', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-pagination page="3" pages="5" />
+    <va-pagination page="3" pages="5" uswds="false"/>
     `);
 
     const element = await page.find('va-pagination');
     expect(element).toEqualHtml(`
-      <va-pagination class="hydrated" page="3" pages="5" role="navigation" aria-label="Pagination">
+      <va-pagination class="hydrated" page="3" pages="5" role="navigation" aria-label="Pagination" uswds="false">
         <mock:shadow-root>
           <ul class="pagination-prev">
           <li>
@@ -87,7 +87,7 @@ describe('va-pagination', () => {
   it('should show prev button but not next button if on the last page', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-pagination page="5" pages="5" />
+    <va-pagination page="5" pages="5" uswds="false"/>
     `);
 
     const prevButton = await page.findAll('va-pagination >>> .button-prev');
@@ -99,7 +99,7 @@ describe('va-pagination', () => {
   it('should select previous page when prev button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-pagination page="3" pages="50" />
+      <va-pagination page="3" pages="50" uswds="false"/>
     `);
     const onPageSelectSpy = await page.spyOnEvent('pageSelect');
     const prevButton = await page.find('va-pagination >>> .button-prev');
@@ -110,7 +110,7 @@ describe('va-pagination', () => {
   it('should select next page when next button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-pagination page="3" pages="50" />
+      <va-pagination page="3" pages="50" uswds="false"/>
     `);
     const onPageSelectSpy = await page.spyOnEvent('pageSelect');
     const nextButton = await page.find('va-pagination >>> .button-next');
@@ -121,7 +121,7 @@ describe('va-pagination', () => {
   it('should select page 5 when page 5 button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-pagination page="3" pages="50" />
+      <va-pagination page="3" pages="50" uswds="false"/>
     `);
     const onPageSelectSpy = await page.spyOnEvent('pageSelect');
     const page5Button = await page.find(
@@ -134,7 +134,7 @@ describe('va-pagination', () => {
   it('should focus prev button when pressing tab inside component', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-pagination page="3" pages="50" />
+      <va-pagination page="3" pages="50" uswds="false"/>
     `);
 
     const component = await page.find('va-pagination');
@@ -147,7 +147,7 @@ describe('va-pagination', () => {
   it('should tab to prev button and select it using the enter key', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-pagination page="3" pages="50" />
+    <va-pagination page="3" pages="50" uswds="false"/>
     `);
     const onPageSelectSpy = await page.spyOnEvent('pageSelect');
     const component = await page.find('va-pagination');
@@ -159,7 +159,7 @@ describe('va-pagination', () => {
   it('should set aria-current to selected page', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-pagination page="3" pages="50" />
+    <va-pagination page="3" pages="50" uswds="false"/>
     `);
 
     const activeButton = await page.find(
@@ -172,7 +172,7 @@ describe('va-pagination', () => {
   it('show the last page if enabled and there are more pages than max', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-pagination page="3" pages="50" show-last-page />
+    <va-pagination page="3" pages="50" show-last-page uswds="false"/>
     `);
 
     const lastPageButton = await page.find(
@@ -185,7 +185,7 @@ describe('va-pagination', () => {
   it('fires an analytics event when a page number is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-pagination page="2" pages="5" />',
+      '<va-pagination page="2" pages="5" uswds="false"/>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -206,7 +206,7 @@ describe('va-pagination', () => {
   it('fires an analytics event the previous button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-pagination page="2" pages="5" />',
+      '<va-pagination page="2" pages="5" uswds="false"/>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -227,7 +227,7 @@ describe('va-pagination', () => {
   it('fires an analytics event the next button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-pagination page="2" pages="5" />',
+      '<va-pagination page="2" pages="5" uswds="false"/>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -250,12 +250,12 @@ describe('va-pagination', () => {
 describe('uswds - va-pagination', () => {
   it('uswds renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-pagination page="1" pages="3" uswds />');
+    await page.setContent('<va-pagination page="1" pages="3" />');
 
     const element = await page.find('va-pagination');
 
     expect(element).toEqualHtml(`
-      <va-pagination page="1" pages="3" uswds class="hydrated">
+      <va-pagination page="1" pages="3" class="hydrated">
         <mock:shadow-root>
           <nav aria-label="Pagination" class="usa-pagination">
             <ul class="usa-pagination__list">
@@ -287,7 +287,7 @@ describe('uswds - va-pagination', () => {
 
   it('uswds v3 only selected "page" has selected class', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="1" pages="24" max-page-list-length="7" uswds/>`);
+    await page.setContent(`<va-pagination page="1" pages="24" max-page-list-length="7"/>`);
     const firstPage = await page.findAll('va-pagination >>> li.usa-pagination__page-no a.usa-pagination__button.usa-current');
     expect(firstPage.length).toEqual(1);
     expect(firstPage[0].innerHTML).toEqual("1");
@@ -295,7 +295,7 @@ describe('uswds - va-pagination', () => {
 
   it('uswds v3 renders first and last page with ellipses when middle pages do not contain them', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="10" pages="24" max-page-list-length="7" uswds/>`);
+    await page.setContent(`<va-pagination page="10" pages="24" max-page-list-length="7"/>`);
     const ellipses = await page.findAll('va-pagination >>> li.usa-pagination__overflow');
     expect(ellipses).toHaveLength(2);
 
@@ -306,21 +306,21 @@ describe('uswds - va-pagination', () => {
 
   it('uswds v3 does not render a "Next" button when on last page', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="24" pages="24" max-page-list-length="7" uswds/>`);
+    await page.setContent(`<va-pagination page="24" pages="24" max-page-list-length="7"/>`);
     const next = await page.find('va-pagination >>> a.usa-pagination__next-page');
     expect(next).toBeNull();
   });
 
   it('uswds v3 does not show last page number if unbounded flag is set', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="1" pages="24" max-page-list-length="7" unbounded uswds/>`);
+    await page.setContent(`<va-pagination page="1" pages="24" max-page-list-length="7" unbounded/>`);
     const pageNumbers = await page.findAll('va-pagination >>> li.usa-pagination__page-no a.usa-pagination__button');
     expect(pageNumbers[pageNumbers.length - 1].innerHTML).toEqual("6");
   });
 
   it('uswds v3 renders all page numbers if total pages is less than or equal to 7', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="3" pages="7" max-page-list-length="7" uswds/>`);
+    await page.setContent(`<va-pagination page="3" pages="7" max-page-list-length="7"/>`);
 
     const pageNumbers = [1, 2, 3, 4, 5, 6, 7];
 
@@ -334,7 +334,7 @@ describe('uswds - va-pagination', () => {
     // this is an edge case where even though it is set to 6 items, 7 items is the minimum needed to display everything needed
     // [first page] [second page] [third/previous page] [fourth/current page] [fifth/next page] [ellipsis] [last page]
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="4" pages="24" max-page-list-length="6" uswds/>`);
+    await page.setContent(`<va-pagination page="4" pages="24" max-page-list-length="6"/>`);
     const paginationItems = await page.findAll('va-pagination >>> li.usa-pagination__item');
 
     // should be 9, the 6 page items, one ellipsis and 2 prev/next buttons
@@ -344,7 +344,7 @@ describe('uswds - va-pagination', () => {
   it('uswds v3 renders an does not render an extra pagination item when the max-page-list-length is 6', async () => {
     // a check to make sure the above edge case doesn't 
     const page = await newE2EPage();
-    await page.setContent(`<va-pagination page="3" pages="24" max-page-list-length="6" uswds/>`);
+    await page.setContent(`<va-pagination page="3" pages="24" max-page-list-length="6"/>`);
     const paginationItems = await page.findAll('va-pagination >>> li.usa-pagination__item');
     // should be 8, 6 as set by the max-page-list-length, and 2 prev/next buttons
     expect(paginationItems).toHaveLength(8);
diff --git a/packages/web-components/src/components/va-pagination/va-pagination.scss b/packages/web-components/src/components/va-pagination/va-pagination.scss
index 96852a3da..380ff7396 100644
--- a/packages/web-components/src/components/va-pagination/va-pagination.scss
+++ b/packages/web-components/src/components/va-pagination/va-pagination.scss
@@ -10,7 +10,7 @@
   box-sizing: border-box;
 }
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   a.usa-pagination__next-page > div,
   a.usa-pagination__previous-page > div {
     display: flex;
diff --git a/packages/web-components/src/components/va-pagination/va-pagination.tsx b/packages/web-components/src/components/va-pagination/va-pagination.tsx
index 1dcfe9aaf..268353e32 100644
--- a/packages/web-components/src/components/va-pagination/va-pagination.tsx
+++ b/packages/web-components/src/components/va-pagination/va-pagination.tsx
@@ -91,9 +91,9 @@ export class VaPagination {
   @Prop() unbounded?: boolean = false;
 
   /**
-   * Whether or not the component will use USWDS v3 styling.
-   */
-  @Prop() uswds?: boolean = false;
+  * Whether or not the component will use USWDS v3 styling.
+  */
+  @Prop() uswds?: boolean = true;
 
   /**
    * If the page total is less than or equal to this limit, show all pages.
diff --git a/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts b/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
index 7a4665b85..67f7b6ee5 100644
--- a/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
+++ b/packages/web-components/src/components/va-privacy-agreement/test/va-privacy-agreement.e2e.ts
@@ -4,13 +4,13 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-privacy-agreement', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-privacy-agreement checked></va-privacy-agreement>');
+    await page.setContent('<va-privacy-agreement checked uswds="false"></va-privacy-agreement>');
 
     const element = await page.find('va-privacy-agreement');
     expect(element).toEqualHtml(`
-     <va-privacy-agreement checked="" class="hydrated">
+     <va-privacy-agreement checked="" class="hydrated" uswds="false">
        <mock:shadow-root>
-         <va-checkbox class="hydrated" id="checkbox">
+         <va-checkbox class="hydrated uswds-false" uswds="false" id="checkbox">
            <span class="description" slot="description">
              Please read and accept the
              <a href="/privacy-policy/" target="_blank">
@@ -29,7 +29,7 @@ describe('va-privacy-agreement', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-privacy-agreement checked="true" />',
+      '<va-privacy-agreement checked="true" uswds="false"/>',
     );
 
     await axeCheck(page);
@@ -39,7 +39,7 @@ describe('va-privacy-agreement', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-privacy-agreement checked />',
+      '<va-privacy-agreement checked uswds="false"/>',
     );
 
     const vaCheckbox = await page.find('va-privacy-agreement >>> va-checkbox');
@@ -52,7 +52,7 @@ describe('va-privacy-agreement', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-privacy-agreement />',
+      '<va-privacy-agreement uswds="false"/>',
     );
 
     const vaCheckbox = await page.find('va-privacy-agreement >>> va-checkbox');
@@ -68,7 +68,7 @@ describe('va-privacy-agreement', () => {
   it.skip('emits the vaChange event', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-privacy-agreement />',
+      '<va-privacy-agreement uswds="false"/>',
     );
     const changeSpy = await page.spyOnEvent('vaChange');
     const input = (
@@ -87,7 +87,7 @@ describe('va-privacy-agreement', () => {
   it.skip('fires analytics event when enableAnalytics prop is set', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-privacy-agreement enable-analytics />',
+      '<va-privacy-agreement enable-analytics uswds="false"/>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const input = (
@@ -144,7 +144,7 @@ describe('va-privacy-agreement', () => {
 
   it('displays an error message when `showError` is defined', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-privacy-agreement show-error />');
+    await page.setContent('<va-privacy-agreement show-error uswds="false"/>');
 
     const checkbox = await page.find('va-privacy-agreement >>> va-checkbox');
 
diff --git a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss
index 7d4f0c177..d29bc15b2 100644
--- a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss
+++ b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.scss
@@ -12,7 +12,7 @@ va-checkbox::part(checkbox) {
 }
 
 // Using Source Sans Pro normalization for v3. The base font size for v3 is 16px, which has been normalized to 16.96px
-:host([uswds]:not([uswds='false'])) .description {
+:host(:not([uswds='false'])) .description {
   font-size: 1.06 * $v3-font-base-size;
 }
 
diff --git a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
index 5ef87a1a9..66a6908c4 100644
--- a/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
+++ b/packages/web-components/src/components/va-privacy-agreement/va-privacy-agreement.tsx
@@ -24,7 +24,7 @@ export class VaPrivacyAgreement {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
   /**
    * Emit component-library-analytics events on the blur event.
    */
@@ -71,10 +71,15 @@ export class VaPrivacyAgreement {
     const labelClass = classnames({
       'usa-label--error': this.showError && this.uswds
     });
+
+    const uswdsFalse = classnames({
+      'uswds-false': !this.uswds
+    });
     
       return (
         <Host>
           <va-checkbox
+            class={uswdsFalse}
             uswds={this.uswds}
             required
             error={this.errorMessage()}
diff --git a/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts b/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
index 76adbf36d..8e9442f0f 100644
--- a/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
+++ b/packages/web-components/src/components/va-process-list/test/va-process-list.e2e.ts
@@ -5,7 +5,7 @@ describe('va-process-list', () => {
   it('renders slotted nodes into an ordered list', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-process-list>
+      <va-process-list uswds="false">
         <li>
           <h2>Step one</h2>
           <p>Some content</p>
@@ -23,7 +23,7 @@ describe('va-process-list', () => {
 
     const element = await page.find('va-process-list');
     expect(element).toEqualHtml(`
-      <va-process-list class="hydrated">
+      <va-process-list class="hydrated" uswds="false">
         <mock:shadow-root>
           <ol role="list">
             <slot></slot>
@@ -48,7 +48,7 @@ describe('va-process-list', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-process-list>
+        <va-process-list uswds="false">
           <li>One</li>
           <li>Two</li>
           <li>Three</li>
@@ -81,7 +81,7 @@ describe('va-process-list', () => {
   it('v3 uswds renders slotted nodes into an ordered list', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-process-list uswds>
+      <va-process-list>
         <va-process-list-item header="Step one">
           <p>Some content</p>
         </va-process-list-item>
@@ -97,7 +97,7 @@ describe('va-process-list', () => {
 
     const element = await page.find('va-process-list');
     expect(element).toEqualHtml(`
-      <va-process-list class="hydrated " uswds class="hydrated">
+      <va-process-list class="hydrated" class="hydrated">
         <mock:shadow-root>
           <ol class="usa-process-list" role="list">
             <slot></slot>
diff --git a/packages/web-components/src/components/va-process-list/va-process-list.scss b/packages/web-components/src/components/va-process-list/va-process-list.scss
index 3ebe5f80e..8bfebe488 100644
--- a/packages/web-components/src/components/va-process-list/va-process-list.scss
+++ b/packages/web-components/src/components/va-process-list/va-process-list.scss
@@ -5,7 +5,7 @@
 @import '../../global/formation_overrides';
 
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   counter-reset: usa-numbered-list;
 }
 
diff --git a/packages/web-components/src/components/va-process-list/va-process-list.tsx b/packages/web-components/src/components/va-process-list/va-process-list.tsx
index 9ab5d44f9..25007ecc7 100644
--- a/packages/web-components/src/components/va-process-list/va-process-list.tsx
+++ b/packages/web-components/src/components/va-process-list/va-process-list.tsx
@@ -19,7 +19,7 @@ export class VaProcessList {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false
+  @Prop() uswds?: boolean = true
 
   render() {
     const { uswds } = this;
diff --git a/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts b/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts
index 8461ebafc..3cf4a0d0a 100644
--- a/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts
+++ b/packages/web-components/src/components/va-radio-option/test/va-radio-option.e2e.ts
@@ -3,7 +3,7 @@ import { newE2EPage } from '@stencil/core/testing';
 describe('va-radio-option', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio-option></va-radio-option>');
+    await page.setContent('<va-radio-option uswds="false"></va-radio-option>');
 
     const element = await page.find('va-radio-option');
     expect(element).toHaveClass('hydrated');
@@ -11,11 +11,11 @@ describe('va-radio-option', () => {
 
   it('inserts and parses optional props and attributes correctly', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2"></va-radio-option>');
+    await page.setContent('<va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2" uswds="false"></va-radio-option>');
 
     const element = await page.find('va-radio-option');
     expect(element).toEqualHtml(`
-    <va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2" aria-checked="false" class="hydrated">
+    <va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2" aria-checked="false" class="hydrated" uswds="false">
       <input id="yes2input" name="yes" type="radio" value="2">
       <label for="yes2input">
         <span>Yes - Any Veteran</span>
@@ -27,7 +27,7 @@ describe('va-radio-option', () => {
   it('sets the ID based on the name and value, if not passed as a prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option name="test" label="An option with spaces" value="1"></va-radio-option>',
+      '<va-radio-option name="test" label="An option with spaces" value="1" uswds="false"></va-radio-option>',
     );
 
     const option = await page.find('va-radio-option'),
@@ -39,7 +39,7 @@ describe('va-radio-option', () => {
   it('sets checked to true based on prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option checked label="An option"></va-radio-option>',
+      '<va-radio-option checked label="An option" uswds="false"></va-radio-option>',
     );
 
     const inputEl = await page.find('va-radio-option');
@@ -50,7 +50,7 @@ describe('va-radio-option', () => {
   it('fires event for parent when changed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option checked aria-describedby="test" label="A label" value="something" />',
+      '<va-radio-option checked aria-describedby="test" label="A label" value="something" uswds="false"/>',
     );
 
     const changeSpy = await page.spyOnEvent('radioOptionSelected');
@@ -64,7 +64,7 @@ describe('va-radio-option', () => {
 
   it('displays an option description', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio-option description="Some description text"></va-radio-option>');
+    await page.setContent('<va-radio-option description="Some description text" uswds="false"></va-radio-option>');
 
     const description = await page.find('va-radio-option .description');
     expect(description.textContent).toEqual("Some description text");
@@ -76,7 +76,7 @@ describe('va-radio-option', () => {
 
   it('uswds v3 renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio-option uswds></va-radio-option>');
+    await page.setContent('<va-radio-option></va-radio-option>');
 
     const element = await page.find('va-radio-option');
     expect(element).toHaveClass('hydrated');
@@ -84,11 +84,11 @@ describe('va-radio-option', () => {
 
   it('uswds v3 inserts and parses optional props and attributes correctly', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio-option uswds id="yes2" label="Yes - Any Veteran" name="yes" value="2"></va-radio-option>');
+    await page.setContent('<va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2"></va-radio-option>');
 
     const element = await page.find('va-radio-option');
     expect(element).toEqualHtml(`
-    <va-radio-option uswds="" id="yes2" label="Yes - Any Veteran" name="yes" value="2" class="hydrated">
+    <va-radio-option id="yes2" label="Yes - Any Veteran" name="yes" value="2" class="hydrated">
         <div class="usa-radio">
           <input class="usa-radio__input" id="yes2input" type="radio" name="yes" value="2">
           <label class="usa-radio__label" for="yes2input">
@@ -102,7 +102,7 @@ describe('va-radio-option', () => {
   it('uswds v3 sets the ID based on the name and value, if not passed as a prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option uswds name="test" label="An option with spaces" value="1"></va-radio-option>',
+      '<va-radio-option name="test" label="An option with spaces" value="1"></va-radio-option>',
     );
 
     const inputEl = await page.find('va-radio-option input');
@@ -113,7 +113,7 @@ describe('va-radio-option', () => {
   it('uswds v3 sets checked to true based on prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option uswds checked label="An option"></va-radio-option>',
+      '<va-radio-option checked label="An option"></va-radio-option>',
     );
 
     const inputEl = await page.find('va-radio-option');
@@ -124,7 +124,7 @@ describe('va-radio-option', () => {
   it('uswds v3 fires event for parent when changed', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option uswds checked aria-describedby="test" label="A label" value="something" />',
+      '<va-radio-option checked aria-describedby="test" label="A label" value="something" />',
     );
 
     const changeSpy = await page.spyOnEvent('radioOptionSelected');
@@ -137,7 +137,7 @@ describe('va-radio-option', () => {
   it('uswds v3 displays description text', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-radio-option uswds checked aria-describedby="test" label="A label" value="something" description="Example description" />',
+      '<va-radio-option checked aria-describedby="test" label="A label" value="something" description="Example description" />',
     );
 
     const description = await page.find('va-radio-option .usa-radio__label-description');
diff --git a/packages/web-components/src/components/va-radio-option/va-radio-option.scss b/packages/web-components/src/components/va-radio-option/va-radio-option.scss
index 2d076ea51..0b396aa41 100644
--- a/packages/web-components/src/components/va-radio-option/va-radio-option.scss
+++ b/packages/web-components/src/components/va-radio-option/va-radio-option.scss
@@ -48,7 +48,7 @@ va-radio-option input[disabled='true']:focus + label.usa-radio__label::before {
 
 /* Original Components Styles. */
 
-va-radio-option:not([uswds='true'], [uswds='']) {
+va-radio-option[uswds='false'] {
   margin-top: 1rem;
   input {
     appearance: none;
@@ -82,28 +82,28 @@ va-radio-option:not([uswds='true'], [uswds='']) {
   }
 }
 
-va-radio-option:not([uswds="true"],[uswds=""])[aria-checked='true'] label::before {
+va-radio-option[uswds='false'][aria-checked='true'] label::before {
   background-color: var(--color-primary);
   box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
 }
 
-va-radio-option:not([uswds="true"],[uswds=""]):focus label::before {
+va-radio-option[uswds='false']:focus label::before {
   outline: 2px solid var(--color-gold-light);
   outline-offset: 6px;
 }
 
-va-radio-option:not([uswds="true"],[uswds=""]) .description {
+va-radio-option[uswds='false'] .description {
   display: block;
   margin-top: 5px;
 }
 
-va-radio-option:not([uswds="true"],[uswds=""])[tile='true'] label {
+va-radio-option[uswds='false'][tile='true'] label {
   padding: 12px 16px 12px 12px;
   border: 2px solid var(--color-gray-light);
   border-radius: 0.25em;
 }
 
-va-radio-option:not([uswds="true"],[uswds=""])[tile='true'][aria-checked='true'] label {
+va-radio-option[uswds='false'][tile='true'][aria-checked='true'] label {
   border: 2px solid var(--color-primary-alt-darkest);
   background: var(--color-gray-cool-light);
 }
diff --git a/packages/web-components/src/components/va-radio-option/va-radio-option.tsx b/packages/web-components/src/components/va-radio-option/va-radio-option.tsx
index 3647adad0..dd175e566 100644
--- a/packages/web-components/src/components/va-radio-option/va-radio-option.tsx
+++ b/packages/web-components/src/components/va-radio-option/va-radio-option.tsx
@@ -40,7 +40,7 @@ export class VaRadioOption {
   /**
    * Whether or not the component will use USWDS v3. styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Whether or not the component will display as a tile. Available when uswds is true.
diff --git a/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts b/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts
index 07c9ca0b7..fe881ea9b 100644
--- a/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts
+++ b/packages/web-components/src/components/va-radio/test/va-radio.e2e.ts
@@ -4,7 +4,7 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-radio', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio></va-radio>');
+    await page.setContent('<va-radio uswds="false"></va-radio>');
 
     const element = await page.find('va-radio');
     expect(element).toHaveClass('hydrated');
@@ -12,7 +12,7 @@ describe('va-radio', () => {
 
   it('overrides the aria-label on the host element', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing" aria-label="my label"></va-radio>');
+    await page.setContent('<va-radio label="Testing" aria-label="my label" uswds="false"></va-radio>');
 
     const element = await page.find('va-radio');
     expect(element.getAttribute('aria-label')).not.toEqual('my label');
@@ -20,7 +20,7 @@ describe('va-radio', () => {
 
   it('set the aria-label to match the label prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing"></va-radio>');
+    await page.setContent('<va-radio label="Testing" uswds="false"></va-radio>');
 
     const element = await page.find('va-radio');
     expect(element.getAttribute('aria-label')).toEqual('Testing');
@@ -28,7 +28,7 @@ describe('va-radio', () => {
 
   it('appends "required" to the aria-label', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing" required></va-radio>');
+    await page.setContent('<va-radio label="Testing" required uswds="false"></va-radio>');
 
     const element = await page.find('va-radio');
     expect(element.getAttribute('aria-label')).toEqual('Testing required');
@@ -38,10 +38,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio hint="Hint text">
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio hint="Hint text" uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -53,15 +53,15 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
-      <va-radio>
-        <va-radio-option checked id="RadioOption1" label="Option 1" value="1"></va-radio-option>
-        <va-radio-option id="RadioOption2" label="Option 2" value="2"></va-radio-option>
-        <va-radio-option id="RadioOption3" label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked id="RadioOption1" label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option id="RadioOption2" label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option id="RadioOption3" label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -73,10 +73,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -97,7 +97,7 @@ describe('va-radio', () => {
 
   it('renders hint text if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio hint="Some hint text"></va-radio>');
+    await page.setContent('<va-radio hint="Some hint text" uswds="false"></va-radio>');
 
     const hint = await page.find('va-radio >>> .hint-text');
     expect(hint.textContent).toEqual("Some hint text");
@@ -105,7 +105,7 @@ describe('va-radio', () => {
 
   it('renders H3 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing H3" label-header-level="3"></va-radio>');
+    await page.setContent('<va-radio label="Testing H3" label-header-level="3" uswds="false"></va-radio>');
 
     const legend = await page.find('va-radio >>> legend');
     expect(legend).toEqualHtml(`
@@ -117,7 +117,7 @@ describe('va-radio', () => {
 
   it('renders H5 header in legend if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing H5" label-header-level="5" required></va-radio>');
+    await page.setContent('<va-radio label="Testing H5" label-header-level="5" required uswds="false"></va-radio>');
 
     const legend = await page.find('va-radio >>> legend');
     expect(legend).toEqualHtml(`
@@ -132,7 +132,7 @@ describe('va-radio', () => {
 
   it('renders legend text and ignores adding a header if an invalid level is included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio label="Testing" label-header-level="7" required></va-radio>');
+    await page.setContent('<va-radio label="Testing" label-header-level="7" required uswds="false"></va-radio>');
 
     const legend = await page.find('va-radio >>> legend');
     expect(legend).toEqualHtml(`
@@ -147,7 +147,7 @@ describe('va-radio', () => {
 
   it('renders an error message if passed', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio error="This is an error"></va-radio>');
+    await page.setContent('<va-radio error="This is an error" uswds="false"></va-radio>');
 
     const element = await page.find('va-radio');
     const errorElement = await page.find('va-radio >>> #error-message');
@@ -164,7 +164,7 @@ describe('va-radio', () => {
 
   it('renders a required span based on prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio required></va-radio>');
+    await page.setContent('<va-radio required uswds="false"></va-radio>');
 
     const element = await page.find('va-radio >>> .required');
     expect(element).toEqualHtml(`
@@ -177,8 +177,8 @@ describe('va-radio', () => {
   it('fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio label="Regular label" enable-analytics>
-        <va-radio-option label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label" enable-analytics uswds="false">
+        <va-radio-option label="First option" value="one" uswds="false"></va-radio-option>
       </va-radio>
       `);
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -201,8 +201,8 @@ describe('va-radio', () => {
   it("doesn't fire an analytics event when enableAnalytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio label="Regular label">
-        <va-radio-option label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label" uswds="false">
+        <va-radio-option label="First option" value="one" uswds="false"></va-radio-option>
       </va-radio>
       `);
 
@@ -217,8 +217,8 @@ describe('va-radio', () => {
   it('fires a vaValueChange event when the checked value changes', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio label="Regular label">
-        <va-radio-option label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label" uswds="false">
+        <va-radio-option label="First option" value="one" uswds="false"></va-radio-option>
       </va-radio>
       `);
 
@@ -234,8 +234,8 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option label="Option 1" value="1"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option label="Option 1" value="1" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -250,10 +250,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -268,10 +268,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -286,10 +286,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -304,10 +304,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
-        <va-radio-option label="Option 3" value="3"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 3" value="3" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -322,9 +322,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -339,9 +339,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -356,9 +356,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option label="Option 2" value="2"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option checked label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option label="Option 2" value="2" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -373,9 +373,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio>
-        <va-radio-option label="Option 1" value="1"></va-radio-option>
-        <va-radio-option checked label="Option 2" value="2"></va-radio-option>
+      <va-radio uswds="false">
+        <va-radio-option label="Option 1" value="1" uswds="false"></va-radio-option>
+        <va-radio-option checked label="Option 2" value="2" uswds="false"></va-radio-option>
       </va-radio>
     `,
     );
@@ -390,7 +390,7 @@ describe('va-radio', () => {
 
   it('uswds version renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio uswds></va-radio>');
+    await page.setContent('<va-radio></va-radio>');
 
     const element = await page.find('va-radio');
     expect(element).toHaveClass('hydrated');
@@ -400,10 +400,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds hint="Hint text" label="Example">
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio hint="Hint text" label="Example">
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -415,15 +415,15 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
-      <va-radio uswds>
-        <va-radio-option uswds checked id="RadioOption1" label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds id="RadioOption2" label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds id="RadioOption3" label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked id="RadioOption1" label="Option 1" value="1"></va-radio-option>
+        <va-radio-option id="RadioOption2" label="Option 2" value="2"></va-radio-option>
+        <va-radio-option id="RadioOption3" label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -435,10 +435,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -459,7 +459,7 @@ describe('va-radio', () => {
 
   it('uswds version renders hint text if included', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio uswds hint="Some hint text"></va-radio>');
+    await page.setContent('<va-radio hint="Some hint text"></va-radio>');
 
     const hint = await page.find('va-radio >>> .usa-hint');
     expect(hint.textContent).toEqual("Some hint text");
@@ -467,7 +467,7 @@ describe('va-radio', () => {
 
   it('uswds version renders an error message if passed', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio uswds error="This is an error"></va-radio>');
+    await page.setContent('<va-radio error="This is an error"></va-radio>');
 
     const element = await page.find('va-radio');
     const errorElement = await page.find('va-radio >>> .usa-error-message');
@@ -484,7 +484,7 @@ describe('va-radio', () => {
 
   it('uswds version renders a required span based on prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-radio uswds required></va-radio>');
+    await page.setContent('<va-radio required></va-radio>');
 
     const element = await page.find('va-radio >>> .usa-label--required');
     expect(element).toEqualHtml(`
@@ -497,8 +497,8 @@ describe('va-radio', () => {
   it('uswds version fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio uswds label="Regular label" enable-analytics>
-        <va-radio-option uswds label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label" enable-analytics>
+        <va-radio-option label="First option" value="one"></va-radio-option>
       </va-radio>
       `);
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -522,8 +522,8 @@ describe('va-radio', () => {
   it("uswds version doesn't fire an analytics event when enableAnalytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio uswds label="Regular label">
-        <va-radio-option uswds label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label">
+        <va-radio-option label="First option" value="one"></va-radio-option>
       </va-radio>
       `);
 
@@ -537,8 +537,8 @@ describe('va-radio', () => {
   it('uswds version fires a vaValueChange event when the checked value changes', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio uswds label="Regular label">
-        <va-radio-option uswds label="First option" value="one"></va-radio-option>
+      <va-radio label="Regular label">
+        <va-radio-option label="First option" value="one"></va-radio-option>
       </va-radio>
       `);
 
@@ -556,8 +556,8 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds label="Option 1" value="1"></va-radio-option>
+      <va-radio>
+        <va-radio-option label="Option 1" value="1"></va-radio-option>
       </va-radio>
     `,
     );
@@ -572,10 +572,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -590,10 +590,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -609,10 +609,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -627,10 +627,10 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
-        <va-radio-option uswds label="Option 3" value="3"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
+        <va-radio-option label="Option 3" value="3"></va-radio-option>
       </va-radio>
     `,
     );
@@ -645,9 +645,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
       </va-radio>
     `,
     );
@@ -662,9 +662,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
       </va-radio>
     `,
     );
@@ -679,9 +679,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds checked label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds label="Option 2" value="2"></va-radio-option>
+      <va-radio>
+        <va-radio-option checked label="Option 1" value="1"></va-radio-option>
+        <va-radio-option label="Option 2" value="2"></va-radio-option>
       </va-radio>
     `,
     );
@@ -696,9 +696,9 @@ describe('va-radio', () => {
     const page = await newE2EPage();
     await page.setContent(
       `
-      <va-radio uswds>
-        <va-radio-option uswds label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds checked label="Option 2" value="2"></va-radio-option>
+      <va-radio>
+        <va-radio-option label="Option 1" value="1"></va-radio-option>
+        <va-radio-option checked label="Option 2" value="2"></va-radio-option>
       </va-radio>
     `,
     );
@@ -712,9 +712,9 @@ describe('va-radio', () => {
   it('uswds useFormsPattern displays header for the single field pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-radio label="This is a label" uswds use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
-        <va-radio-option uswds label="Option 1" value="1"></va-radio-option>
-        <va-radio-option uswds checked label="Option 2" value="2"></va-radio-option>
+      <va-radio label="This is a label" use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
+        <va-radio-option label="Option 1" value="1"></va-radio-option>
+        <va-radio-option checked label="Option 2" value="2"></va-radio-option>
       </va-radio>
       `);
 
@@ -725,9 +725,9 @@ describe('va-radio', () => {
   it('uswds useFormsPattern displays header for the multiple fields pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-radio label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
-      <va-radio-option uswds label="Option 1" value="1"></va-radio-option>
-      <va-radio-option uswds checked label="Option 2" value="2"></va-radio-option>
+    <va-radio label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
+      <va-radio-option label="Option 1" value="1"></va-radio-option>
+      <va-radio-option checked label="Option 2" value="2"></va-radio-option>
     </va-radio>
     `);
 
@@ -738,9 +738,9 @@ describe('va-radio', () => {
   it('uswds useFormsPattern passes an aXe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-radio label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
-      <va-radio-option uswds label="Option 1" value="1"></va-radio-option>
-      <va-radio-option uswds checked label="Option 2" value="2"></va-radio-option>
+    <va-radio label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description">
+      <va-radio-option label="Option 1" value="1"></va-radio-option>
+      <va-radio-option checked label="Option 2" value="2"></va-radio-option>
     </va-radio>
     `);
 
diff --git a/packages/web-components/src/components/va-radio/va-radio.scss b/packages/web-components/src/components/va-radio/va-radio.scss
index d846eb93c..e946690ce 100644
--- a/packages/web-components/src/components/va-radio/va-radio.scss
+++ b/packages/web-components/src/components/va-radio/va-radio.scss
@@ -19,7 +19,7 @@
   padding: 0;
 }
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   margin-top: 24px;
 }
 
@@ -35,13 +35,13 @@
   margin: 0 0.35rem;
 }
 
-:host(:not([uswds="true"],[uswds=""])) fieldset {
+:host([uswds='false']) fieldset {
   border: none;
   margin: 0;
   padding: 0;
 }
 
-:host(:not([uswds="true"],[uswds=""])) legend {
+:host([uswds='false']) legend {
   display: block;
   max-width: 46rem;
   font-weight: inherit;
diff --git a/packages/web-components/src/components/va-radio/va-radio.tsx b/packages/web-components/src/components/va-radio/va-radio.tsx
index 8806a21ca..b94af3e43 100644
--- a/packages/web-components/src/components/va-radio/va-radio.tsx
+++ b/packages/web-components/src/components/va-radio/va-radio.tsx
@@ -69,7 +69,7 @@ export class VaRadio {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-   @Prop() uswds?: boolean = false;
+   @Prop() uswds?: boolean = true;
 
   /**
    * Insert a header with defined level inside the label (legend)
diff --git a/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts b/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts
index 82d396e98..64f275eb7 100644
--- a/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts
+++ b/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts
@@ -4,7 +4,7 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('va-search-input', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     const element = await page.find('va-search-input');
     expect(element).toHaveClass('hydrated');
@@ -12,14 +12,14 @@ describe('va-search-input', () => {
 
   it('passes an axe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await axeCheck(page);
   });
 
   it('passes an axe check with suggestions visible', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-search-input></va-search-input>`);
+    await page.setContent(`<va-search-input uswds="false"></va-search-input>`);
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -38,12 +38,12 @@ describe('va-search-input', () => {
   it('renders with button with text', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-search-input button-text="Search VA.gov"></va-search-input>',
+      '<va-search-input button-text="Search VA.gov" uswds="false"></va-search-input>',
     );
 
     const element = await page.find('va-search-input');
     expect(element).toEqualHtml(`
-      <va-search-input button-text="Search VA.gov" class="hydrated" value="">
+      <va-search-input button-text="Search VA.gov" class="hydrated" value="" uswds="false">
         <mock:shadow-root>
           <input aria-autocomplete="none" aria-label="Search" autocomplete="off" id="va-search-input" type="text">
           <button aria-label="Search" id="va-search-button" type="submit">
@@ -59,7 +59,7 @@ describe('va-search-input', () => {
 
   it('fires input event on key press', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     const inputSpy = await page.spyOnEvent('input');
     const input = await page.find('va-search-input >>> input');
@@ -76,7 +76,7 @@ describe('va-search-input', () => {
 
   it('fires submit event on search button click when input has a value', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -91,7 +91,7 @@ describe('va-search-input', () => {
 
   it('focuses first suggestion when pressing ArrowDown inside input field', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -120,7 +120,7 @@ describe('va-search-input', () => {
 
   it('focuses last suggestion when pressing ArrowUp inside input field', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -147,7 +147,7 @@ describe('va-search-input', () => {
 
   it('clears input value when pressing Escape key inside input field', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -172,7 +172,7 @@ describe('va-search-input', () => {
 
   it('focuses next suggestion when pressing ArrowDown when suggestions are visible', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -203,7 +203,7 @@ describe('va-search-input', () => {
 
   it('focuses last suggestion when pressing ArrowUp with first suggestion selected', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -234,7 +234,7 @@ describe('va-search-input', () => {
 
   it('sets input value to suggestion when pressing Enter key with suggestion focused', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -263,7 +263,7 @@ describe('va-search-input', () => {
 
   it('clears input value when pressing Escape key with a suggestion focused', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -292,7 +292,7 @@ describe('va-search-input', () => {
 
   it('fires submit event when enter key is pressed', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     const submitSpy = await page.spyOnEvent('submit');
     const input = await page.find('va-search-input >>> input');
@@ -310,7 +310,7 @@ describe('va-search-input', () => {
 
   it('fires submit event when a suggestion is clicked', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -335,7 +335,7 @@ describe('va-search-input', () => {
 
   it('displays up to 5 suggestions but not more', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-search-input></va-search-input>');
+    await page.setContent('<va-search-input uswds="false"></va-search-input>');
 
     await page.$eval('va-search-input', (elm: any) => {
       elm.value = 'benefits';
@@ -363,7 +363,7 @@ describe('va-search-input', () => {
   it('fires an analytics event when button is clicked', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-search-input label="Search" value="benefits""></va-search-input>',
+      '<va-search-input label="Search" value="benefits"" uswds="false"></va-search-input>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -383,7 +383,7 @@ describe('va-search-input', () => {
   it('fires an analytics event on blur', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-search-input label="Search" value="benefits""></va-search-input>',
+      '<va-search-input label="Search" value="benefits"" uswds="false"></va-search-input>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
diff --git a/packages/web-components/src/components/va-search-input/va-search-input.scss b/packages/web-components/src/components/va-search-input/va-search-input.scss
index 747bceb0a..29cf5fcb4 100644
--- a/packages/web-components/src/components/va-search-input/va-search-input.scss
+++ b/packages/web-components/src/components/va-search-input/va-search-input.scss
@@ -13,16 +13,16 @@
   padding: 0;
 }
 
-:host([uswds]:not([uswds='false'])) .usa-input {
+:host(:not([uswds='false'])) .usa-input {
   margin-top: 0;
 }
 
-:host([uswds]:not([uswds='false'])) #va-search-listbox {
+:host(:not([uswds='false'])) #va-search-listbox {
   top: 37px;
   z-index: 1;
 }
 
-:host([uswds]:not([uswds='false'])[big="true"]) #va-search-listbox  {
+:host(:not([uswds='false'])[big="true"]) #va-search-listbox  {
   top: 52px;
 }
 
@@ -41,7 +41,7 @@
 @import '../../mixins/inputs.css';
 @import '../../mixins/buttons.css';
 
-:host(:not([uswds="true"],[uswds=""])) {
+:host([uswds='false']) {
   display: block;
   align-items: center;
   display: flex;
diff --git a/packages/web-components/src/components/va-search-input/va-search-input.tsx b/packages/web-components/src/components/va-search-input/va-search-input.tsx
index 77db6c902..f8b7e6273 100644
--- a/packages/web-components/src/components/va-search-input/va-search-input.tsx
+++ b/packages/web-components/src/components/va-search-input/va-search-input.tsx
@@ -76,7 +76,7 @@ export class VaSearchInput {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * If `true`, the component will use the big variant. Only available when `uswds` is `true`.
diff --git a/packages/web-components/src/components/va-segmented-progress-bar/test/va-segmented-progress-bar.e2e.ts b/packages/web-components/src/components/va-segmented-progress-bar/test/va-segmented-progress-bar.e2e.ts
index d438f1ff6..1a062a874 100644
--- a/packages/web-components/src/components/va-segmented-progress-bar/test/va-segmented-progress-bar.e2e.ts
+++ b/packages/web-components/src/components/va-segmented-progress-bar/test/va-segmented-progress-bar.e2e.ts
@@ -4,11 +4,11 @@ import { axeCheck } from '../../../testing/test-helpers';
 describe('v1 va-segmented-progress-bar', () => {
   it('renders', async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" uswds="false"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     expect(element).toEqualHtml(`
-      <va-segmented-progress-bar class="hydrated" current="3" total="6">
+      <va-segmented-progress-bar class="hydrated" current="3" total="6" uswds="false">
         <mock:shadow-root>
           <div>
             <div
@@ -36,7 +36,7 @@ describe('v1 va-segmented-progress-bar', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar current="3" total="6"></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar current="3" total="6" uswds="false"></va-segmented-progress-bar>',
     );
     await axeCheck(page);
   });
@@ -44,7 +44,7 @@ describe('v1 va-segmented-progress-bar', () => {
   it('it should update the aria label based on changed ariaLabel prop', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar current="3" total="6" label="E2E Test"></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar current="3" total="6" label="E2E Test" uswds="false"></va-segmented-progress-bar>',
     );
     const label = await page.find(
       'va-segmented-progress-bar >>> div.progress-bar-segmented',
@@ -55,7 +55,7 @@ describe('v1 va-segmented-progress-bar', () => {
   it('fires an analytics event when the component is mounted', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar enable-analytics></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar enable-analytics uswds="false"></va-segmented-progress-bar>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     await page.$eval('va-segmented-progress-bar', (element: any) => {
@@ -76,7 +76,7 @@ describe('v1 va-segmented-progress-bar', () => {
   it("doesn't fire an analytics event when enable-analytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar current="3" total="6" aria-label="E2E Test"></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar current="3" total="6" aria-label="E2E Test" uswds="false"></va-segmented-progress-bar>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     expect(analyticsSpy).not.toHaveReceivedEvent();
@@ -88,11 +88,11 @@ describe('v1 va-segmented-progress-bar', () => {
 describe('v3 va-segmented-progress-bar', () => {
   it('uswds - renders', async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     expect(element).toEqualHtml(`
-      <va-segmented-progress-bar class=\"hydrated\" current=\"3\" total=\"6\" uswds=\"\">
+      <va-segmented-progress-bar class=\"hydrated\" current=\"3\" total=\"6\">
         <mock:shadow-root>
           <div class=\"usa-step-indicator\">
             <ol aria-hidden=\"true\" class=\"usa-step-indicator__segments\">
@@ -128,7 +128,7 @@ describe('v3 va-segmented-progress-bar', () => {
   it('uswds - passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar current="3" total="6" uswds></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar current="3" total="6"></va-segmented-progress-bar>',
     );
     await axeCheck(page);
   });
@@ -136,7 +136,7 @@ describe('v3 va-segmented-progress-bar', () => {
   it('uswds - fires an analytics event when the component is mounted', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar enable-analytics uswds></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar enable-analytics></va-segmented-progress-bar>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     await page.$eval('va-segmented-progress-bar', (element: any) => {
@@ -157,7 +157,7 @@ describe('v3 va-segmented-progress-bar', () => {
   it("uswds - doesn't fire an analytics event when enable-analytics is false", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-segmented-progress-bar current="3" total="6" aria-label="E2E Test" uswds></va-segmented-progress-bar>',
+      '<va-segmented-progress-bar current="3" total="6" aria-label="E2E Test"></va-segmented-progress-bar>',
     );
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     expect(analyticsSpy).not.toHaveReceivedEvent();
@@ -165,7 +165,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render heading-text when labels are not provided", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds heading-text="My Header"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" heading-text="My Header"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const headerElement = element.shadowRoot.querySelector('span.usa-step-indicator__heading-text');
@@ -174,7 +174,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render label text for header when labels are provided", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds heading-text="My Header" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" heading-text="My Header" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const headerElement = element.shadowRoot.querySelector('span.usa-step-indicator__heading-text');
@@ -183,7 +183,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render labels when labels are provided", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds heading-text="My Header" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" heading-text="My Header" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const segments = element.shadowRoot.querySelector('ol.usa-step-indicator__segments');
@@ -192,7 +192,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render counter numbers when counters = 'default'", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" counters="default"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" counters="default"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const indicator = element.shadowRoot.querySelector('.usa-step-indicator');
@@ -201,7 +201,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render counter numbers when counters = 'small'", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" counters="small"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" counters="small"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const indicator = element.shadowRoot.querySelector('.usa-step-indicator');
@@ -210,7 +210,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render centered labels when 'centered-labels' is true", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds="true" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const indicator = element.shadowRoot.querySelector('.usa-step-indicator');
@@ -219,7 +219,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render correct header level when prop defined", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds="true" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" header-level="2"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" header-level="2"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const header = element.shadowRoot.querySelector('.usa-step-indicator__heading');
@@ -228,7 +228,7 @@ describe('v3 va-segmented-progress-bar', () => {
 
   it("uswds - should render correct progress text", async () => {
     const page = await newE2EPage({
-      html: '<va-segmented-progress-bar current="3" total="6" uswds="true" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" progress-term="Chapter"></va-segmented-progress-bar>',
+      html: '<va-segmented-progress-bar current="3" total="6" centered-labels="true" labels="Personal Information;Household Status;Supporting Documents;Signature;Review and Submit" progress-term="Chapter"></va-segmented-progress-bar>',
     });
     const element = await page.find('va-segmented-progress-bar');
     const counter = element.shadowRoot.querySelector('.usa-step-indicator__heading-counter .usa-sr-only');
diff --git a/packages/web-components/src/components/va-segmented-progress-bar/va-segmented-progress-bar.tsx b/packages/web-components/src/components/va-segmented-progress-bar/va-segmented-progress-bar.tsx
index 26b5b08b1..2c910f0cd 100644
--- a/packages/web-components/src/components/va-segmented-progress-bar/va-segmented-progress-bar.tsx
+++ b/packages/web-components/src/components/va-segmented-progress-bar/va-segmented-progress-bar.tsx
@@ -37,7 +37,7 @@ export class VaSegmentedProgressBar {
   /**
   * Whether or not the component will use USWDS v3 styling.
   */
-  @Prop() uswds?: boolean;
+  @Prop() uswds?: boolean = true;
 
   /**
   * Header level for button wrapper. Must be between 1 and 6 (v3 only)
diff --git a/packages/web-components/src/components/va-select/test/va-select.e2e.ts b/packages/web-components/src/components/va-select/test/va-select.e2e.ts
index 9e320c9e2..9f5f77c9f 100644
--- a/packages/web-components/src/components/va-select/test/va-select.e2e.ts
+++ b/packages/web-components/src/components/va-select/test/va-select.e2e.ts
@@ -5,7 +5,7 @@ describe('va-select', () => {
   it('renders', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select label="A label" value="bar">
+      <va-select label="A label" value="bar" uswds="false">
         <option value="">Please choose an option</option>
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
@@ -14,7 +14,7 @@ describe('va-select', () => {
     const element = await page.find('va-select');
 
     expect(element).toEqualHtml(`
-      <va-select label="A label" value="bar" class="hydrated">
+      <va-select label="A label" value="bar" class="hydrated" uswds="false">
         <mock:shadow-root>
           <label for="select" part="label">
             A label
@@ -36,7 +36,7 @@ describe('va-select', () => {
 
   it('renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-select error="This is a mistake" />');
+    await page.setContent('<va-select error="This is a mistake" uswds="false" />');
 
     // Render the error message text
     const error = await page.find('va-select >>> span#error-message');
@@ -47,7 +47,7 @@ describe('va-select', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-select hint="This is hint text" />');
+    await page.setContent('<va-select hint="This is hint text" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-select >>> span.hint-text');
@@ -56,7 +56,7 @@ describe('va-select', () => {
 
   it('sets aria-invalid based on invalid prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-select invalid />');
+    await page.setContent('<va-select invalid uswds="false"/>');
 
     const input = await page.find('va-select >>> select');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
@@ -65,7 +65,7 @@ describe('va-select', () => {
   it('changes its value prop when selected', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select value="bar">
+      <va-select value="bar" uswds="false">
         <option value="">Please choose an option</option>
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
@@ -86,7 +86,7 @@ describe('va-select', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-        <va-select label="A label">
+        <va-select label="A label" uswds="false">
           <option value="">Please select an option</option>
           <option value="foo">Foo</option>
           <option value="bar">Bar</option>
@@ -99,7 +99,7 @@ describe('va-select', () => {
   it('does not fire an analytics event without enable-enalytics prop', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select label="A label" value="foo">
+      <va-select label="A label" value="foo" uswds="false">
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
       </va-select>
@@ -117,7 +117,7 @@ describe('va-select', () => {
   it('fires an analytics event when the selected value changes', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select label="A label" value="foo" enable-analytics>
+      <va-select label="A label" value="foo" enable-analytics uswds="false">
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
       </va-select>
@@ -142,7 +142,7 @@ describe('va-select', () => {
   it('fires a custom event when the selected value changes', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select label="A label" value="foo" enable-analytics>
+      <va-select label="A label" value="foo" enable-analytics uswds="false">
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
       </va-select>
@@ -160,7 +160,7 @@ describe('va-select', () => {
   it('fires a custom event when a keydown happens in the select element', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-select label="A label" value="foo" enable-analytics>
+      <va-select label="A label" value="foo" enable-analytics uswds="false">
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
       </va-select>
@@ -181,7 +181,7 @@ describe('va-select', () => {
     const page = await newE2EPage();
 
     await page.setContent(`
-      <va-select label="A label" value="bar" uswds>
+      <va-select label="A label" value="bar">
         <option value="">Please choose an option</option>
         <option value="foo">Foo</option>
         <option value="bar">Bar</option>
@@ -190,7 +190,7 @@ describe('va-select', () => {
     const element = await page.find('va-select');
 
     expect(element).toEqualHtml(`
-      <va-select label="A label" uswds="" value="bar" class="hydrated">
+      <va-select label="A label" value="bar" uswds="" class="hydrated">
         <mock:shadow-root>
           <label class="usa-label" for="options" part="label">
             A label
diff --git a/packages/web-components/src/components/va-select/va-select.scss b/packages/web-components/src/components/va-select/va-select.scss
index 77aedef7b..f5e1c04d6 100644
--- a/packages/web-components/src/components/va-select/va-select.scss
+++ b/packages/web-components/src/components/va-select/va-select.scss
@@ -11,7 +11,7 @@
 @import '../../mixins/uswds-error-border.scss';
 @import '../../global/formation_overrides';
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   color: var(--color-base);
 }
 
@@ -20,7 +20,7 @@
   font-family: var(--font-source-sans);
 }
 
-:host([uswds]:not([uswds='false'])[inert]) select {
+:host(:not([uswds='false'])[inert]) select {
   border: 0;
   background: none;
 }
@@ -41,13 +41,13 @@ span.required {
   margin: 0 0.35em;
 }
 
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) label,
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) > span {
+:host([error]:not([error=''])[uswds='false']) label,
+:host([error]:not([error=''])[uswds='false']) > span {
   display: block;
   font-size: 1.6rem;
 }
 
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) > span {
+:host([error]:not([error=''])[uswds='false']) > span {
   color: var(--color-secondary-dark);
 }
 
@@ -55,13 +55,13 @@ span.required {
   display: none;
 }
 
-:host(:not([uswds="true"],[uswds=""])) label {
+:host([uswds='false']) label {
   margin-top: 3rem;
   max-width: 46rem;
   display: block;
 }
 
-:host(:not([uswds="true"],[uswds=""])) select {
+:host([uswds='false']) select {
   background-color: var(--color-white);
   background-image: url('../../assets/arrow-both.svg');
   background-position: right 1.3rem center;
diff --git a/packages/web-components/src/components/va-select/va-select.tsx b/packages/web-components/src/components/va-select/va-select.tsx
index 1e1eb9684..7ffe70fac 100644
--- a/packages/web-components/src/components/va-select/va-select.tsx
+++ b/packages/web-components/src/components/va-select/va-select.tsx
@@ -77,7 +77,7 @@ export class VaSelect {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop({reflect: true}) uswds?: boolean = false;
+  @Prop({reflect: true}) uswds?: boolean = true;
 
   /**
    * Optional hint text.
@@ -117,6 +117,14 @@ export class VaSelect {
     i18next.off('languageChanged');
   }
 
+  componentDidLoad() {
+    // check if the element has a class named uswds-false added from parent
+    if (this.el.classList.contains('uswds-false')) {
+      // add attribute manually
+      this.el.setAttribute('uswds', 'false');
+    }
+  }
+
   private handleKeyDown() {
     this.vaKeyDown.emit();
   }
diff --git a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
index cd3547743..8017c4bb3 100644
--- a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
+++ b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
@@ -160,7 +160,6 @@ export class VaStatementOfTruth {
             value={inputValue}
             message-aria-describedby={inputMessageAriaDescribedby}
             required
-            uswds
             onInput={this.handleInputChange}
             onBlur={this.handleInputBlur}
             ref={(field) => this.inputField = field}
@@ -171,7 +170,6 @@ export class VaStatementOfTruth {
             label={checkboxLabel}
             required
             checked={checked}
-            uswds
             onVaChange={this.handleCheckboxChange}
             ref={(field) => this.checkboxField = field}
           />
diff --git a/packages/web-components/src/components/va-summary-box/test/va-summary-box.e2e.ts b/packages/web-components/src/components/va-summary-box/test/va-summary-box.e2e.ts
index 38c213178..847ef0333 100644
--- a/packages/web-components/src/components/va-summary-box/test/va-summary-box.e2e.ts
+++ b/packages/web-components/src/components/va-summary-box/test/va-summary-box.e2e.ts
@@ -5,7 +5,7 @@ describe('va-summary-box', () => {
   it('renders v1', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box>
+      <va-summary-box uswds="false">
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -21,7 +21,7 @@ describe('va-summary-box', () => {
     const element = await page.find('va-summary-box');
 
     expect(element).toEqualHtml(`
-      <va-summary-box class="hydrated">
+      <va-summary-box class="hydrated" uswds="false">
         <mock:shadow-root>
           <div class="feature">
             <slot name="headline"></slot>
@@ -44,7 +44,7 @@ describe('va-summary-box', () => {
     const heading = "If I'm a Veteran, can I get VR&E benefits and services?";
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box>
+      <va-summary-box uswds="false">
         <h3 slot="headline">${heading}</h3>
       </va-summary-box>
     `);
@@ -56,7 +56,7 @@ describe('va-summary-box', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box>
+      <va-summary-box uswds="false">
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -76,7 +76,7 @@ describe('va-summary-box', () => {
   it('renders v3', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box uswds>
+      <va-summary-box>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
@@ -92,7 +92,7 @@ describe('va-summary-box', () => {
     const element = await page.find('va-summary-box');
 
     expect(element).toEqualHtml(`
-      <va-summary-box class="hydrated" uswds="">
+      <va-summary-box class="hydrated">
         <mock:shadow-root>
           <div class="usa-summary-box" role="region" aria-label="If I'm a Veteran, can I get VR&amp;E benefits and services?">
             <div class="usa-summary-box__body">
@@ -117,7 +117,7 @@ describe('va-summary-box', () => {
     const heading = "If I'm a Veteran, can I get VR&E benefits and services?";
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box uswds>
+      <va-summary-box>
         <h3 slot="headline">${heading}</h3>
       </va-summary-box>
     `);
@@ -129,7 +129,7 @@ describe('va-summary-box', () => {
   it('passes an axe check', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-      <va-summary-box uswds>
+      <va-summary-box>
         <h3 slot="headline">
           If I'm a Veteran, can I get VR&E benefits and services?
         </h3>
diff --git a/packages/web-components/src/components/va-summary-box/va-summary-box.tsx b/packages/web-components/src/components/va-summary-box/va-summary-box.tsx
index 8d91a3bb3..5aaa084c6 100644
--- a/packages/web-components/src/components/va-summary-box/va-summary-box.tsx
+++ b/packages/web-components/src/components/va-summary-box/va-summary-box.tsx
@@ -14,7 +14,7 @@ export class VaSummaryBox {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Local state for slot=headline's text.
diff --git a/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts b/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts
index bfc9d71cc..157ea8678 100644
--- a/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts
+++ b/packages/web-components/src/components/va-text-input/test/va-text-input.e2e.ts
@@ -5,11 +5,11 @@ describe('va-text-input', () => {
   it('renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Hello, world" />');
+    await page.setContent('<va-text-input label="Hello, world" uswds="false"/>');
     const element = await page.find('va-text-input');
 
     expect(element).toEqualHtml(`
-      <va-text-input class="hydrated" label="Hello, world">
+      <va-text-input class="hydrated" label="Hello, world" uswds="false">
         <mock:shadow-root>
           <label for="inputField" part="label">
             Hello, world
@@ -25,7 +25,7 @@ describe('va-text-input', () => {
   it('renders slotted content', async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <va-text-input label="Name of issue">
+    <va-text-input label="Name of issue" uswds="false">
       <p className="vads-u-font-weight--normal label-description">
         You can only add an issue that you've already received a VA decision
         notice for.
@@ -33,7 +33,7 @@ describe('va-text-input', () => {
     </va-text-input>`);
     const element = await page.find('va-text-input');
     expect(element).toEqualHtml(`
-      <va-text-input class="hydrated" label="Name of issue">
+      <va-text-input class="hydrated" label="Name of issue" uswds="false">
         <mock:shadow-root>
           <label for="inputField" part="label">
             Name of issue
@@ -52,7 +52,7 @@ describe('va-text-input', () => {
 
   it('renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input error="This is a mistake" />');
+    await page.setContent('<va-text-input error="This is a mistake" uswds="false"/>');
 
     // Render the error message text
     const error = await page.find('va-text-input >>> span#input-error-message');
@@ -64,7 +64,7 @@ describe('va-text-input', () => {
 
   it('sets aria-invalid based on invalid prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input invalid />');
+    await page.setContent('<va-text-input invalid uswds="false"/>');
 
     const input = await page.find('va-text-input >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
@@ -72,7 +72,7 @@ describe('va-text-input', () => {
 
   it('adds aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input />');
+    await page.setContent('<va-text-input uswds="false"/>');
     // Check that error is empty
     const el = await page.find('va-text-input');
     const inputEl = await page.find('va-text-input >>> input');
@@ -90,7 +90,7 @@ describe('va-text-input', () => {
 
   it('adds aria-describedby input-message id', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input message-aria-describedby="example message" />');
+    await page.setContent('<va-text-input message-aria-describedby="example message" uswds="false"/>');
     const el = await page.find('va-text-input');
     const inputEl = await page.find('va-text-input >>> input');
 
@@ -108,12 +108,12 @@ describe('va-text-input', () => {
 
   it('renders a required span', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input label="This is a field" required />');
+    await page.setContent('<va-text-input label="This is a field" required uswds="false"/>');
 
     const el = await page.find('va-text-input');
     // required="" is a weird thing that only happens in these tests
     expect(el).toEqualHtml(`
-      <va-text-input class="hydrated" label="This is a field" required="">
+      <va-text-input class="hydrated" label="This is a field" required="" uswds="false">
         <mock:shadow-root>
           <label for="inputField" part="label">
             This is a field <span class="required">required</span>
@@ -132,7 +132,7 @@ describe('va-text-input', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input hint="This is hint text" label="Hello world" />');
+    await page.setContent('<va-text-input hint="This is hint text" label="Hello world" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-text-input >>> span.hint-text');
@@ -143,7 +143,7 @@ describe('va-text-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-text-input required label="This is a test" error="With an error message" message-aria-describeby="with extra aria message"/>',
+      '<va-text-input required label="This is a test" error="With an error message" message-aria-describeby="with extra aria message" uswds="false"/>',
     );
 
     await axeCheck(page);
@@ -153,7 +153,7 @@ describe('va-text-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-text-input label="Input Field" enable-analytics/>',
+      '<va-text-input label="Input Field" enable-analytics uswds="false"/>',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -177,7 +177,7 @@ describe('va-text-input', () => {
   it('emits blur event', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field"/>');
+    await page.setContent('<va-text-input label="Input Field" uswds="false"/>');
 
     const inputEl = await page.find('va-text-input >>> input');
     const blurSpy = await page.spyOnEvent('blur');
@@ -189,7 +189,7 @@ describe('va-text-input', () => {
   it('emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field"/>');
+    await page.setContent('<va-text-input label="Input Field" uswds="false"/>');
 
     const inputEl = await page.find('va-text-input >>> input');
     const inputSpy = await page.spyOnEvent('input');
@@ -215,7 +215,7 @@ describe('va-text-input', () => {
   it("doesn't fire analytics events", async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field"/>');
+    await page.setContent('<va-text-input label="Input Field" uswds="false"/>');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-text-input >>> input');
@@ -228,7 +228,7 @@ describe('va-text-input', () => {
   it('adds a character limit with descriptive text', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-text-input minlength="2" maxlength="3" charcount value="22"/>',
+      '<va-text-input minlength="2" maxlength="3" charcount value="22" uswds="false"/>',
     );
 
     // Level-setting expectations
@@ -254,7 +254,7 @@ describe('va-text-input', () => {
 
   it('ignores negative maxlength values', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input maxlength="-5"/>');
+    await page.setContent('<va-text-input maxlength="-5" uswds="false"/>');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -268,7 +268,7 @@ describe('va-text-input', () => {
 
   it('ignores a maxlength of zero', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input maxlength="0"/>');
+    await page.setContent('<va-text-input maxlength="0" uswds="false"/>');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -291,7 +291,7 @@ describe('va-text-input', () => {
     ];
     for (const inputType of allowedInputTypes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-text-input type="${inputType}" />`);
+      await page.setContent(`<va-text-input type="${inputType}" uswds="false"/>`);
       const inputEl = await page.find('va-text-input >>> input');
       expect(inputEl.getAttribute('type')).toBe(inputType);
     }
@@ -299,7 +299,7 @@ describe('va-text-input', () => {
 
   it('defaults to text when the type attribute is invalid or unsupported', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input type="textual" />');
+    await page.setContent('<va-text-input type="textual" uswds="false"/>');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -319,7 +319,7 @@ describe('va-text-input', () => {
     ];
     for (const inputMode of inputModes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-text-input inputmode="${inputMode}" />`);
+      await page.setContent(`<va-text-input inputmode="${inputMode}" uswds="false"/>`);
       const inputEl = await page.find('va-text-input >>> input');
       expect(inputEl.getAttribute('inputmode')).toBe(inputMode);
     }
@@ -327,7 +327,7 @@ describe('va-text-input', () => {
 
   it('displays a green border around input when success is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input success />');
+    await page.setContent('<va-text-input success uswds="false"/>');
 
     const input = await page.find('va-text-input >>> input');
     // rgb(0, 136, 23) is equal to #008817 and --color-green CSS variable
@@ -348,7 +348,7 @@ describe('va-text-input', () => {
   it('checks for autocomplete attribute', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-text-input autocomplete="email" />',
+      '<va-text-input autocomplete="email" uswds="false"/>',
     );
 
     // Level-setting expectations
@@ -358,7 +358,7 @@ describe('va-text-input', () => {
 
   it('charcount and maxlength text does not display on memorable date', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input class="memorable-date-input" label="This is a label" />');
+    await page.setContent('<va-text-input class="memorable-date-input" label="This is a label" uswds="false"/>');
 
     const charcountMessageEl = await page.find('va-text-input >>> #charcount-message');
     expect(charcountMessageEl).toBeNull();
@@ -371,7 +371,7 @@ describe('va-text-input', () => {
   it('uswds v3 renders', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Hello, world" uswds />');
+    await page.setContent('<va-text-input label="Hello, world" />');
     const element = await page.find('va-text-input');
 
     expect(element).toEqualHtml(`
@@ -392,7 +392,7 @@ describe('va-text-input', () => {
 
   it('uswds renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input error="This is a mistake" uswds />');
+    await page.setContent('<va-text-input error="This is a mistake" />');
 
     // Render the error message text
     const error = await page.find('va-text-input >>> .usa-error-message');
@@ -404,7 +404,7 @@ describe('va-text-input', () => {
 
   it('uswds sets aria-invalid based on invalid prop', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input invalid uswds />');
+    await page.setContent('<va-text-input invalid />');
 
     const input = await page.find('va-text-input >>> input');
     expect(input.getAttribute('aria-invalid')).toEqual('true');
@@ -412,7 +412,7 @@ describe('va-text-input', () => {
 
   it('uswds adds aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input uswds />');
+    await page.setContent('<va-text-input />');
     // Check that error is empty
     const el = await page.find('va-text-input');
     const inputEl = await page.find('va-text-input >>> input');
@@ -430,7 +430,7 @@ describe('va-text-input', () => {
 
   it('uswds adds aria-describedby input-message id', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input message-aria-describedby="example message" uswds />');
+    await page.setContent('<va-text-input message-aria-describedby="example message" />');
     const el = await page.find('va-text-input');
     const inputEl = await page.find('va-text-input >>> input');
 
@@ -449,7 +449,7 @@ describe('va-text-input', () => {
   it('uswds renders a required span', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-text-input label="This is a field" required uswds />',
+      '<va-text-input label="This is a field" required />',
     );
 
     const requiredSpan = await page.find(
@@ -461,7 +461,7 @@ describe('va-text-input', () => {
 
   it('uswds renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input hint="This is hint text" label="hello, world" uswds />');
+    await page.setContent('<va-text-input hint="This is hint text" label="hello, world" />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-text-input >>> .usa-hint');
@@ -472,7 +472,7 @@ describe('va-text-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-text-input required label="This is a test" error="With an error message" message-aria-describeby="with extra aria message" uswds />',
+      '<va-text-input required label="This is a test" error="With an error message" message-aria-describeby="with extra aria message" />',
     );
 
     await axeCheck(page);
@@ -482,7 +482,7 @@ describe('va-text-input', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-text-input label="Input Field" enable-analytics uswds />',
+      '<va-text-input label="Input Field" enable-analytics />',
     );
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
@@ -506,7 +506,7 @@ describe('va-text-input', () => {
   it('uswds emits blur event uswds', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field" uswds />');
+    await page.setContent('<va-text-input label="Input Field" />');
 
     const inputEl = await page.find('va-text-input >>> input');
     const blurSpy = await page.spyOnEvent('blur');
@@ -518,7 +518,7 @@ describe('va-text-input', () => {
   it('uswds emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field" uswds />');
+    await page.setContent('<va-text-input label="Input Field" />');
 
     const inputEl = await page.find('va-text-input >>> input');
     const inputSpy = await page.spyOnEvent('input');
@@ -544,7 +544,7 @@ describe('va-text-input', () => {
   it("uswds doesn't fire analytics events", async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input label="Input Field" uswds />');
+    await page.setContent('<va-text-input label="Input Field" />');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
     const inputEl = await page.find('va-text-input >>> input');
@@ -556,7 +556,7 @@ describe('va-text-input', () => {
 
   it('uswds adds a character limit with descriptive text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input maxlength="3" value="22" charcount uswds />');
+    await page.setContent('<va-text-input maxlength="3" charcount value="22" />');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -582,7 +582,7 @@ describe('va-text-input', () => {
 
    it('uswds respects the maxlength character limit', async () => {
      const page = await newE2EPage();
-     await page.setContent('<va-text-input maxlength="2" charcount value="22" uswds />');
+     await page.setContent('<va-text-input maxlength="2" charcount value="22" />');
 
      // Level-setting expectations
      const inputEl = await page.find('va-text-input >>> input');
@@ -603,7 +603,7 @@ describe('va-text-input', () => {
 
   it('uswds ignores negative maxlength values', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input maxlength="-5" uswds />');
+    await page.setContent('<va-text-input maxlength="-5" />');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -617,7 +617,7 @@ describe('va-text-input', () => {
 
   it('uswds ignores a maxlength of zero', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input maxlength="0" uswds />');
+    await page.setContent('<va-text-input maxlength="0" />');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -640,7 +640,7 @@ describe('va-text-input', () => {
     ];
     for (const inputType of allowedInputTypes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-text-input type="${inputType}" uswds />`);
+      await page.setContent(`<va-text-input type="${inputType}" />`);
       const inputEl = await page.find('va-text-input >>> input');
       expect(inputEl.getAttribute('type')).toBe(inputType);
     }
@@ -648,7 +648,7 @@ describe('va-text-input', () => {
 
   it('uswds defaults to text when the type attribute is invalid or unsupported', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input type="textual" uswds />');
+    await page.setContent('<va-text-input type="textual" />');
 
     // Level-setting expectations
     const inputEl = await page.find('va-text-input >>> input');
@@ -668,7 +668,7 @@ describe('va-text-input', () => {
     ];
     for (const inputMode of inputModes) {
       const page = await newE2EPage();
-      await page.setContent(`<va-text-input inputmode="${inputMode}" uswds />`);
+      await page.setContent(`<va-text-input inputmode="${inputMode}" />`);
       const inputEl = await page.find('va-text-input >>> input');
       expect(inputEl.getAttribute('inputmode')).toBe(inputMode);
     }
@@ -676,7 +676,7 @@ describe('va-text-input', () => {
 
   it('uswds displays a green border around input when success is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input success uswds />');
+    await page.setContent('<va-text-input success />');
 
     const input = await page.find('va-text-input >>> input');
     // rgb(0, 169, 28) is equal to #00A91C from the USWDS v3 system.
@@ -697,7 +697,7 @@ describe('va-text-input', () => {
   it('uswds checks for autocomplete attribute', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-text-input autocomplete="email" uswds />',
+      '<va-text-input autocomplete="email" />',
     );
 
     // Level-setting expectations
@@ -707,7 +707,7 @@ describe('va-text-input', () => {
 
   it('uswds shows chars allowed on load if maxlength and charcount set', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input uswds maxlength="10" charcount />');
+    await page.setContent('<va-text-input maxlength="10" charcount />');
 
     const span = await page.find(
       'va-text-input >>> span.usa-character-count__status',
@@ -718,7 +718,7 @@ describe('va-text-input', () => {
   it('uswds shows chars left if maxlength and charcount set', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-text-input uswds charcount maxlength="10"/>');
+    await page.setContent('<va-text-input charcount maxlength="10"/>');
 
     const inputEl = await page.find('va-text-input >>> input');
     await inputEl.type('Hello');
@@ -730,7 +730,7 @@ describe('va-text-input', () => {
 
   it('uswds charcount and maxlength text does not display on memorable date', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input class="memorable-date-input" label="This is a label" uswds />');
+    await page.setContent('<va-text-input class="memorable-date-input" label="This is a label" />');
 
     const charcountMessageEl = await page.find('va-text-input >>> #charcount-message');
     expect(charcountMessageEl).toBeNull();
@@ -741,7 +741,7 @@ describe('va-text-input', () => {
 
   it('uswds useFormsPattern displays header for the single field pattern', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input label="This is a label" uswds use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-text-input label="This is a label" use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-text-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -749,7 +749,7 @@ describe('va-text-input', () => {
 
   it('uswds useFormsPattern displays header for the multiple fields pattern', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-text-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-text-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -757,7 +757,7 @@ describe('va-text-input', () => {
 
   it('uswds useFormsPattern does not display header if "single" or "multiple" is not indicated', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-text-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     const formHeader = await page.find('va-text-input >>> h1');
     expect(formHeader.innerText).toEqual('This is a form header');
@@ -765,7 +765,7 @@ describe('va-text-input', () => {
 
   it('uswds useFormsPattern passes an aXe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-text-input label="This is a label" uswds use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
+    await page.setContent('<va-text-input label="This is a label" use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description"/>');
 
     await axeCheck(page);
   });
diff --git a/packages/web-components/src/components/va-text-input/va-text-input.scss b/packages/web-components/src/components/va-text-input/va-text-input.scss
index 6c87090e4..caa7aa9e1 100644
--- a/packages/web-components/src/components/va-text-input/va-text-input.scss
+++ b/packages/web-components/src/components/va-text-input/va-text-input.scss
@@ -16,7 +16,7 @@
 
 
 
-:host([uswds]:not([uswds='false'])) {
+:host(:not([uswds='false'])) {
   color: var(--color-base);
 }
 
@@ -29,7 +29,7 @@
   outline: none !important;
 }
 
-:host([uswds]:not([uswds='false'])) input:not([disabled]):focus {
+:host(:not([uswds='false'])) input:not([disabled]):focus {
   outline: 2px solid var(--color-gold-light);
   outline-offset: 2px;
 }
@@ -52,7 +52,7 @@ input.usa-input {
 @import '../../mixins/hint-text.css';
 
 
-:host(:not([uswds="true"],[uswds=""])) label {
+:host([uswds='false']) label {
   display: block;
   max-width: 46rem;
   margin-top: 3rem;
@@ -63,7 +63,7 @@ span.required {
   color: var(--color-secondary-dark);
 }
 
-:host(:not([uswds="true"],[uswds=""])) input {
+:host([uswds='false']) input {
   appearance: none;
   border: 0.1rem solid var(--color-gray);
   border-radius: 0;
@@ -80,11 +80,11 @@ span.required {
   width: 100%;
 }
 
-:host(:not([uswds="true"],[uswds=""])) input:not([disabled]):focus {
+:host([uswds='false']) input:not([disabled]):focus {
   outline: 2px solid var(--color-gold-light);
   outline-offset: 2px;
 }
 
-:host([success]:not([success='false']):not([uswds="true"],[uswds=""])) input {
+:host([success]:not([success='false'])[uswds='false']) input {
   border: 4px solid var(--color-green);
 }
\ No newline at end of file
diff --git a/packages/web-components/src/components/va-text-input/va-text-input.tsx b/packages/web-components/src/components/va-text-input/va-text-input.tsx
index 3573f91db..fc5e6c763 100644
--- a/packages/web-components/src/components/va-text-input/va-text-input.tsx
+++ b/packages/web-components/src/components/va-text-input/va-text-input.tsx
@@ -148,7 +148,7 @@ export class VaTextInput {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop({reflect: true}) uswds?: boolean = false;
+  @Prop({reflect: true}) uswds?: boolean = true;
 
   /**
    * Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs. `uswds` should be true.
@@ -235,6 +235,14 @@ export class VaTextInput {
     i18next.off('languageChanged');
   }
 
+  componentDidLoad() {
+    // check if the element has a class named uswds-false added from parent
+    if (this.el.classList.contains('uswds-false')) {
+      // add attribute manually
+      this.el.setAttribute('uswds', 'false');
+    }
+  }
+
   render() {
     const {
       label,
diff --git a/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts b/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts
index 726561f38..b32fe2021 100644
--- a/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts
+++ b/packages/web-components/src/components/va-textarea/test/va-textarea.e2e.ts
@@ -5,12 +5,12 @@ describe('va-textarea', () => {
   it('renders', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea label="Describe your situation"></va-textarea>',
+      '<va-textarea label="Describe your situation" uswds="false"></va-textarea>',
     );
 
     const element = await page.find('va-textarea');
     expect(element).toEqualHtml(`
-      <va-textarea class="hydrated" label="Describe your situation">
+      <va-textarea class="hydrated" label="Describe your situation" uswds="false">
         <mock:shadow-root>
           <label for="textarea">
             Describe your situation
@@ -24,7 +24,7 @@ describe('va-textarea', () => {
 
   it('renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea error="This is a mistake" />');
+    await page.setContent('<va-textarea error="This is a mistake" uswds="false"/>');
 
     // Render the error message text
     const error = await page.find('va-textarea >>> span#input-error-message');
@@ -35,7 +35,7 @@ describe('va-textarea', () => {
 
   it('renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea hint="This is hint text" />');
+    await page.setContent('<va-textarea hint="This is hint text" uswds="false"/>');
 
     // Render the hint text
     const hintTextElement = await page.find('va-textarea >>> span.hint-text');
@@ -44,7 +44,7 @@ describe('va-textarea', () => {
 
   it('adds new aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea error="This is a mistake" />');
+    await page.setContent('<va-textarea error="This is a mistake" uswds="false"/>');
 
     // Render the error message text
     const textareaEl = await page.find('va-textarea >>> textarea ');
@@ -56,7 +56,7 @@ describe('va-textarea', () => {
 
   it('renders a required span', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea label="This is a field" required />');
+    await page.setContent('<va-textarea label="This is a field" required uswds="false"/>');
 
     // Render the error message text
     const requiredSpan = await page.find('va-textarea >>> .required');
@@ -68,7 +68,7 @@ describe('va-textarea', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-textarea required label="This is a test" error="With an error message"/>',
+      '<va-textarea required label="This is a test" error="With an error message" uswds="false"/>',
     );
 
     await axeCheck(page);
@@ -77,7 +77,7 @@ describe('va-textarea', () => {
   it('fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Something" enable-analytics/>');
+    await page.setContent('<va-textarea label="Something" enable-analytics uswds="false"/>');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
 
@@ -99,7 +99,7 @@ describe('va-textarea', () => {
 
   it('does not fire an analytics event when enableAnalytics is not truthy', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea label="Something" />');
+    await page.setContent('<va-textarea label="Something" uswds="false"/>');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
 
@@ -115,7 +115,7 @@ describe('va-textarea', () => {
   it('emits blur event', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Input Field"/>');
+    await page.setContent('<va-textarea label="Input Field" uswds="false"/>');
 
     const textareaEl = await page.find('va-textarea >>> textarea');
     const blurSpy = await page.spyOnEvent('blur');
@@ -127,7 +127,7 @@ describe('va-textarea', () => {
   it('emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Input Field"/>');
+    await page.setContent('<va-textarea label="Input Field" uswds="false"/>');
 
     const textareaEl = await page.find('va-textarea >>> textarea');
     const inputSpy = await page.spyOnEvent('input');
@@ -152,7 +152,7 @@ describe('va-textarea', () => {
 
   it('adds a max character limit with descriptive text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="3" value="22"/>');
+    await page.setContent('<va-textarea maxlength="3" value="22" uswds="false"/>');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -170,7 +170,7 @@ describe('va-textarea', () => {
 
   it('ignores negative maxlength values', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="-5"/>');
+    await page.setContent('<va-textarea maxlength="-5" uswds="false"/>');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -186,7 +186,7 @@ describe('va-textarea', () => {
 
   it('ignores a maxlength of zero', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="0"/>');
+    await page.setContent('<va-textarea maxlength="0" uswds="false"/>');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -204,12 +204,12 @@ describe('va-textarea', () => {
   it('uswds v3 renders', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea label="Describe your situation" uswds></va-textarea>',
+      '<va-textarea label="Describe your situation"></va-textarea>',
     );
 
     const element = await page.find('va-textarea');
     expect(element).toEqualHtml(`
-      <va-textarea class="hydrated" label="Describe your situation" uswds="">
+      <va-textarea class="hydrated" label="Describe your situation">
         <mock:shadow-root>
           <div class="input-wrap">
             <label class="usa-label" for="input-type-textarea" id="input-label" part="label">
@@ -226,7 +226,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 renders an error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea error="This is a mistake" uswds />');
+    await page.setContent('<va-textarea error="This is a mistake" />');
 
     // Render the error message text
     const error = await page.find('va-textarea >>> span#input-error-message');
@@ -240,7 +240,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 renders hint text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea hint="This is hint text" label="Hello world" uswds />');
+    await page.setContent('<va-textarea hint="This is hint text" label="Hello world" />');
 
     // Render the hint text
     const hintTextElement = await page.find('va-textarea >>> span.usa-hint');
@@ -249,7 +249,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 adds new aria-describedby for error message', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea error="This is a mistake" uswds />');
+    await page.setContent('<va-textarea error="This is a mistake" />');
 
     // Render the error message text
     const textareaEl = await page.find('va-textarea >>> textarea ');
@@ -260,7 +260,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 renders a required span', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea label="This is a field" required uswds />');
+    await page.setContent('<va-textarea label="This is a field" required />');
 
     // Render the error message text
     const requiredSpan = await page.find('va-textarea >>> .usa-label--required');
@@ -272,7 +272,7 @@ describe('va-textarea', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-textarea required label="This is a test" error="With an error message" uswds />',
+      '<va-textarea required label="This is a test" error="With an error message" />',
     );
 
     await axeCheck(page);
@@ -281,7 +281,7 @@ describe('va-textarea', () => {
   it('uswds v3 fires an analytics event when enableAnalytics is true', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Something" enable-analytics uswds />');
+    await page.setContent('<va-textarea label="Something" enable-analytics />');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
 
@@ -303,7 +303,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 does not fire an analytics event when enableAnalytics is not truthy', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea label="Something" uswds />');
+    await page.setContent('<va-textarea label="Something" />');
 
     const analyticsSpy = await page.spyOnEvent('component-library-analytics');
 
@@ -319,7 +319,7 @@ describe('va-textarea', () => {
   it('uswds v3 demits blur event', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Input Field" uswds />');
+    await page.setContent('<va-textarea label="Input Field" />');
 
     const textareaEl = await page.find('va-textarea >>> textarea');
     const blurSpy = await page.spyOnEvent('blur');
@@ -331,7 +331,7 @@ describe('va-textarea', () => {
   it('uswds v3 emits input event with value updated', async () => {
     const page = await newE2EPage();
 
-    await page.setContent('<va-textarea label="Input Field" uswds />');
+    await page.setContent('<va-textarea label="Input Field" />');
 
     const textareaEl = await page.find('va-textarea >>> textarea');
     const inputSpy = await page.spyOnEvent('input');
@@ -356,7 +356,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 adds a max character limit with descriptive text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="3" value="22" uswds />');
+    await page.setContent('<va-textarea maxlength="3" value="22" />');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -374,7 +374,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 ignores negative maxlength values', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="-5" uswds />');
+    await page.setContent('<va-textarea maxlength="-5" />');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -390,7 +390,7 @@ describe('va-textarea', () => {
 
   it('uswds v3 ignores a maxlength of zero', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea maxlength="0" uswds />');
+    await page.setContent('<va-textarea maxlength="0" />');
 
     // Level-setting expectations
     const textareaEl = await page.find('va-textarea >>> textarea');
@@ -407,7 +407,7 @@ describe('va-textarea', () => {
   it('uswds shows chars allowed on load if maxlength and charcount set', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea uswds charcount maxlength="10" />'
+      '<va-textarea charcount maxlength="10" />'
     );
 
     const span = await page.find('va-textarea >>> span.usa-character-count__status')
@@ -418,7 +418,7 @@ describe('va-textarea', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-textarea uswds charcount maxlength="10"/>'
+      '<va-textarea charcount maxlength="10"/>'
     );
 
     const inputEl = await page.find('va-textarea >>> textarea');
@@ -433,7 +433,7 @@ describe('va-textarea', () => {
     const page = await newE2EPage();
 
     await page.setContent(
-      '<va-textarea uswds charcount maxlength="10"/>'
+      '<va-textarea charcount maxlength="10"/>'
     );
 
     const inputEl = await page.find('va-textarea >>> textarea');
@@ -453,7 +453,7 @@ describe('va-textarea', () => {
   it('uswds useFormsPattern displays header for the single field pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-textarea use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-textarea >>> h1');
@@ -463,7 +463,7 @@ describe('va-textarea', () => {
   it('uswds useFormsPattern displays header for the multiple field pattern', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-textarea use-forms-pattern="multiple" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-textarea >>> h1');
@@ -473,7 +473,7 @@ describe('va-textarea', () => {
   it('uswds useFormsPattern does not display header if "single" or "multiple" is not indicated', async () => {
     const page = await newE2EPage();
     await page.setContent(
-      '<va-textarea form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',
+      '<va-textarea form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',
     );
 
     const formHeader = await page.find('va-textarea >>> h1');
@@ -482,7 +482,7 @@ describe('va-textarea', () => {
 
   it('uswds useFormsPattern passes an aXe check', async () => {
     const page = await newE2EPage();
-    await page.setContent('<va-textarea use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation" uswds></va-textarea>',);
+    await page.setContent('<va-textarea use-forms-pattern="single" form-heading-level="1" form-heading="This is a form header" form-description="This is a form description" label="Describe your situation"></va-textarea>',);
 
     await axeCheck(page);
   });
diff --git a/packages/web-components/src/components/va-textarea/va-textarea.scss b/packages/web-components/src/components/va-textarea/va-textarea.scss
index ac0007747..fd082fee9 100644
--- a/packages/web-components/src/components/va-textarea/va-textarea.scss
+++ b/packages/web-components/src/components/va-textarea/va-textarea.scss
@@ -40,18 +40,18 @@
 @import '../../mixins/form-field-error.css';
 @import '../../mixins/hint-text.css';
 
-:host(:not([uswds="true"],[uswds=""])) label {
+:host([uswds='false']) label {
   display: block;
   max-width: 46rem;
   margin-top: 3rem;
 }
 
-:host(:not([uswds="true"],[uswds=""])) span.required {
+:host([uswds='false']) span.required {
   color: var(--color-secondary-dark);
   margin-left: 0.4rem;
 }
 
-:host(:not([uswds="true"],[uswds=""])) textarea {
+:host([uswds='false']) textarea {
   font-family: var(--font-source-sans);
   font-size: 16px;
   line-height: 1.3;
@@ -65,6 +65,6 @@
   resize: inherit;
 }
 
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) textarea {
+:host([error]:not([error=''])[uswds='false']) textarea {
   padding-right: 0.7rem;
 }
diff --git a/packages/web-components/src/components/va-textarea/va-textarea.tsx b/packages/web-components/src/components/va-textarea/va-textarea.tsx
index f7468d5e0..d8a629614 100644
--- a/packages/web-components/src/components/va-textarea/va-textarea.tsx
+++ b/packages/web-components/src/components/va-textarea/va-textarea.tsx
@@ -92,7 +92,7 @@ export class VaTextarea {
   /**
    * Whether or not the component will use USWDS v3 styling.
    */
-  @Prop() uswds?: boolean = false;
+  @Prop() uswds?: boolean = true;
 
   /**
    * Enabling this will add a heading and description for integrating into the forms pattern. Accepts `single` or `multiple` to indicate if the form is a single input or will have multiple inputs. `uswds` should be true.
diff --git a/packages/web-components/src/mixins/focusable.css b/packages/web-components/src/mixins/focusable.css
index e89b67f83..06dce4067 100644
--- a/packages/web-components/src/mixins/focusable.css
+++ b/packages/web-components/src/mixins/focusable.css
@@ -1,7 +1,7 @@
 /* From the USWDS styles: */
 /*   https://github.com/uswds/uswds/blob/3dc296ec56cd621fe52d918701fd94621d96a198/src/stylesheets/core/mixins/_focus.scss#L12-L13 */
 button:not([disabled]):focus,
-:host(:not([uswds="true"],[uswds=""])) button:not([disabled]):active,
+:host([uswds='false']) button:not([disabled]):active,
 select:not([disabled]):focus,
 a:not([disabled]):focus,
 h1:focus,
diff --git a/packages/web-components/src/mixins/form-field-error.css b/packages/web-components/src/mixins/form-field-error.css
index 0cf8605cd..607383925 100644
--- a/packages/web-components/src/mixins/form-field-error.css
+++ b/packages/web-components/src/mixins/form-field-error.css
@@ -21,7 +21,7 @@
   }
 }
 
-:host([error]:not([error='']):not([uswds="true"],[uswds=""])) {
+:host([error]:not([error=''])[uswds='false']) {
   label {
     margin-top: 0;
   }
diff --git a/packages/web-components/src/mixins/uswds-error-border.scss b/packages/web-components/src/mixins/uswds-error-border.scss
index 172ad4c70..d62e5d90d 100644
--- a/packages/web-components/src/mixins/uswds-error-border.scss
+++ b/packages/web-components/src/mixins/uswds-error-border.scss
@@ -1,17 +1,17 @@
 @import '~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables.scss';
 @import 'functions';
 
-:host([error]:not([error=''])[uswds]:not([uswds='false'])) {
+:host([error]:not([error='']):not([uswds='false'])) {
     border-left: 0.4rem solid $color-secondary-dark;
     padding-left: rem-override(1rem);
     position: relative;
 }
 
-:host([error]:not([error=''])[uswds]:not([uswds='false'])[use-forms-pattern='multiple']) {
+:host([error]:not([error='']):not([uswds='false'])[use-forms-pattern='multiple']) {
     border-left: none;
 }
 
-:host([error]:not([error=''])[uswds]:not([uswds='false'])[use-forms-pattern='multiple']) {
+:host([error]:not([error='']):not([uswds='false'])[use-forms-pattern='multiple']) {
     .input-wrap {
         border-left: 0.4rem solid $color-secondary-dark;
         padding-left: rem-override(1rem);
@@ -20,10 +20,10 @@
 }
 
 @media screen and (min-width: 1008px) {
-    :host([error]:not([error=''])[uswds]:not([uswds='false'])) {
+    :host([error]:not([error='']):not([uswds='false'])) {
         margin-left: -1.4rem;
     }
-    :host([error]:not([error=''])[uswds]:not([uswds='false'])[use-forms-pattern='multiple']) {
+    :host([error]:not([error='']):not([uswds='false'])[use-forms-pattern='multiple']) {
         .input-wrap {
             margin-left: -1.6rem;
         }
@@ -31,7 +31,7 @@
 }
 
 @media screen and (max-width: 1008px) { 
-    :host([error]:not([error=''])[uswds]:not([uswds='false'])[use-forms-pattern='multiple']) {
+    :host([error]:not([error='']):not([uswds='false'])[use-forms-pattern='multiple']) {
         padding-left: 0;
     }
 }
\ No newline at end of file
diff --git a/packages/web-components/src/mixins/uswds-input-width.scss b/packages/web-components/src/mixins/uswds-input-width.scss
index dff18ba8b..9f94b2249 100644
--- a/packages/web-components/src/mixins/uswds-input-width.scss
+++ b/packages/web-components/src/mixins/uswds-input-width.scss
@@ -1,4 +1,4 @@
-:host(:not([uswds="true"],[uswds=""])) .usa-input,
+:host([uswds='false']) .usa-input,
 :host .usa-input {
   &--2xs {
     max-width: 5ex;