diff --git a/.changeset/toggle-field-checkbox-id.md b/.changeset/toggle-field-checkbox-id.md
new file mode 100644
index 0000000000..3251edb9e3
--- /dev/null
+++ b/.changeset/toggle-field-checkbox-id.md
@@ -0,0 +1,5 @@
+---
+'tinacms': patch
+---
+
+Associate the toggle field's label with its checkbox. The input now falls back to the form field name for its `id`, so clicking the label toggles the value and screen readers announce the field name.
diff --git a/packages/tinacms/src/toolkit/fields/components/toggle.tsx b/packages/tinacms/src/toolkit/fields/components/toggle.tsx
index 2f8912e44d..7610804671 100644
--- a/packages/tinacms/src/toolkit/fields/components/toggle.tsx
+++ b/packages/tinacms/src/toolkit/fields/components/toggle.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Field } from '@toolkit/forms';
 
 export interface ToggleProps {
-  name: string;
+  name?: string;
   input: any;
   field: ToggleFieldDefinition;
   disabled?: boolean;
@@ -12,7 +12,7 @@ export interface ToggleProps {
   onFocus?: <T>(_event?: React.FocusEvent<T>) => void;
 }
 
-interface ToggleFieldDefinition extends Field {
+export interface ToggleFieldDefinition extends Field {
   component: 'toggle';
   toggleLabels?: boolean | FieldLabels;
 }
@@ -26,6 +26,7 @@ export const Toggle: FC<ToggleProps> = ({
   disabled = false,
 }) => {
   const checked = !!(input.value || input.checked);
+  const inputId = name ?? input.name;
   let labels: null | FieldLabels = null;
 
   if (field.toggleLabels) {
@@ -53,14 +54,14 @@ export const Toggle: FC<ToggleProps> = ({
         </span>
       )}
       <div className='relative w-12 h-7'>
-        <ToggleInput id={name} type='checkbox' {...input} />
+        <ToggleInput type='checkbox' {...input} id={inputId} />
         <label
           className='bg-none p-0 outline-none w-12 h-7'
           style={{
             opacity: disabled ? 0.4 : 1,
             pointerEvents: disabled ? 'none' : 'inherit',
           }}
-          htmlFor={name}
+          htmlFor={inputId}
           role='switch'
         >
           <div className='relative w-[48px] h-7 rounded-3xl bg-white shadow-inner border border-gray-200 pointer-events-none -ml-0.5'>