From 4c27e93c92f0a26766eaec4447a94bdd860b40dd Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 25 Nov 2025 15:57:26 +0200
Subject: [PATCH 1/2] fix(checkbox, radio, switch): add gap for wrapper on
 sample level

---
 samples/inputs/checkbox/label/src/CheckboxLabelStyles.css | 1 +
 samples/inputs/radio/label/src/RadioLabelStyles.css       | 5 +++++
 samples/inputs/radio/label/src/index.tsx                  | 3 ++-
 samples/inputs/switches/label/src/SwitchLabelStyles.css   | 5 +++++
 samples/inputs/switches/label/src/index.tsx               | 5 ++++-
 5 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 samples/inputs/radio/label/src/RadioLabelStyles.css
 create mode 100644 samples/inputs/switches/label/src/SwitchLabelStyles.css

diff --git a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css b/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css
index 7429d5436d..21bf881ab2 100644
--- a/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css
+++ b/samples/inputs/checkbox/label/src/CheckboxLabelStyles.css
@@ -1,4 +1,5 @@
 .wrapper {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
 }
\ No newline at end of file
diff --git a/samples/inputs/radio/label/src/RadioLabelStyles.css b/samples/inputs/radio/label/src/RadioLabelStyles.css
new file mode 100644
index 0000000000..21bf881ab2
--- /dev/null
+++ b/samples/inputs/radio/label/src/RadioLabelStyles.css
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
\ No newline at end of file
diff --git a/samples/inputs/radio/label/src/index.tsx b/samples/inputs/radio/label/src/index.tsx
index 9fddfe2556..59dc6cd1eb 100644
--- a/samples/inputs/radio/label/src/index.tsx
+++ b/samples/inputs/radio/label/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './RadioLabelStyles.css';
 import { IgrRadio, IgrRadioGroup } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
@@ -16,7 +17,7 @@ export default class RadioLabel extends React.Component<any, any> {
                 <div className="container" style={{width: "430px", height:"60px", border: "1px solid gainsboro"}}>
                     <IgrRadioGroup alignment="vertical">
                         <IgrRadio name="fruit" value="apple" labelPosition="before"><span>Apple</span></IgrRadio>
-                        <div style={{display: "flex", alignItems: "center"}}>
+                        <div className="wrapper">
                         <span id="radio-label">Label</span>
                         <IgrRadio
                             name="fruit"
diff --git a/samples/inputs/switches/label/src/SwitchLabelStyles.css b/samples/inputs/switches/label/src/SwitchLabelStyles.css
new file mode 100644
index 0000000000..21bf881ab2
--- /dev/null
+++ b/samples/inputs/switches/label/src/SwitchLabelStyles.css
@@ -0,0 +1,5 @@
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
\ No newline at end of file
diff --git a/samples/inputs/switches/label/src/index.tsx b/samples/inputs/switches/label/src/index.tsx
index a6bb987604..599ce521d5 100644
--- a/samples/inputs/switches/label/src/index.tsx
+++ b/samples/inputs/switches/label/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './SwitchLabelStyles.css';
 import { IgrSwitch } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
@@ -8,7 +9,9 @@ export default function SwitchLabel() {
 
     return (
         <div className="sample">
-            <IgrSwitch aria-labelledby="switchLabel" labelPosition="before"><span id="switch-label">Label</span></IgrSwitch>
+            <div className="wrapper">
+                <IgrSwitch aria-labelledby="switchLabel" labelPosition="before"><span id="switch-label">Label</span></IgrSwitch>
+            </div>
         </div>
     );
 }

From 28302f4a5d0b033f3f8bf6f95ca73a3b9e76d07e Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 25 Nov 2025 16:46:04 +0200
Subject: [PATCH 2/2] refactor(checkbox, radio, switch): align with blazor
 samples

---
 samples/inputs/checkbox/label/src/index.tsx | 1 +
 samples/inputs/radio/label/src/index.tsx    | 2 +-
 samples/inputs/switches/label/src/index.tsx | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/samples/inputs/checkbox/label/src/index.tsx b/samples/inputs/checkbox/label/src/index.tsx
index 1662d02b09..bb155f3d0b 100644
--- a/samples/inputs/checkbox/label/src/index.tsx
+++ b/samples/inputs/checkbox/label/src/index.tsx
@@ -14,6 +14,7 @@ export default class CheckboxLabel extends React.Component<any, any> {
     public render(): JSX.Element {
         return (
             <div className="sample">
+                <IgrCheckbox labelPosition="before">Label</IgrCheckbox>
                 <div className="wrapper">
                     <span id="checkbox-label">Label</span>
                     <IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
diff --git a/samples/inputs/radio/label/src/index.tsx b/samples/inputs/radio/label/src/index.tsx
index 59dc6cd1eb..aad11aae18 100644
--- a/samples/inputs/radio/label/src/index.tsx
+++ b/samples/inputs/radio/label/src/index.tsx
@@ -18,7 +18,7 @@ export default class RadioLabel extends React.Component<any, any> {
                     <IgrRadioGroup alignment="vertical">
                         <IgrRadio name="fruit" value="apple" labelPosition="before"><span>Apple</span></IgrRadio>
                         <div className="wrapper">
-                        <span id="radio-label">Label</span>
+                        <span id="radio-label">Orange</span>
                         <IgrRadio
                             name="fruit"
                             labelPosition="before"
diff --git a/samples/inputs/switches/label/src/index.tsx b/samples/inputs/switches/label/src/index.tsx
index 599ce521d5..39ae73b8c9 100644
--- a/samples/inputs/switches/label/src/index.tsx
+++ b/samples/inputs/switches/label/src/index.tsx
@@ -9,6 +9,7 @@ export default function SwitchLabel() {
 
     return (
         <div className="sample">
+            <IgrSwitch labelPosition="before">Label</IgrSwitch>
             <div className="wrapper">
                 <IgrSwitch aria-labelledby="switchLabel" labelPosition="before"><span id="switch-label">Label</span></IgrSwitch>
             </div>