Skip to content

refactor(react-switch): add base state hooks for Switch component #35720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmytrokirpa merged 7 commits into from
Feb 5, 2026
Merged

refactor(react-switch): add base state hooks for Switch component #35720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c3426a7
Initial plan
Copilot Feb 3, 2026
eca970d
feat(react-switch): add base state hooks for Switch component
Copilot Feb 3, 2026
5e088e3
chore: add change file for react-switch
Copilot Feb 3, 2026
3bc3765
refactor(react-switch): include labelPosition in base hooks
Copilot Feb 4, 2026
5f8267d
Merge branch 'master' into copilot/add-base-hooks-react-switch
dmytrokirpa Feb 4, 2026
2cf653d
chore: update change file type to patch and comment to refactor
Copilot Feb 4, 2026
1fd8fce
Merge branch 'master' into copilot/add-base-hooks-react-switch
dmytrokirpa Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-switch-e81c15fc-676d-4d0a-9912-731bec20916c.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "refactor: add base state hooks for Switch component",
"packageName": "@fluentui/react-switch",
"email": "copilot@github.com",
"dependentChangeType": "patch"
}
10 changes: 9 additions & 1 deletion packages/react-components/react-switch/library/src/Switch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './components/Switch/index';
export type {
SwitchBaseProps,
SwitchBaseState,
SwitchOnChangeData,
SwitchProps,
SwitchSlots,
SwitchState,
} from './components/Switch/index';
export {
Switch,
renderSwitch_unstable,
Expand All @@ -7,4 +14,5 @@ export {
switchClassNames,
useSwitchStyles_unstable,
useSwitch_unstable,
useSwitchBase_unstable,
} from './components/Switch/index';
10 changes: 10 additions & 0 deletions packages/react-components/react-switch/library/src/components/Switch/Switch.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,17 @@ export type SwitchProps = Omit<
onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
};

/**
* Switch base props, excluding design-related props like size
*/
export type SwitchBaseProps = Omit<SwitchProps, 'size'>;

/**
* State used in rendering Switch
*/
export type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'labelPosition' | 'size'>>;

/**
* Switch base state, excluding design-related state like size
*/
export type SwitchBaseState = Omit<SwitchState, 'size'>;
11 changes: 9 additions & 2 deletions packages/react-components/react-switch/library/src/components/Switch/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
export { Switch } from './Switch';
export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch.types';
export type {
SwitchBaseProps,
SwitchBaseState,
SwitchOnChangeData,
SwitchProps,
SwitchSlots,
SwitchState,
} from './Switch.types';
export { renderSwitch_unstable } from './renderSwitch';
export { useSwitch_unstable } from './useSwitch';
export { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';
export {
// eslint-disable-next-line @typescript-eslint/no-deprecated
switchClassName,
Expand Down
26 changes: 21 additions & 5 deletions packages/react-components/react-switch/library/src/components/Switch/useSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { CircleFilled } from '@fluentui/react-icons';
import { Label } from '@fluentui/react-label';
import { useFocusWithin } from '@fluentui/react-tabster';
import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
import type { SwitchProps, SwitchState } from './Switch.types';
import type { SwitchProps, SwitchState, SwitchBaseProps, SwitchBaseState } from './Switch.types';

/**
* Create the state required to render Switch.
Expand All @@ -18,15 +18,32 @@ import type { SwitchProps, SwitchState } from './Switch.types';
* @param ref - reference to `<input>` element of Switch
*/
export const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {
const { size = 'medium', ...baseProps } = props;

const baseState = useSwitchBase_unstable(baseProps, ref);

return {
...baseState,
size,
};
};

/**
* 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 const useSwitchBase_unstable = (props: SwitchBaseProps, ref?: React.Ref<HTMLInputElement>): SwitchBaseState => {
// Merge props from surrounding <Field>, if any
props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });

const { checked, defaultChecked, disabled, labelPosition = 'after', size = 'medium', onChange, required } = props;
const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;

const nativeProps = getPartitionedNativeProps({
props,
primarySlotTagName: 'input',
excludedPropNames: ['checked', 'defaultChecked', 'onChange', 'size'],
excludedPropNames: ['checked', 'defaultChecked', 'onChange'],
});

const id = useId('switch-', nativeProps.primary.id);
Expand All @@ -49,13 +66,12 @@ export const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputE
elementType: Label,
});
return {
labelPosition, //Slots definition
labelPosition,
components: { root: 'div', indicator: 'div', input: 'input', label: Label },

root,
indicator,
input,
label,
size,
};
};
4 changes: 4 additions & 0 deletions packages/react-components/react-switch/library/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@ export {
useSwitch_unstable,
} from './Switch';
export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';

// Experimental APIs - will be uncommented in experimental branch
// export { useSwitchBase_unstable } from './Switch';
// export type { SwitchBaseProps, SwitchBaseState } from './Switch';