diff --git a/src/__internal__/checkable-input/checkable-input.style.ts b/src/__internal__/checkable-input/checkable-input.style.ts
index 2b131b44a5..426b3215c1 100644
--- a/src/__internal__/checkable-input/checkable-input.style.ts
+++ b/src/__internal__/checkable-input/checkable-input.style.ts
@@ -2,10 +2,11 @@ import styled, { css } from "styled-components";
 
 import FieldHelpStyle from "../field-help/field-help.style";
 import { FieldLineStyle } from "../form-field/form-field.style";
-import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import LabelStyle, { StyledLabelContainer } from "../label/label.style";
-import StyledHelp from "../../components/help/help.style";
 import StyledValidationIcon from "../validations/validation-icon.style";
+import StyledHelp from "../../components/help/help.style";
+
+import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 
 const StyledCheckableInput = styled.div`
   display: inline-block;
@@ -30,6 +31,8 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     labelInline,
     reverse,
   }) => css`
+    width: 100% !important;
+
     ${FieldLineStyle} {
       display: flex;
     }
@@ -105,6 +108,7 @@ const StyledCheckableInputWrapper = styled.div<StyledCheckableInputWrapperProps>
     css`
       ${StyledCheckableInput} {
         width: ${inputWidth}% !important;
+        min-width: 67px;
       }
     `}
 
diff --git a/src/__internal__/label/label.component.tsx b/src/__internal__/label/label.component.tsx
index 22058c961b..ff0a7420be 100644
--- a/src/__internal__/label/label.component.tsx
+++ b/src/__internal__/label/label.component.tsx
@@ -38,6 +38,8 @@ export interface LabelProps
   className?: string;
   /** Sets aria-label for label element */
   "aria-label"?: string;
+  /** Whether this component is shown against a dark background */
+  isDarkBackground?: boolean;
 }
 
 const shouldDisplayValidationIcon = ({
@@ -70,6 +72,7 @@ export const Label = ({
   htmlFor,
   info,
   inline,
+  isDarkBackground = false,
   isRequired,
   labelId,
   optional,
@@ -167,6 +170,7 @@ export const Label = ({
         isRequired={isRequired}
         as={as}
         aria-label={ariaLabel}
+        isDarkBackground={isDarkBackground}
       >
         {children}
       </StyledLabel>
diff --git a/src/__internal__/label/label.style.ts b/src/__internal__/label/label.style.ts
index 9532d634c1..83f65e8313 100644
--- a/src/__internal__/label/label.style.ts
+++ b/src/__internal__/label/label.style.ts
@@ -5,10 +5,17 @@ export interface StyledLabelProps {
   disabled?: boolean;
   /** Flag to configure component as mandatory */
   isRequired?: boolean;
+  /** Flag to determine whether to use colours for dark backgrounds */
+  isDarkBackground?: boolean;
 }
 
 const StyledLabel = styled.label<StyledLabelProps>`
-  color: var(--colorsUtilityYin090);
+  ${({ isDarkBackground }) =>
+    css`
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsUtilityYin090)"};
+    `}
   display: block;
   font-weight: var(--fontWeights500);
 
diff --git a/src/__internal__/label/label.test.tsx b/src/__internal__/label/label.test.tsx
index 2b6360d47e..5266663caf 100644
--- a/src/__internal__/label/label.test.tsx
+++ b/src/__internal__/label/label.test.tsx
@@ -168,3 +168,21 @@ test("renders with expected styles when `inline` is true and `align` is 'left'",
     justifyContent: "flex-start",
   });
 });
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true", () => {
+  render(<Label isDarkBackground>foo</Label>);
+
+  expect(screen.getByTestId("label-container").childNodes[0]).toHaveStyle({
+    color: "var(--colorsUtilityYang100)",
+  });
+});
+
+// coverage
+test("renders with normal styles when `isDarkBackground` is false", () => {
+  render(<Label isDarkBackground={false}>foo</Label>);
+
+  expect(screen.getByTestId("label-container").childNodes[0]).toHaveStyle({
+    color: "var(--colorsUtilityYin090)",
+  });
+});
diff --git a/src/components/switch/__internal__/switch-slider-panel.style.ts b/src/components/switch/__internal__/switch-slider-panel.style.ts
index 044ff41888..428bb68008 100644
--- a/src/components/switch/__internal__/switch-slider-panel.style.ts
+++ b/src/components/switch/__internal__/switch-slider-panel.style.ts
@@ -1,29 +1,37 @@
 import styled, { css } from "styled-components";
 
-import StyledLoader from "../../loader/loader.style";
-import StyledLoaderSquare from "../../loader/loader-square.style";
 import { SwitchProps } from "../switch.component";
+import StyledLoaderSquare from "../../loader/loader-square.style";
+import StyledLoader from "../../loader/loader.style";
 
 export interface SwitchSliderPanelProps {
   isLoading?: boolean;
   size?: SwitchProps["size"];
+  isDarkBackground?: boolean;
 }
 
 const SwitchSliderPanel = styled.div`
-  ${({ isLoading, size }: SwitchSliderPanelProps) => css`
+  ${({ isLoading, size, isDarkBackground }: SwitchSliderPanelProps) => css`
     border: 0;
-    color: var(--colorsActionMinorYang100);
+    color: ${isDarkBackground
+      ? "var(--colorsUtilityYin100)"
+      : "var(--colorsActionMinorYang100)"};
     margin: auto;
     position: absolute;
     left: 0;
 
     &[type="on"] {
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYin100)"
+        : "var(--colorsUtilityYang100)"};
       margin-left: 9px;
       padding-right: ${size === "large" ? "43px" : "27px"};
     }
 
     &[type="off"] {
-      color: var(--colorsActionMinor500);
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsActionMinor500)"};
       margin-right: 9px;
       padding-left: ${size === "large" ? "43px" : "27px"};
     }
diff --git a/src/components/switch/__internal__/switch-slider-panel.test.tsx b/src/components/switch/__internal__/switch-slider-panel.test.tsx
index 2271ae0870..0ec278c764 100644
--- a/src/components/switch/__internal__/switch-slider-panel.test.tsx
+++ b/src/components/switch/__internal__/switch-slider-panel.test.tsx
@@ -71,3 +71,21 @@ describe("when the theme is set to sageTheme", () => {
     );
   });
 });
