dxc-technology · Mil4n0r · Apr 9, 2025 · Feb 21, 2025 · Feb 21, 2025 · Feb 24, 2025
diff --git a/apps/website/pages/components/switch/code.tsx b/apps/website/pages/components/switch/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
+import SwitchCodePage from "screens/components/switch/code/SwitchCodePage";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Switch code — Halstack Design System</title>
+    </Head>
+    <SwitchCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <SwitchPageLayout>{page}</SwitchPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/switch/index.tsx b/apps/website/pages/components/switch/index.tsx
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import SwitchPageLayout from "screens/components/switch/SwitchPageLayout";
-import SwitchCodePage from "screens/components/switch/code/SwitchCodePage";
+import SwitchOverviewPage from "screens/components/switch/overview/SwitchOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Switch — Halstack Design System</title>
-      </Head>
-      <SwitchCodePage></SwitchCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Switch — Halstack Design System</title>
+    </Head>
+    <SwitchOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <SwitchPageLayout>{page}</SwitchPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <SwitchPageLayout>{page}</SwitchPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/switch/specifications.tsx b/apps/website/pages/components/switch/specifications.tsx
diff --git a/apps/website/pages/components/switch/usage.tsx b/apps/website/pages/components/switch/usage.tsx
diff --git a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
@@ -1,11 +1,13 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
 import Example from "@/common/example/Example";
 import stacking from "./examples/stacking";
 import Image from "@/common/Image";
 import anatomy from "./images/checkbox_anatomy.png";
