From f2ac742a8c165e0793427f606b04bb40b2b44ae3 Mon Sep 17 00:00:00 2001
From: Gautam Jain <gautam.jain@workdayinternal.com>
Date: Mon, 12 Oct 2026 14:43:17 -0400
Subject: [PATCH 1/4] docs(switch): Expand accessibility section for AI codegen

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../preview-react/switch/stories/Switch.mdx   | 169 ++++++++++++++++++
 1 file changed, 169 insertions(+)

diff --git a/modules/preview-react/switch/stories/Switch.mdx b/modules/preview-react/switch/stories/Switch.mdx
index c43d0907fb..2ebebc913d 100644
--- a/modules/preview-react/switch/stories/Switch.mdx
+++ b/modules/preview-react/switch/stories/Switch.mdx
@@ -80,6 +80,175 @@ Switch supports right-to-left languages when specified in the CanvasProvider the
 Switch supports custom styling via the `cs` prop. For more information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
+## Accessibility
+
+The primary accessibility goal is a visible, programmatically determinable name and an on or off
+state that assistive technology can expose. Use **Switch** for a single setting that takes effect
+immediately when toggled (for example, "Dark Mode"). When the user selects one or more options that
+are applied on form submission, use [**Checkbox**](/components/inputs/checkbox/) instead. **Switch**
+does not render its own `<label>`, so it relies on **`FormField`** for its name, hint, error, and
+required wiring — see [FormField's accessibility documentation](/components/inputs/form-field/#accessibility).
+
+### Minimum Accessible Structure
+
+The following matches the [Basic Example](#basic-example) without `isRequired` (see **Required
+state** in Accessibility Requirements). Every **Switch** needs **`FormField`**, a visible
+**`FormField.Label`**, and **`FormField.Input as={Switch}`** inside **`FormField.Field`**.
+
+```tsx
+import React from 'react';
+
+import {Switch} from '@workday/canvas-kit-preview-react/switch';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <FormField>
+      <FormField.Label>Dark Mode</FormField.Label>
+      <FormField.Field>
+        <FormField.Input
+          as={Switch}
+          checked={checked}
+          onChange={event => setChecked(event.target.checked)}
+        />
+      </FormField.Field>
+    </FormField>
+  );
+};
+```
+
+### Built-in Behaviors
+
+Canvas Kit applies these automatically when you compose **Switch** with **`FormField`**
+subcomponents. **Do not duplicate them** in consuming code.
+
+**ARIA and DOM** (_applied by Switch and FormField_):
+
+- **`Switch`**: Renders a native `<input type="checkbox">` with `role="switch"`. The native `checked`
+  state is exposed to assistive technology as on or off, so no `aria-checked` is needed. Canvas Kit
+  assigns an `id` with `useUniqueId`; inside **`FormField.Input`**, the FormField `input-{id}` is
+  used instead.
+- **Track, thumb, and check/x icon**: Purely visual. The icon is a Canvas Kit **`SystemIcon`**, whose
+  SVG markup sets `role="presentation"` and `focusable="false"`, so it is not announced.
+- **`FormField.Label`**: `<label>` with `htmlFor` targeting the Switch input. Clicking the label
+  toggles the Switch.
+- **`FormField.Input`**: Sets `aria-labelledby`, `aria-describedby` (`hint-{id}`), `required` when
+  `isRequired`, and `aria-invalid="true"` when `error="error"`. It also forwards **`error`** to the
+  Switch, so the error or caution ring appears without setting **`error`** on the Switch.
+- **`disabled`**: Maps to the native `disabled` attribute.
+- **`ref`**: Forwards to the underlying `<input type="checkbox">`.
+
+**Keyboard** (_native checkbox behavior_):
+
+- <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> move focus to and from the Switch (native tab
+  order)
+- <kbd>Space</kbd> toggles the Switch on and off
+- A visible focus ring is shown around the track when the Switch receives focus
+
+Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
+
+**Screen reader expectations** (_when built-in behaviors are used as intended_):
+
+- On focus, assistive technology announces the **`FormField.Label`** text, the "switch" role, and
+  the on or off state; when applicable, required state, invalid state (`error="error"`), and
+  **`FormField.Hint`** text via `aria-describedby`
+- Toggling announces the new on or off state
+- The Caution state is visual only — `aria-invalid` is **not** set for `error="caution"`
+- Disabled switches are skipped in the tab order and may be announced as unavailable
+
+For label, hint, and error association details, see
+[FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).
+
+### Accessibility Requirements
+
+Required in application code for an accessible **Switch**. Rows marked _(conditional)_ apply only
+when the situation matches—otherwise omit.
+
+**If no design spec is provided:** use a visible **`FormField.Label`**, wrap the control with
+**`FormField.Input as={Switch}`** inside **`FormField.Field`**, and control it with **`checked`** and
+**`onChange`**. Omit **`isRequired`**, **`error`**, **`FormField.Hint`**, **`disabled`**,
+**`isHidden`**, a custom **`id`**, and a **`ref`** unless the spec requires them.
+
+**Programmatic focus** _(conditional — omit by default)_:
+
+Attach a `ref` only when the product must move focus to the Switch after an action. Do not attach a
+`ref` or call `focus()` unless the design or developer asks for it. Put **`FormField.Input`** inside
+**`FormField.Field`**, not inside a nested **`FormField`** — a nested **`FormField`** generates a
+new `id`, so the Switch no longer references the outer **`FormField.Label`**.
+
+```tsx
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <>
+      <FormField>
+        <FormField.Label>Dark Mode</FormField.Label>
+        <FormField.Field>
+          <FormField.Input
+            as={Switch}
+            checked={checked}
+            ref={ref}
+            onChange={event => setChecked(event.target.checked)}
+          />
+        </FormField.Field>
+      </FormField>
+      <PrimaryButton onClick={() => ref.current?.focus()}>Focus Switch</PrimaryButton>
+    </>
+  );
+};
+```
+
+| Requirement                             | How to satisfy                                                                                                                                                                                                                  |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Accessible name                         | Visible, non-empty **`FormField.Label`** describing the setting (for example, "Dark Mode"), not the state ("On"/"Off"). Use **`FormField.Label isHidden`** only when an equally clear visible alternative exists               |
+| Input wiring                            | **`FormField.Input as={Switch}`** inside **`FormField.Field`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring                                         |
+| Controlled state                        | **`checked`** and **`onChange`** on **`FormField.Input`**, updating state from `event.target.checked`                                                                                                                           |
+| Hint or error text _(conditional)_      | **`FormField.Hint`** inside **`FormField.Field`** when there is help or validation copy — `aria-describedby` is wired by default                                                                                                |
+| Error state _(conditional)_             | `error="error"` on **`FormField`** with descriptive **`FormField.Hint`** so the error is not conveyed by color alone. See [Error](#error)                                                                                       |
+| Caution state _(conditional)_           | `error="caution"` on **`FormField`** with descriptive **`FormField.Hint`** (no `aria-invalid`). See [Caution](#caution)                                                                                                         |
+| Required state _(conditional)_          | `isRequired` on **`FormField`** only when the form cannot be submitted unless the Switch is on — native `required` on a checkbox means it must be checked                                                                      |
+| Disabled _(conditional)_                | `disabled` on **`FormField.Input`** when the spec marks the setting unavailable. See [Disabled](#disabled)                                                                                                                      |
+| Label position _(conditional)_          | `orientation` on **`FormField`** when the spec places the label beside the Switch. See [Label Position Horizontal](#label-position-horizontal)                                                                                  |
+| Programmatic focus _(conditional)_      | `ref` on **`FormField.Input`** and call `focus()` when the product requires it — omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding))                                                       |
+
+**Summary for code generation:**
+
+- **REQUIRED:** **`FormField`** + visible **`FormField.Label`** + **`FormField.Input as={Switch}`**
+  inside **`FormField.Field`**; controlled **`checked`** and **`onChange`**
+- **CONDITIONAL:** **`FormField.Hint`** for hint, error, or caution text; `error` on **`FormField`**;
+  `isRequired` only when the Switch must be on; `disabled`; `orientation`; programmatic focus via
+  `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for shared
+  FormField conditionals.
+
+### Anti-Patterns
+
+Do **not** generate code that does the following (see **Accessibility Requirements** above for what
+to supply instead):
+
+- Render **Switch** without **`FormField`** and **`FormField.Label`** — **Switch** has no built-in
+  label. For shared FormField anti-patterns (manual ARIA wiring, color-only errors, broken ID
+  references), see [FormField Anti-Patterns](/components/inputs/form-field/#anti-patterns)
+- Manually set `role`, `aria-checked`, `aria-labelledby`, `aria-describedby`, `aria-invalid`, or
+  `id` on **Switch** — Canvas Kit wires these from the native checkbox and **`FormField`**
+- Nest **`FormField`** inside **`FormField`** instead of using **`FormField.Field`** — the inner
+  **`FormField`** breaks the label association
+- Put the state in the label (for example, "Dark Mode: On") or add a visually hidden "on"/"off"
+  string — the state is already announced from `role="switch"` and `checked`
+- Add `aria-label` or `aria-hidden` to the track, thumb, or check/x icon — they are already
+  presentational
+- Set **`error`** directly on **Switch** inside **`FormField`** — set it on **`FormField`** so
+  `aria-invalid` and the visual ring stay in sync. Setting **`error`** on a Switch outside
+  **`FormField`** is visual only and does not set `aria-invalid`
+- Use **`isRequired`** for a setting that can validly be off
+- Use **Switch** for selections that only apply on form submission, or for multiple related
+  options — use [**Checkbox**](/components/inputs/checkbox/) instead
+- Use **`aria-disabled`** instead of **`disabled`** — **Switch** maps unavailability to the native
+  **`disabled`** attribute
+
 ## Component API
 
 <SymbolDoc name="Switch" fileName="/react/" />

From 54929bdaf6a66aca543f7beb8fb32567006e03ad Mon Sep 17 00:00:00 2001
From: Gautam Jain <gautam.jain@workday.com>
Date: Wed, 14 Oct 2026 17:51:55 -0400
Subject: [PATCH 2/4] Simplified Switch component documentation

1. Moved "Do not intercept Space or otherwise prevent the native toggle." under Anti- Pattern
2. Removed the onChange listener, the checked attribute, and line 105's useState hook above.
3. Reduced Built-in behavior to just 3 bullets per suggestion
4. Shortened the accessibility requirement
5. Removed certain A11y requirements
6. Shortened the summary for code generation
7. Removed an impossible Anti-pattern requirement
---
 .../preview-react/switch/stories/Switch.mdx   | 43 ++++++-------------
 1 file changed, 12 insertions(+), 31 deletions(-)

diff --git a/modules/preview-react/switch/stories/Switch.mdx b/modules/preview-react/switch/stories/Switch.mdx
index 2ebebc913d..31cd099914 100644
--- a/modules/preview-react/switch/stories/Switch.mdx
+++ b/modules/preview-react/switch/stories/Switch.mdx
@@ -102,17 +102,12 @@ import {Switch} from '@workday/canvas-kit-preview-react/switch';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 
 const Example = () => {
-  const [checked, setChecked] = React.useState(false);
-
+  
   return (
     <FormField>
       <FormField.Label>Dark Mode</FormField.Label>
       <FormField.Field>
-        <FormField.Input
-          as={Switch}
-          checked={checked}
-          onChange={event => setChecked(event.target.checked)}
-        />
+        <FormField.Input as={Switch} />
       </FormField.Field>
     </FormField>
   );
@@ -128,17 +123,10 @@ subcomponents. **Do not duplicate them** in consuming code.
 
 - **`Switch`**: Renders a native `<input type="checkbox">` with `role="switch"`. The native `checked`
   state is exposed to assistive technology as on or off, so no `aria-checked` is needed. Canvas Kit
-  assigns an `id` with `useUniqueId`; inside **`FormField.Input`**, the FormField `input-{id}` is
-  used instead.
+  assigns an `id` with `useUniqueId` unless you pass **`id`**.
 - **Track, thumb, and check/x icon**: Purely visual. The icon is a Canvas Kit **`SystemIcon`**, whose
   SVG markup sets `role="presentation"` and `focusable="false"`, so it is not announced.
-- **`FormField.Label`**: `<label>` with `htmlFor` targeting the Switch input. Clicking the label
-  toggles the Switch.
-- **`FormField.Input`**: Sets `aria-labelledby`, `aria-describedby` (`hint-{id}`), `required` when
-  `isRequired`, and `aria-invalid="true"` when `error="error"`. It also forwards **`error`** to the
-  Switch, so the error or caution ring appears without setting **`error`** on the Switch.
 - **`disabled`**: Maps to the native `disabled` attribute.
-- **`ref`**: Forwards to the underlying `<input type="checkbox">`.
 
 **Keyboard** (_native checkbox behavior_):
 
@@ -147,8 +135,6 @@ subcomponents. **Do not duplicate them** in consuming code.
 - <kbd>Space</kbd> toggles the Switch on and off
 - A visible focus ring is shown around the track when the Switch receives focus
 
-Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
-
 **Screen reader expectations** (_when built-in behaviors are used as intended_):
 
 - On focus, assistive technology announces the **`FormField.Label`** text, the "switch" role, and
@@ -174,9 +160,8 @@ when the situation matches—otherwise omit.
 **Programmatic focus** _(conditional — omit by default)_:
 
 Attach a `ref` only when the product must move focus to the Switch after an action. Do not attach a
-`ref` or call `focus()` unless the design or developer asks for it. Put **`FormField.Input`** inside
-**`FormField.Field`**, not inside a nested **`FormField`** — a nested **`FormField`** generates a
-new `id`, so the Switch no longer references the outer **`FormField.Label`**.
+`ref` or call `focus()` unless the design or developer asks for it. See
+[Ref Forwarding](#ref-forwarding) under Usage for a complete Storybook example.
 
 ```tsx
 const Example = () => {
@@ -206,23 +191,20 @@ const Example = () => {
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Accessible name                         | Visible, non-empty **`FormField.Label`** describing the setting (for example, "Dark Mode"), not the state ("On"/"Off"). Use **`FormField.Label isHidden`** only when an equally clear visible alternative exists               |
 | Input wiring                            | **`FormField.Input as={Switch}`** inside **`FormField.Field`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring                                         |
-| Controlled state                        | **`checked`** and **`onChange`** on **`FormField.Input`**, updating state from `event.target.checked`                                                                                                                           |
-| Hint or error text _(conditional)_      | **`FormField.Hint`** inside **`FormField.Field`** when there is help or validation copy — `aria-describedby` is wired by default                                                                                                |
-| Error state _(conditional)_             | `error="error"` on **`FormField`** with descriptive **`FormField.Hint`** so the error is not conveyed by color alone. See [Error](#error)                                                                                       |
-| Caution state _(conditional)_           | `error="caution"` on **`FormField`** with descriptive **`FormField.Hint`** (no `aria-invalid`). See [Caution](#caution)                                                                                                         |
+                                                                                                                     |
+                                                                                                      |
 | Required state _(conditional)_          | `isRequired` on **`FormField`** only when the form cannot be submitted unless the Switch is on — native `required` on a checkbox means it must be checked                                                                      |
 | Disabled _(conditional)_                | `disabled` on **`FormField.Input`** when the spec marks the setting unavailable. See [Disabled](#disabled)                                                                                                                      |
-| Label position _(conditional)_          | `orientation` on **`FormField`** when the spec places the label beside the Switch. See [Label Position Horizontal](#label-position-horizontal)                                                                                  |
+                                                                               |
 | Programmatic focus _(conditional)_      | `ref` on **`FormField.Input`** and call `focus()` when the product requires it — omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding))                                                       |
 
 **Summary for code generation:**
 
 - **REQUIRED:** **`FormField`** + visible **`FormField.Label`** + **`FormField.Input as={Switch}`**
-  inside **`FormField.Field`**; controlled **`checked`** and **`onChange`**
-- **CONDITIONAL:** **`FormField.Hint`** for hint, error, or caution text; `error` on **`FormField`**;
-  `isRequired` only when the Switch must be on; `disabled`; `orientation`; programmatic focus via
+  inside **`FormField.Field`**
+- **CONDITIONAL:** `isRequired` only when the Switch must be on; `disabled`; programmatic focus via
   `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for shared
-  FormField conditionals.
+  FormField conditionals (hint, error, and caution).
 
 ### Anti-Patterns
 
@@ -238,8 +220,6 @@ to supply instead):
   **`FormField`** breaks the label association
 - Put the state in the label (for example, "Dark Mode: On") or add a visually hidden "on"/"off"
   string — the state is already announced from `role="switch"` and `checked`
-- Add `aria-label` or `aria-hidden` to the track, thumb, or check/x icon — they are already
-  presentational
 - Set **`error`** directly on **Switch** inside **`FormField`** — set it on **`FormField`** so
   `aria-invalid` and the visual ring stay in sync. Setting **`error`** on a Switch outside
   **`FormField`** is visual only and does not set `aria-invalid`
@@ -248,6 +228,7 @@ to supply instead):
   options — use [**Checkbox**](/components/inputs/checkbox/) instead
 - Use **`aria-disabled`** instead of **`disabled`** — **Switch** maps unavailability to the native
   **`disabled`** attribute
+- Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
 
 ## Component API
 

From 061e0b3318dbc52bd04cf437c7d6dc36a2934db9 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Thu, 15 Oct 2026 13:23:15 -0400
Subject: [PATCH 3/4] docs(switch): Simplify accessibility keyboard and focus
 guidance

Drop the programmatic-focus example that duplicated Ref Forwarding, and describe native checkbox keyboard behavior in prose so codegen guidance matches Checkbox.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../preview-react/switch/stories/Switch.mdx   | 34 ++-----------------
 1 file changed, 2 insertions(+), 32 deletions(-)

diff --git a/modules/preview-react/switch/stories/Switch.mdx b/modules/preview-react/switch/stories/Switch.mdx
index 31cd099914..6b249c973e 100644
--- a/modules/preview-react/switch/stories/Switch.mdx
+++ b/modules/preview-react/switch/stories/Switch.mdx
@@ -130,10 +130,8 @@ subcomponents. **Do not duplicate them** in consuming code.
 
 **Keyboard** (_native checkbox behavior_):
 
-- <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> move focus to and from the Switch (native tab
-  order)
-- <kbd>Space</kbd> toggles the Switch on and off
-- A visible focus ring is shown around the track when the Switch receives focus
+**`Switch`** uses native `<input type="checkbox">` keyboard behavior (tab order and Space to
+toggle). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
 
 **Screen reader expectations** (_when built-in behaviors are used as intended_):
 
@@ -163,39 +161,12 @@ Attach a `ref` only when the product must move focus to the Switch after an acti
 `ref` or call `focus()` unless the design or developer asks for it. See
 [Ref Forwarding](#ref-forwarding) under Usage for a complete Storybook example.
 
-```tsx
-const Example = () => {
-  const [checked, setChecked] = React.useState(false);
-  const ref = React.useRef<HTMLInputElement>(null);
-
-  return (
-    <>
-      <FormField>
-        <FormField.Label>Dark Mode</FormField.Label>
-        <FormField.Field>
-          <FormField.Input
-            as={Switch}
-            checked={checked}
-            ref={ref}
-            onChange={event => setChecked(event.target.checked)}
-          />
-        </FormField.Field>
-      </FormField>
-      <PrimaryButton onClick={() => ref.current?.focus()}>Focus Switch</PrimaryButton>
-    </>
-  );
-};
-```
-
 | Requirement                             | How to satisfy                                                                                                                                                                                                                  |
 | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Accessible name                         | Visible, non-empty **`FormField.Label`** describing the setting (for example, "Dark Mode"), not the state ("On"/"Off"). Use **`FormField.Label isHidden`** only when an equally clear visible alternative exists               |
 | Input wiring                            | **`FormField.Input as={Switch}`** inside **`FormField.Field`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring                                         |
-                                                                                                                     |
-                                                                                                      |
 | Required state _(conditional)_          | `isRequired` on **`FormField`** only when the form cannot be submitted unless the Switch is on — native `required` on a checkbox means it must be checked                                                                      |
 | Disabled _(conditional)_                | `disabled` on **`FormField.Input`** when the spec marks the setting unavailable. See [Disabled](#disabled)                                                                                                                      |
-                                                                               |
 | Programmatic focus _(conditional)_      | `ref` on **`FormField.Input`** and call `focus()` when the product requires it — omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding))                                                       |
 
 **Summary for code generation:**
@@ -228,7 +199,6 @@ to supply instead):
   options — use [**Checkbox**](/components/inputs/checkbox/) instead
 - Use **`aria-disabled`** instead of **`disabled`** — **Switch** maps unavailability to the native
   **`disabled`** attribute
-- Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
 
 ## Component API
 

From 5625f01a1007357e1a8d820fb56562b7655a0b3a Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Thu, 15 Oct 2026 13:38:36 -0400
Subject: [PATCH 4/4] docs(switch): Leave required off the basic example

A Switch can validly be off, so the basic example should not set isRequired. The minimum accessible structure can then match that example directly.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 modules/preview-react/switch/stories/Switch.mdx         | 5 ++---
 modules/preview-react/switch/stories/examples/Basic.tsx | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/modules/preview-react/switch/stories/Switch.mdx b/modules/preview-react/switch/stories/Switch.mdx
index 6b249c973e..0e918b97a9 100644
--- a/modules/preview-react/switch/stories/Switch.mdx
+++ b/modules/preview-react/switch/stories/Switch.mdx
@@ -91,9 +91,8 @@ required wiring — see [FormField's accessibility documentation](/components/in
 
 ### Minimum Accessible Structure
 
-The following matches the [Basic Example](#basic-example) without `isRequired` (see **Required
-state** in Accessibility Requirements). Every **Switch** needs **`FormField`**, a visible
-**`FormField.Label`**, and **`FormField.Input as={Switch}`** inside **`FormField.Field`**.
+The following matches the [Basic Example](#basic-example). Every **Switch** needs **`FormField`**, a
+visible **`FormField.Label`**, and **`FormField.Input as={Switch}`** inside **`FormField.Field`**.
 
 ```tsx
 import React from 'react';
diff --git a/modules/preview-react/switch/stories/examples/Basic.tsx b/modules/preview-react/switch/stories/examples/Basic.tsx
index f12d162b1d..ec511dee6e 100644
--- a/modules/preview-react/switch/stories/examples/Basic.tsx
+++ b/modules/preview-react/switch/stories/examples/Basic.tsx
@@ -11,7 +11,7 @@ export const Basic = () => {
   };
 
   return (
-    <FormField isRequired>
+    <FormField>
       <FormField.Label>Dark Mode</FormField.Label>
       <FormField.Field>
         <FormField.Input as={Switch} checked={checked} onChange={handleChange} />