+
+// coverage
+test("renders with normal styles when `isDarkBackground` is false", () => {
+  render(<Switch onChange={() => {}} isDarkBackground={false} />);
+
+  const switchPanel = screen.getByTestId("slider-panel");
+
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsActionMinorYang100)");
+});
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true", () => {
+  render(<Switch onChange={() => {}} isDarkBackground />);
+
+  const switchPanel = screen.getByTestId("slider-panel");
+
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)");
+});
diff --git a/src/components/switch/__internal__/switch-slider.component.tsx b/src/components/switch/__internal__/switch-slider.component.tsx
index b456341804..a0797e3a6b 100644
--- a/src/components/switch/__internal__/switch-slider.component.tsx
+++ b/src/components/switch/__internal__/switch-slider.component.tsx
@@ -13,6 +13,7 @@ export interface SwitchSliderProps extends ValidationProps {
   loading?: boolean;
   size?: "small" | "large";
   useValidationIcon?: boolean;
+  isDarkBackground?: boolean;
 }
 
 const SwitchSlider = ({
@@ -24,6 +25,7 @@ const SwitchSlider = ({
   warning,
   info,
   useValidationIcon,
+  isDarkBackground,
 }: SwitchSliderProps) => {
   const locale = useLocale();
   const onText = locale.switch.on();
@@ -45,6 +47,7 @@ const SwitchSlider = ({
     error,
     warning,
     info,
+    isDarkBackground,
   };
 
   const sliderPanelStyleProps = {
@@ -52,6 +55,7 @@ const SwitchSlider = ({
     size,
     type: checked ? "on" : "off",
     disabled,
+    isDarkBackground,
   };
 
   const loaderProps = {
diff --git a/src/components/switch/__internal__/switch-slider.style.ts b/src/components/switch/__internal__/switch-slider.style.ts
index b6a307ff18..4bdacaa81c 100644
--- a/src/components/switch/__internal__/switch-slider.style.ts
+++ b/src/components/switch/__internal__/switch-slider.style.ts
@@ -1,10 +1,11 @@
 import styled, { css } from "styled-components";
 
-import SwitchSliderPanel from "./switch-slider-panel.style";
 import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style";
-import { SwitchSliderProps } from "./switch-slider.component";
 import baseTheme, { ThemeObject } from "../../../style/themes/base";
 
+import SwitchSliderPanel from "./switch-slider-panel.style";
+import { SwitchSliderProps } from "./switch-slider.component";
+
 interface StyledSwitchSliderProps
   extends Pick<
     SwitchSliderProps,
@@ -12,6 +13,7 @@ interface StyledSwitchSliderProps
   > {
   isLoading?: boolean;
   theme?: Partial<ThemeObject>;
+  isDarkBackground?: boolean;
 }
 
 const StyledSwitchSlider = styled.div`
@@ -23,6 +25,7 @@ const StyledSwitchSlider = styled.div`
     error,
     warning,
     theme,
+    isDarkBackground,
   }: StyledSwitchSliderProps) => css`
     display: flex;
     font-size: 12px;
@@ -39,14 +42,22 @@ const StyledSwitchSlider = styled.div`
       theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)"
     };
     border-style: solid;
-    border-color: var(--colorsActionMinor400);
+    border-color: ${
+      isDarkBackground
+        ? "var(--colorsUtilityYang100)"
+        : "var(--colorsActionMinor400)"
+    };
     border-width: var(--borderWidth200);
     box-sizing: border-box;
     margin-top: ${size === "large" ? "-47px" : "-28px"};
     align-items: center;
 
     &::before {
-      background-color: var(--colorsActionMinor400);
+      background-color: ${
+        isDarkBackground
+          ? "var(--colorsUtilityYang100)"
+          : "var(--colorsActionMinor400)"
+      };
       bottom: 4px;
       content: "";
       height: ${size === "large" ? "var(--spacing400)" : "var(--spacing200)"};
@@ -61,7 +72,9 @@ const StyledSwitchSlider = styled.div`
     ${
       checked &&
       css`
-        background-color: var(--colorsActionMinor500);
+        background-color: ${isDarkBackground
+          ? "var(--colorsUtilityYang100)"
+          : "var(--colorsActionMinor500)"};
         border-color: var(--colorsActionMinorTransparent);
 
         &::before {
@@ -69,7 +82,9 @@ const StyledSwitchSlider = styled.div`
             100% -
               ${size === "large" ? "var(--spacing500)" : "var(--spacing300)"}
           );
-          background-color: var(--colorsActionMinorYang100);
+          background-color: ${isDarkBackground
+            ? "var(--colorsUtilityYin100)"
+            : "var(--colorsActionMinorYang100)"};
         }
       `
     }
diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx
index dac132cf78..856b06db5b 100644
--- a/src/components/switch/__internal__/switch-slider.test.tsx
+++ b/src/components/switch/__internal__/switch-slider.test.tsx
@@ -134,3 +134,30 @@ test("when `size` is large and the consumer has opted out of rounded corners sty
 
   expect(switchPanel).toHaveStyle("border-radius: 30px");
 });
+
+// coverage
+test("renders with normal styles when `isDarkBackground` is false", () => {
+  render(<SwitchSlider isDarkBackground={false} />);
+
+  const switchPanel = screen.getByTestId("slider");
+
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsActionMinorYang100)");
+});
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true", () => {
+  render(<SwitchSlider isDarkBackground />);
+
+  const switchPanel = screen.getByTestId("slider");
+
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYin100)");
+});
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true and checked is true", () => {
+  render(<SwitchSlider isDarkBackground checked />);
+
+  const switchPanel = screen.getByTestId("slider");
+
+  expect(switchPanel).toHaveStyleRule("color: var(--colorsUtilityYang100)");
+});
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
index f217a21bfc..a77c5f4220 100644
--- a/src/components/switch/switch.component.tsx
+++ b/src/components/switch/switch.component.tsx
@@ -1,19 +1,19 @@
 import React, { useState, useCallback, useContext, useRef } from "react";
 import { MarginProps } from "styled-system";
 