+import Link from "next/link";
+import labelPosition from "./examples/labelPosition";
 
 const sections = [
   {
@@ -52,27 +54,106 @@ const sections = [
       {
         title: "Vertical stacking",
         content: (
-          <DxcParagraph>
-            To improve readability and scalability, checkboxes can be stacked vertically, especially in forms or
-            settings panels, allowing users to process options more efficiently without excessive eye movement. Leave
-            8px of spacing between vertically stacked checkboxes.
-          </DxcParagraph>
+          <>
+            <DxcParagraph>
+              To <strong>improve readability and scalability</strong>, checkboxes can be stacked vertically, especially
+              in forms or settings panels, allowing users to process options more efficiently without excessive eye
+              movement.
+            </DxcParagraph>
+            <DxcParagraph>Leave minimum 4px of spacing between vertically stacked checkboxes.</DxcParagraph>
+          </>
         ),
       },
       {
         title: "Horizontal stacking",
         content: (
-          <DxcParagraph>
-            Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a
-            consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is
-            related to a single category, consider using a group label to provide context as this will enhance usability
-            and help users make informed selections. Horizontally stacked checkboxes maintain a separation of, minimum,
-            32px.
-          </DxcParagraph>
+          <>
+            <DxcParagraph>
+              Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a
+              consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is
+              related to a single category, consider using a group label to provide context as this will enhance
+              usability and help users make informed selections.
+            </DxcParagraph>
+            <DxcParagraph>Horizontally stacked checkboxes maintain a separation of, minimum, 24px.</DxcParagraph>
+          </>
         ),
       },
     ],
   },
+  {
+    title: "Label position",
+    content: (
+      <>
+        <DxcParagraph>
+          By default, the label is placed <strong>to the left of the checkbox</strong>, but it can also be positioned{" "}
+          <strong>to the right</strong> when needed. Choose the label position that best fits your layout and ensures
+          clear readability and alignment with surrounding elements.
+        </DxcParagraph>
+        <DxcParagraph>
+          We recommend selecting a label placement that maintains a strong visual connection between the checkbox and
+          its description, without disrupting the overall flow of the interface.
+        </DxcParagraph>
+        <Example example={labelPosition} />
+      </>
+    ),
+  },
+  {
+    title: "Checkbox vs. radio group vs. switch",
+    content: (
+      <>
+        <DxcParagraph>
+          Although checkboxes,{" "}
+          <Link href="/components/radio-group" passHref legacyBehavior>
+            <DxcLink>radio groups</DxcLink>
+          </Link>
+          , and{" "}
+          <Link href="/components/checkbox" passHref legacyBehavior>
+            <DxcLink>switches</DxcLink>
+          </Link>{" "}
+          may appear as selection controls, they serve distinct purposes in a user interface:
+        </DxcParagraph>
+        <DxcTable>
+          <thead>
+            <tr>
+              <th>Component</th>
+              <th>Use case</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Checkbox</strong>
+              </td>
+              <td>
+                Use when users can select <strong>multiple options</strong> independently. Each checkbox represents an
+                on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+                may allow none, some, or all options to be selected.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Radio group</strong>
+              </td>
+              <td>
+                Use when the user must select <strong>only one option</strong> from a list of predefined, mutually
+                exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+                decision-making.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Switch</strong>
+              </td>
+              <td>
+                Use for a <strong>single, immediate toggle</strong> between two states, like on/off or enabled/disabled.
+                Switches should act instantly and are best for system or UI-level settings.
+              </td>
+            </tr>
+          </tbody>
+        </DxcTable>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

diff --git a/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts b/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
@@ -0,0 +1,20 @@
+import { DxcCheckbox, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xl)">
+        <DxcCheckbox defaultChecked label="Check all" />
+        <DxcCheckbox label="Check all" labelPosition="after" />
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcCheckbox,
+  DxcInset,
+  DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.ts b/apps/website/screens/components/checkbox/overview/examples/stacking.ts
@@ -1,21 +1,33 @@
-import { DxcCheckbox, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import { DxcCheckbox, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/halstack-react";
 
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="5rem" justifyContent="center">
-        <DxcFlex direction="column" gap="0.5rem">
-          <DxcHeading level={4} text="Vertical" />
-          <DxcCheckbox label="Option" labelPosition="after" />
-          <DxcCheckbox label="Option" labelPosition="after" />
-          <DxcCheckbox label="Option" labelPosition="after" />
+      <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center">
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Vertical
+          </DxcTypography>
+          <DxcCheckbox label="Option 01" labelPosition="after" />
+          <DxcCheckbox label="Option 02" labelPosition="after" />
+          <DxcCheckbox label="Option 03" labelPosition="after" />
         </DxcFlex>
-        <DxcFlex direction="column" gap="0.5rem">
-          <DxcHeading level={4} text="Horizontal" />
-          <DxcFlex gap="1.5rem">
-            <DxcCheckbox label="Option" labelPosition="after" />
-            <DxcCheckbox label="Option" labelPosition="after" />
-            <DxcCheckbox label="Option" labelPosition="after" />
+        <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
+          <DxcTypography
+            color="var(--color-fg-neutral-dark)"
+            fontSize="var(--typography-label-m)"
+            fontWeight="var(--typography-label-semibold)"
+          >
+            Horizontal
+          </DxcTypography>
+          <DxcFlex gap="var(--spacing-gap-l)">
+            <DxcCheckbox label="Option 01" labelPosition="after" />
+            <DxcCheckbox label="Option 02" labelPosition="after" />
+            <DxcCheckbox label="Option 03" labelPosition="after" />
           </DxcFlex>
         </DxcFlex>
       </DxcFlex>
@@ -27,7 +39,7 @@ const scope = {
   DxcCheckbox,
   DxcInset,
   DxcFlex,
-  DxcHeading,
+  DxcTypography,
 };
 
 export default { code, scope };
diff --git a/apps/website/screens/components/switch/SwitchPageLayout.tsx b/apps/website/screens/components/switch/SwitchPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const SwitchPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/switch" },
-    { label: "Usage", path: "/components/switch/usage" },
-    { label: "Specifications", path: "/components/switch/specifications" },
+    { label: "Overview", path: "/components/switch" },
+    { label: "Code", path: "/components/switch/code" },
   ];
 
   return (
@@ -17,11 +16,10 @@ const SwitchPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Switch" />
           <DxcParagraph>
-            Switch toggles are elements that can get two simple states, each of them has an impact on the system and it
-            can be switched on or off, there are no more options. If the switch toggle is on one state, the action to
-            change it will modify to value of the element to the contrary.
+            A switch allows users to toggle a single setting between two opposing states, such as on/off or
+            enabled/disabled. It represents a binary choice that takes effect immediately.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}