diff --git a/.changeset/brave-terms-obey.md b/.changeset/brave-terms-obey.md
new file mode 100644
index 00000000000..c3dbd243387
--- /dev/null
+++ b/.changeset/brave-terms-obey.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": minor
+---
+
+ToggleSwitch: Added new `labelProps` to allow for customization of label element.
diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx
index 5818a81249e..44027ac72c8 100644
--- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx
+++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.test.tsx
@@ -121,3 +121,25 @@ it('should not render an icon if it is set to null', () => {
const { container } = render();
expect(container.querySelector('.iui-toggle-switch-icon')).toBeNull();
});
+
+it('should correctly pass labelProps', () => {
+ const { container } = render(
+ ,
+ );
+
+ const label = container.querySelector('.some-class') as HTMLElement;
+
+ expect(label.style.color).toBe('red');
+
+ expect(
+ (container.querySelector('.switch-class') as HTMLElement).style.color,
+ ).toBe('blue');
+});
diff --git a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
index d9cd96a21f8..8ce4a4fe170 100644
--- a/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/itwinui-react/src/core/ToggleSwitch/ToggleSwitch.tsx
@@ -12,6 +12,10 @@ type ToggleSwitchProps = {
* Label for the toggle switch.
*/
label?: React.ReactNode;
+ /**
+ * Passes properties for ToggleSwitch label.
+ */
+ labelProps?: React.ComponentProps<'span'>;
/**
* Position of the label.
* @default 'right'
@@ -63,6 +67,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
className,
style,
size = 'default',
+ labelProps = {},
icon: iconProp,
...rest
} = props;
@@ -101,7 +106,11 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
)}
{label && (
-
+
{label}
)}