-import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
+import Box from "../box";
 import CheckableInput, {
   CommonCheckableInputProps,
 } from "../../__internal__/checkable-input";
-import SwitchSlider from "./__internal__/switch-slider.component";
-import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import Label from "../../__internal__/label";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
+import Logger from "../../__internal__/utils/logger";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import Box from "../box";
-import Label from "../../__internal__/label";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
+import SwitchSlider from "./__internal__/switch-slider.component";
 import guid from "../../__internal__/utils/helpers/guid";
 
 export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
@@ -39,6 +39,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps {
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** [Legacy] Aria label for rendered help component */
   helpAriaLabel?: string;
+  /** Whether this component resides on a dark background */
+  isDarkBackground?: boolean;
 }
 
 let deprecateUncontrolledWarnTriggered = false;
@@ -76,6 +78,7 @@ export const Switch = React.forwardRef(
       "data-element": dataElement,
       "data-role": dataRole,
       helpAriaLabel,
+      isDarkBackground = false,
       ...rest
     }: SwitchProps,
     ref: React.ForwardedRef<HTMLInputElement>
@@ -124,6 +127,7 @@ export const Switch = React.forwardRef(
       "data-role": dataRole,
       "data-element": dataElement,
       checked: isControlled ? checked : checkedInternal,
+      isDarkBackground,
       fieldHelpInline,
       labelInline: shouldLabelBeInline,
       labelSpacing,
@@ -136,6 +140,7 @@ export const Switch = React.forwardRef(
       checked: isControlled ? checked : checkedInternal,
       disabled: disabled || loading,
       loading,
+      isDarkBackground,
       size,
       error,
       warning,
@@ -158,6 +163,7 @@ export const Switch = React.forwardRef(
       labelInline: shouldLabelBeInline,
       labelSpacing,
       onBlur,
+      isDarkBackground,
       onFocus,
       onChange: isControlled ? onChange : onChangeInternal,
       id,
@@ -180,6 +186,8 @@ export const Switch = React.forwardRef(
       "data-role": dataRole,
       "data-element": dataElement,
       checked: isControlled ? checked : checkedInternal,
+      labelInline: shouldLabelBeInline,
+      isDarkBackground,
       size,
       ...marginProps,
     };
@@ -188,6 +196,7 @@ export const Switch = React.forwardRef(
       checked: isControlled ? checked : checkedInternal,
       disabled: disabled || loading,
       loading,
+      isDarkBackground,
       size,
       error,
       warning,
@@ -197,10 +206,12 @@ export const Switch = React.forwardRef(
       autoFocus,
       // set aria-invalid but prevent validationIconId from being added to aria-describedby
       error: !!error,
+      warning,
       disabled: disabled || loading,
       loading,
       checked: isControlled ? checked : checkedInternal,
       onBlur,
+      isDarkBackground,
       onFocus,
       onChange: isControlled ? onChange : onChangeInternal,
       id,
@@ -223,24 +234,83 @@ export const Switch = React.forwardRef(
       .filter(Boolean)
       .join(" ");
 
+    if (!validationRedesignOptIn) {
+      return (
+        <>
+          <TooltipProvider
+            helpAriaLabel={helpAriaLabel}
+            tooltipPosition={tooltipPosition}
+          >
+            <StyledSwitch {...switchStyleProps}>
+              <CheckableInput {...inputProps}>
+                <SwitchSlider {...switchSliderProps} />
+              </CheckableInput>
+            </StyledSwitch>
+          </TooltipProvider>
+        </>
+      );
+    }
+
+    const defaultMargin = labelInline ? 1 : 0;
+    const errorMargin = error || warning ? 3 : defaultMargin;
+    const direction = labelInline ? "row" : "column";
+    const reverseDirection = labelInline ? "row-reverse" : "column";
+
+    let requestedInputWidth = rest.inputWidth;
+    if (
+      requestedInputWidth &&
+      requestedInputWidth <= 1 &&
+      requestedInputWidth >= 0
+    )
+      requestedInputWidth *= 100;
+    const enforcedInputWidth =
+      requestedInputWidth && typeof requestedInputWidth === "number"
+        ? `${requestedInputWidth}%`
+        : rest.inputWidth;
+
     return (
       <>
-        {validationRedesignOptIn ? (
-          <StyledSwitch {...switchStylePropsForNewValidation}>
+        <StyledSwitch {...switchStylePropsForNewValidation}>
+          <Box
+            data-role="field-reverse-wrapper"
+            display="flex"
+            flexWrap="wrap"
+            alignItems={error || warning ? "flex-start" : undefined}
+            flexDirection={!reverse ? reverseDirection : direction}
+            width={labelInline ? "100%" : "auto"}
+          >
             <Label
+              isDarkBackground={isDarkBackground}
               labelId={labelId.current}
               disabled={disabled}
               isRequired={required}
               optional={isOptional}
             >
-              {label}
+              <Box
+                data-role="hint-text-wrapper"
+                mb={labelHelp ? 0 : 1}
+                mr={reverse ? 0 : 1}
+                ml={reverse ? 0 : 1}
+              >
+                {label}
+                {labelHelp && (
+                  <StyledHintText
+                    data-role="hint-text"
+                    id={inputHintId.current}
+                    isDarkBackground={isDarkBackground}
+                  >
+                    {labelHelp}
+                  </StyledHintText>
+                )}
+              </Box>
             </Label>
-            {labelHelp && (
-              <StyledHintText data-role="hint-text" id={inputHintId.current}>
-                {labelHelp}
-              </StyledHintText>
-            )}
-            <Box position="relative">
+            <Box
+              ml={reverse ? errorMargin : rest.ml}
+              mr={!reverse ? errorMargin : rest.mr}
+              position="relative"
+              id="input-wrapper"
+              width={enforcedInputWidth}
+            >
               <ValidationMessage
                 error={error}
                 warning={warning}
@@ -250,28 +320,31 @@ export const Switch = React.forwardRef(
                 <ErrorBorder
                   data-role="error-border"
                   warning={!!(!error && warning)}
+                  reverse={!reverse}
                 />
               )}
               <CheckableInput
                 ariaLabelledBy={`${label && labelId.current}`}
                 ariaDescribedBy={ariaDescribedBy}
                 {...inputPropsForNewValidation}
+                fieldHelp={labelInline ? undefined : rest.fieldHelp}
               >
                 <SwitchSlider {...switchSliderPropsForNewValidation} />
               </CheckableInput>
             </Box>
-          </StyledSwitch>
-        ) : (
-          <TooltipProvider
-            helpAriaLabel={helpAriaLabel}
-            tooltipPosition={tooltipPosition}
+          </Box>
+        </StyledSwitch>
+
+        {labelInline && rest.fieldHelp && (
+          <Box
+            color={
+              isDarkBackground
+                ? "var(--colorsUtilityYang100)"
+                : "var(--colorsUtilityYin090)"
+            }
           >
-            <StyledSwitch {...switchStyleProps}>
-              <CheckableInput {...inputProps}>
-                <SwitchSlider {...switchSliderProps} />
-              </CheckableInput>
-            </StyledSwitch>
-          </TooltipProvider>
+            {rest.fieldHelp}
+          </Box>
         )}
       </>
     );
diff --git a/src/components/switch/switch.mdx b/src/components/switch/switch.mdx
index ad01c01c44..817fcb833f 100644
--- a/src/components/switch/switch.mdx
+++ b/src/components/switch/switch.mdx
@@ -83,7 +83,7 @@ You can use the `isOptional` prop to indicate if the field is optional.
 
 ### With labelInline
 
-**Note:** The `labelInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true. 
+**Note:** The `labelInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true.
 
 <Canvas of={SwitchStories.WithLabelInline} name="With labelInline" />
 
@@ -162,6 +162,49 @@ The folowing examples use the new validation pattern that is available by settin
   name="single switch - new string validation"
 />
 
+### Inline field layout with new validation
+#### Default usage
+
+<Canvas
+  of={SwitchStories.NewValidationInlineDefault}
+  name="single switch - inline validation"
+/>
+
+#### With optional props
+
+<Canvas
+  of={SwitchStories.NewValidationInlineDefaultWithOptions}
+  name="single switch - inline validation with options"
+/>
+
+#### With error
+
+<Canvas
+  of={SwitchStories.NewValidationInlineError}
+  name="single switch - inline validation with error"
+/>
+
+#### With overflowing hint text
+
+<Canvas
+  of={SwitchStories.NewValidationInlineWithOverflowHintText}
+  name="single switch - inline validation with overflowing hint text"
+/>
+
+#### On a dark background
+
+<Canvas
+  of={SwitchStories.NewValidationInlineWithDarkMode}
+  name="single switch - inline validation with dark background support"
+/>
+
+#### On a dark background and with an error
+
+<Canvas
+  of={SwitchStories.NewValidationInlineWithDarkModeAndError}
+  name="single switch - inline validation with dark background support and error"
+/>
+
 ## Props
 
 ### Switch
diff --git a/src/components/switch/switch.stories.tsx b/src/components/switch/switch.stories.tsx
index 97c24ca139..a4d324502b 100644
--- a/src/components/switch/switch.stories.tsx
+++ b/src/components/switch/switch.stories.tsx
@@ -299,3 +299,92 @@ export const NewValidationString: Story = () => {
   );
 };
 NewValidationString.storyName = "Single Switch - New Validation";
+
+export const NewValidationInlineDefault: Story = () => {
+  return (
+    <Box m={2}>
+      <CarbonProvider validationRedesignOptIn>
+        <Switch label="Example switch" labelInline />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineDefault.storyName = "New Validation - Inline";
+
+export const NewValidationInlineDefaultWithOptions: Story = () => {
+  return (
+    <Box m={2}>
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch"
+          labelInline
+          labelHelp="Hint text"
+          fieldHelp="Field help"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineDefaultWithOptions.storyName =
+  "New Validation - Inline with options";
+
+export const NewValidationInlineError: Story = () => {
+  return (
+    <Box m={2}>
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch (error state)"
+          labelInline
+          error="Error message (Fix is required)"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineError.storyName = "New Validation - Inline with error";
+
+export const NewValidationInlineWithOverflowHintText: Story = () => {
+  return (
+    <Box m={2}>
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch"
+          labelInline
+          labelHelp="Really long hint text that should wrap to the next line if it gets too long"
+          fieldHelp="Field help"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineWithOverflowHintText.storyName =
+  "New Validation - Inline with overflowing hint text";
+
+export const NewValidationInlineWithDarkMode: Story = () => {
+  return (
+    <Box m={2} padding={3} backgroundColor="#000000">
+      <CarbonProvider validationRedesignOptIn>
+        <Switch label="Example switch" labelInline isDarkBackground />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineWithDarkMode.storyName =
+  "New Validation - Inline with dark background support";
+
+export const NewValidationInlineWithDarkModeAndError: Story = () => {
+  return (
+    <Box m={2} padding={3} backgroundColor="#000000">
+      <CarbonProvider validationRedesignOptIn>
+        <Switch
+          label="Example switch (error state)"
+          labelInline
+          isDarkBackground
+          error="Error message (Fix is required)"
+        />
+      </CarbonProvider>
+    </Box>
+  );
+};
+NewValidationInlineWithDarkModeAndError.storyName =
+  "New Validation - Inline with dark background support and error";
diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts
index f3621cb05a..5d584745ab 100644
--- a/src/components/switch/switch.style.ts
+++ b/src/components/switch/switch.style.ts
@@ -1,17 +1,20 @@
 import styled, { css } from "styled-components";
+
 import { margin } from "styled-system";
 
-import baseTheme, { ThemeObject } from "../../style/themes/base";
-import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
+import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
 import HiddenCheckableInputStyle from "../../__internal__/checkable-input/hidden-checkable-input.style";
+import FieldHelpStyle from "../../__internal__/field-help/field-help.style";
+import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
-import { StyledCheckableInput } from "../../__internal__/checkable-input/checkable-input.style";
-import StyledSwitchSlider from "./__internal__/switch-slider.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
-import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
-import { SwitchProps } from "./switch.component";
+import baseTheme, { ThemeObject } from "../../style/themes/base";
 import addFocusStyling from "../../style/utils/add-focus-styling";
 
+import { SwitchProps } from "./switch.component";
+
+import StyledSwitchSlider from "./__internal__/switch-slider.style";
+
 interface StyledSwitchProps
   extends Pick<
     SwitchProps,
@@ -20,12 +23,16 @@ interface StyledSwitchProps
   theme: ThemeObject;
 }
 
+interface StyledHintTextProps {
+  isDarkBackground?: boolean;
+}
+
 const oldFocusStyling = `
   outline: solid 3px var(--colorsSemanticFocus500);
 `;
 
 export const ErrorBorder = styled.span`
-  ${({ warning }: { warning: boolean }) =>
+  ${({ reverse, warning }: { reverse: boolean; warning: boolean }) =>
     css`
       position: absolute;
       z-index: 6;
@@ -33,18 +40,24 @@ export const ErrorBorder = styled.span`
       background-color: ${warning
         ? "var(--colorsSemanticCaution500)"
         : "var(--colorsSemanticNegative500)"};
-      left: -12px;
+      ${reverse ? "right" : "left"}: -12px;
       bottom: -4px;
       top: 2px;
     `}
 `;
 
-export const StyledHintText = styled.div`
+export const StyledHintText = styled.div<StyledHintTextProps>`
   margin-top: 8px;
   margin-bottom: 8px;
-  color: var(--colorsUtilityYin055);
   font-size: 14px;
   font-weight: 400;
+  max-width: 160px;
+  ${({ isDarkBackground }) =>
+    css`
+      color: ${isDarkBackground
+        ? "var(--colorsUtilityYang065)"
+        : "var(--colorsUtilityYin055)"};
+    `}
 `;
 
 const StyledSwitch = styled.div`
@@ -68,6 +81,9 @@ const StyledSwitch = styled.div`
       `}
     }
 
+    display: flex;
+    flex-flow: ${labelInline ? "row wrap" : "column wrap"};
+
     ${StyledCheckableInput}, ${HiddenCheckableInputStyle} {
       border: none;
       box-sizing: border-box;
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
index fdb7bf9907..a745441eec 100644
--- a/src/components/switch/switch.test.tsx
+++ b/src/components/switch/switch.test.tsx
@@ -374,7 +374,7 @@ test("should render with correct accessible name and description when `validatio
 
   const switchElement = screen.getByRole("switch");
 
-  expect(switchElement).toHaveAccessibleName("foo");
+  expect(switchElement).toHaveAccessibleName("foo hint text");
   expect(switchElement).toHaveAccessibleDescription(
     "hint text this is an error"
   );
@@ -419,3 +419,148 @@ test("the expected translations are correctly applied for off", () => {
 
   expect(i18nText[0]).toBeVisible();
 });
+
+// coverage
+test("renders with normal styles when `isDarkBackground` is false", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch isDarkBackground={false} />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule(
+    "color: var(--colorsActionMinorYang100)"
+  );
+});
+
+// coverage
+test("renders with dark background styles when `isDarkBackground` is true", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch isDarkBackground />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("color: var(--colorsUtilityYin100)");
+});
+
+// coverage
+test("renders correctly with inputWidth set to numerical value of between 0 and 1", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch inputWidth={0.5} />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with labelInline and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with reverse flag set under erroneous state and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse error="error" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with no reverse flag set under erroneous state and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse={false} error="error" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with reverse flag not set and new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch reverse={false} />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with hint text and dark background in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelHelp="hint text" isDarkBackground />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with hint text in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelHelp="hint text" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with inline label and field help in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline fieldHelp="Field help" />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});
+
+// coverage
+test("renders correctly with inline label, dark background and field help in new validation", () => {
+  render(
+    <CarbonProvider validationRedesignOptIn>
+      <Switch labelInline fieldHelp="Field help" isDarkBackground />
+    </CarbonProvider>
+  );
+
+  const switchElement = screen.getByRole("switch");
+
+  expect(switchElement).toHaveStyleRule("width: 50%");
+});