diff --git a/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json b/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json new file mode 100644 index 00000000000000..b128033116e482 --- /dev/null +++ b/change/@fluentui-react-checkbox-4ebdfb9d-a372-4ce7-99f4-c66d376885b1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 0eb3cffda9e34c..cccbf7712cd8d0 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -19,6 +19,7 @@ const useRootBaseClassName = makeResetStyles({ position: 'relative', display: 'inline-flex', cursor: 'pointer', + verticalAlign: 'middle', color: tokens.colorNeutralForeground3, ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), });