@fluentui/react-switch 9.6.1 → 9.7.0

package/CHANGELOG.md

@@ -1,17 +1,26 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Wed, 11 Mar 2026 09:20:38 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Mar 2026 08:10:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.0)
+
+Thu, 26 Mar 2026 08:10:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.6.1..@fluentui/react-switch_v9.7.0)
+
+### Minor changes
+
+- feat: add base hooks for Switch ([PR #35820](https://github.com/microsoft/fluentui/pull/35820) by dmytrokirpa@microsoft.com)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.6.1)
 
-Wed, 11 Mar 2026 09:20:38 GMT 
+Wed, 11 Mar 2026 09:22:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.6.0..@fluentui/react-switch_v9.6.1)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
 
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.6.0)
 

package/dist/index.d.ts

@@ -10,13 +10,23 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render a Switch component by passing the state defined props to the appropriate slots.
  */
-export declare const renderSwitch_unstable: (state: SwitchState) => JSXElement;
+export declare const renderSwitch_unstable: (state: SwitchBaseState) => JSXElement;
 
 /**
  * Switches enable users to trigger an option on or off through pressing the component.
  */
 export declare const Switch: ForwardRefComponent<SwitchProps>;
 
+/**
+ * Switch base props, excluding design-related props like size
+ */
+export declare type SwitchBaseProps = Omit<SwitchProps, 'size'>;
+
+/**
+ * Switch base state, excluding design-related state like size
+ */
+export declare type SwitchBaseState = Omit<SwitchState, 'size'>;
+
 /**
  * @deprecated Use `switchClassNames.root` instead.
  */
@@ -113,6 +123,14 @@ export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<Sw
  */
 export declare const useSwitch_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLInputElement>) => SwitchState;
 
+/**
+ * Base hook for Switch component, manages state and structure common to all variants of Switch
+ *
+ * @param props - base props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitchBase_unstable: (props: SwitchBaseProps, ref?: React_2.Ref<HTMLInputElement>) => SwitchBaseState;
+
 /**
  * Apply styling to the Switch slots based on the state
  */

package/lib/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchBaseState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchBaseState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}

package/lib/index.js

@@ -1,5 +1,2 @@
 export { Switch, renderSwitch_unstable, // eslint-disable-next-line @typescript-eslint/no-deprecated
-switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable } from './Switch';
- // Experimental APIs - will be uncommented in experimental branch
- // export { useSwitchBase_unstable } from './Switch';
- // export type { SwitchBaseProps, SwitchBaseState } from './Switch';
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from './Switch';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n\n// Experimental APIs - will be uncommented in experimental branch\n// export { useSwitchBase_unstable } from './Switch';\n// export type { SwitchBaseProps, SwitchBaseState } from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;CAGlB,iEAAiE;CACjE,qDAAqD;CACrD,oEAAoE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW"}

package/lib-commonjs/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;8BACzD,eAAA,EAACJ,MAAMK,SAAS,EAAA,CAAA;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAG/D,EAAE"}
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchBaseState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchBaseState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;8BACzD,eAAA,EAACJ,MAAMK,SAAS,EAAA,CAAA;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAG/D,EAAE"}

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     switchClassNames: function() {
         return _Switch.switchClassNames;
     },
+    useSwitchBase_unstable: function() {
+        return _Switch.useSwitchBase_unstable;
+    },
     useSwitchStyles_unstable: function() {
         return _Switch.useSwitchStyles_unstable;
     },
@@ -29,6 +32,3 @@ _export(exports, {
     }
 });
 const _Switch = require("./Switch");
- // Experimental APIs - will be uncommented in experimental branch
- // export { useSwitchBase_unstable } from './Switch';
- // export type { SwitchBaseProps, SwitchBaseState } from './Switch';

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n\n// Experimental APIs - will be uncommented in experimental branch\n// export { useSwitchBase_unstable } from './Switch';\n// export type { SwitchBaseProps, SwitchBaseState } from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB,EACrB,4DAA4D;;;eAC5DC,uBAAe;;;eACfC,wBAAgB;;;eAChBC,gCAAwB;;;eACxBC,0BAAkB;;;wBACb,WAAW;CAGlB,iEAAiE;CACjE,qDAAqD;CACrD,oEAAoE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB,EACrB,4DAA4D;;;eAC5DC,uBAAe;;;eACfC,wBAAgB;;;eAGhBG,8BAAsB;;;eAFtBF,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.6.1",
+  "version": "9.7.0",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",