diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.html b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.html
index 8403dbea3..6ff994bbf 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.html
@@ -1,6 +1,40 @@
 <div>
   <dxc-heading text="Light Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#FFFFFF">
+    <tbuilder-component-mode text="New radio group">
+      <dxc-radio-group
+        [value]="value"
+        (onChange)="handleOnChange($event)"
+        [options]="options"
+        label="Controlled radio"
+        helperText="example helper text"
+        [optional]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="Uncontrolled radio"
+        helperText="example helper text"
+        [optional]="true"
+        stacking="row"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="Disabled radio"
+        helperText="example helper text"
+        [disabled]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="readOnly radio"
+        helperText="example helper text"
+        [readOnly]="true"
+      ></dxc-radio-group>
+      <dxc-radio-group
+        [options]="options"
+        label="readOnly radio"
+        error="error message"
+      ></dxc-radio-group>
+    </tbuilder-component-mode>
     <tbuilder-component-mode text="Default">
       <dxc-radio
         label="Option1"
@@ -59,7 +93,7 @@
       </dxc-radio>
     </tbuilder-component-mode>
   </background-provider>
-<!--
+  <!--
   <dxc-heading text="Dark Mode" [level]="5" margin="xsmall"></dxc-heading>
   <background-provider color="#000000">
     <tbuilder-component-mode text="Default" mode="dark">
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.ts
index e53ac885a..5691dd9b0 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/previews/radio-preview/radio-preview.component.ts
@@ -15,6 +15,11 @@ export class RadioPreviewComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  value = "";
+  handleOnChange($event) {
+    //this.value = $event;
+  }
+
   onChange1(event) {
     this.changeChecked(event, !event, !event);
   }
@@ -25,6 +30,13 @@ export class RadioPreviewComponent implements OnInit {
     this.changeChecked(!event, !event, event);
   }
 
+  options = [
+    { value: "1", label: "1", disabled: false },
+    { value: "2", label: "2", disabled: true },
+    { value: "3", label: "3", disabled: true },
+    { value: "4", label: "4", disabled: false },
+  ];
+
   private changeChecked(checked1, checked2, checked3) {
     this.checked1 = checked1;
     this.checked2 = checked2;
diff --git a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
index 5c1654697..6422420f4 100644
--- a/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
+++ b/projects/dxc-ngx-cdk-site/src/app/pages/theme-builder/theme-builder.module.ts
@@ -25,6 +25,7 @@ import {
   DxcPaginatorModule,
   DxcProgressbarModule,
   DxcRadioModule,
+  DxcRadioGroupModule,
   DxcSideNavModule,
   DxcSliderModule,
   DxcSpinnerModule,
@@ -146,6 +147,7 @@ import { TextInputPreviewComponent } from "./previews/text-input-preview/text-in
     DxcPaginatorModule,
     DxcProgressbarModule,
     DxcRadioModule,
+    DxcRadioGroupModule,
     DxcSideNavModule,
     DxcSliderModule,
     DxcSpinnerModule,
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.html
new file mode 100644
index 000000000..45fddc5fe
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.html
@@ -0,0 +1,20 @@
+<div class="groupLabel">
+  <span *ngIf="label" class="label" [id]="radioGroupId">{{ label }}</span>
+  <span *ngIf="optional" class="optionalLabel"> (Optional)</span>
+</div>
+<span *ngIf="helperText" class="helperText">{{ helperText }}</span>
+<div class="radio-list-container" role="radiogroup" [attr.aria-labelledby]="radioGroupId">
+  <ng-container *ngFor="let option of optionList; index as i">
+    <dxc-radio-group-item
+      [tabindex]="indexToFocus === i && !option.disabled ? tabIndex : '-1'"
+      [indexValue]="i"
+      [value]="option.value"
+      [label]="option.label"
+      [disabled]="(option.disabled && !readOnly) || disabled"
+      [errorState]="error ? true : false"
+      [readOnlyState]="readOnly"
+    ></dxc-radio-group-item>
+  </ng-container>
+</div>
+<input class="valueInput" [name]="name" [value]="value" readOnly aria-hidden="true" />
+<span *ngIf="error" class="errorMessage">{{ error }}</span>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.spec.ts
new file mode 100644
index 000000000..fecb33a84
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.spec.ts
@@ -0,0 +1,7 @@
+import { render, fireEvent } from "@testing-library/angular";
+
+describe("DxcRadioGroup tests", () => {
+  test("should render dxc-radio-group", async () => {
+
+  });
+});
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts
new file mode 100644
index 000000000..1a285a6bb
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.component.ts
@@ -0,0 +1,307 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  HostBinding,
+  SimpleChanges,
+  HostListener,
+} from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { css } from "emotion";
+import { BehaviorSubject, Subscription } from "rxjs";
+import { CssUtils } from "../utils";
+import {
+  BlurEvent,
+  Option,
+  RadioGroupProperties,
+} from "./dxc-radio-group.types";
+import { RadioGroupService } from "./services/radio-group.service";
+import { v4 as uuidv4 } from "uuid";
+
+@Component({
+  selector: "dxc-radio-group",
+  templateUrl: "./dxc-radio-group.component.html",
+  providers: [CssUtils, RadioGroupService],
+})
+export class DxcRadioGroupComponent implements OnInit {
+  @HostBinding("class") styles;
+
+  @Input()
+  label: string = "";
+
+  @Input()
+  helperText: string = "";
+
+  @Input()
+  name: string;
+
+  @Input()
+  value?: string;
+
+  @Input()
+  readOnly: boolean = false;
+
+  @Input()
+  disabled: boolean = false;
+
+  @Input()
+  optional: boolean = false;
+
+  @Input()
+  optionalItemLabel?: string = "N/A";
+
+  @Input()
+  defaultValue: string;
+
+  @Input()
+  options: Option[];
+
+  @Input()
+  stacking: "row" | "column" = "column";
+
+  @Input()
+  tabIndex: number = 0;
+
+  @Input()
+  error: string;
+
+  @Output()
+  onChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output()
+  onBlur: EventEmitter<BlurEvent> = new EventEmitter<BlurEvent>();
+
+  // ref
+
+  radioGroupId = "";
+
+  public optionList: Option[] = [];
+  public indexToFocus: number = 0;
+
+  private isControlled: boolean = false;
+  private subscriptionOptions: Subscription;
+  private subcriptionNewValue: Subscription;
+
+  @HostListener("focusout", ["$event"])
+  onFocusOutHandler($event) {
+    // whether you are leaving the radio group component
+    if (!$event.currentTarget.contains($event.relatedTarget)) {
+      if (this.value || this.value === "") {
+        const selectedOption = this.optionList?.find(
+          (el) => el.value === this.value
+        );
+        if (selectedOption) {
+          this.indexToFocus = this.optionList.indexOf(selectedOption);
+        }
+      } else {
+        this.indexToFocus = 0;
+      }
+      this.service.firstTabbedFocus = false;
+    } else {
+      const errorMessage =
+        (!this.value || this.value !== "") && !this.optional
+          ? "This is required"
+          : undefined;
+      this.onBlur.emit({ value: this.value, error: errorMessage });
+    }
+  }
+
+  @HostListener("keydown", ["$event"])
+  onKeyHandler($event) {
+    if ($event.key === "ArrowDown" || $event.key === "ArrowRight") {
+      $event.preventDefault();
+      this.indexToFocusHandler("next");
+    }
+    if ($event.key === "ArrowUp" || $event.key === "ArrowLeft") {
+      $event.preventDefault();
+      this.indexToFocusHandler("previous");
+    }
+    if ($event.key === "Enter" || $event.key === " ") {
+      $event.preventDefault();
+      if (!this.readOnly) {
+        this.onChange.emit(this.optionList[this.indexToFocus].value);
+        if (!this.isControlled) {
+          this.value = this.optionList[this.indexToFocus].value;
+          this.service.selectedValue.next(this.value);
+          this.focusHandler();
+        }
+      }
+    }
+    this.service.indexToFocus.next(this.indexToFocus);
+  }
+
+  defaultInputs = new BehaviorSubject<RadioGroupProperties>({
+    label: "",
+    helperText: "",
+    name: "",
+    value: undefined,
+    readOnly: false,
+    disabled: false,
+    defaultValue: undefined,
+    options: [],
+    stacking: "column",
+    tabIndex: 0,
+    error: undefined,
+  });
+
+  constructor(private utils: CssUtils, private service: RadioGroupService) {
+    this.subscriptionOptions = this.service.optionList.subscribe(
+      (options) => (this.optionList = options)
+    );
+    this.subcriptionNewValue = this.service.newValue.subscribe((newValue) => {
+      if (!this.disabled && !this.readOnly && (newValue || newValue === "")) {
+        this.onChange.emit(newValue);
+        if (!this.isControlled) {
+          this.value = newValue;
+          this.service.selectedValue.next(this.value);
+          this.focusHandler();
+        }
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.radioGroupId = `radioGroup-${uuidv4()}`;
+    const tempOptions = [];
+    tempOptions.push(...this.options);
+    if (this.optional) {
+      // add empty option to the begginning of the array
+      tempOptions.unshift({
+        label: this.optionalItemLabel,
+        value: "",
+      });
+    }
+    this.service.optionList.next(tempOptions);
+    if (this.value || this.value === "") {
+      this.isControlled = true;
+      this.service.selectedValue.next(this.value);
+    } else {
+      if (this.defaultValue || this.defaultValue === "") {
+        this.value = this.defaultValue;
+      }
+    }
+    if (this.disabled) {
+      this.indexToFocus = -1;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      changes?.value &&
+      this.service.selectedValue?.getValue() !== this.value
+    ) {
+      this.service.selectedValue.next(this.value);
+      this.focusHandler();
+    }
+    const inputs = Object.keys(changes).reduce((result, item) => {
+      result[item] = changes[item].currentValue;
+      return result;
+    }, {});
+    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
+    this.styles = `${this.getDynamicStyle({
+      ...this.defaultInputs.getValue(),
+    })}`;
+  }
+
+  focusHandler() {
+    if (this.value || this.value === "") {
+      const selectedOption = this.optionList?.find(
+        (el) => el.value === this.value
+      );
+      if (selectedOption) {
+        this.indexToFocus = this.optionList.indexOf(selectedOption);
+        if (this.indexToFocus !== this.service.indexToFocus.value)
+          this.service.indexToFocus.next(this.indexToFocus);
+      }
+    } else {
+      if (this.indexToFocus !== this.service.indexToFocus.value)
+        this.service.indexToFocus.next(this.indexToFocus);
+    }
+  }
+
+  /**
+   * Closest not disabled option to focus
+   */
+  indexToFocusHandler(direction: string) {
+    let auxIndex: number = this.indexToFocus;
+    switch (direction) {
+      case "next":
+        do {
+          auxIndex === this.optionList.length - 1 ? (auxIndex = 0) : auxIndex++;
+          if (!this.optionList[auxIndex].disabled || this.readOnly) {
+            this.indexToFocus = auxIndex;
+            break;
+          }
+        } while (auxIndex !== this.indexToFocus);
+        break;
+      case "previous":
+        do {
+          auxIndex === 0 ? (auxIndex = this.optionList.length - 1) : auxIndex--;
+          if (!this.optionList[auxIndex].disabled || this.readOnly) {
+            this.indexToFocus = auxIndex;
+            break;
+          }
+        } while (auxIndex !== this.indexToFocus);
+        break;
+    }
+  }
+
+  getDynamicStyle(inputs) {
+    return css`
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      .label {
+        color: ${inputs.disabled
+          ? "var(--radioGroup-disabledLabelFontColor)"
+          : "var(--radioGroup-labelFontColor)"};
+        font-family: var(--radioGroup-labelFontFamily);
+        font-size: var(--radioGroup-labelFontSize);
+        font-style: var(--radioGroup-labelFontStyle);
+        font-weight: var(--radioGroup-labelFontWeight);
+        line-height: var(--radioGroup-labelLineHeight);
+      }
+      .groupLabel {
+        ${inputs.helperText
+          ? ""
+          : "margin-bottom: var(--radioGroup-groupLabelMargin);"}
+      }
+      .helperText,
+      .optional {
+        color: ${inputs.disabled
+          ? "var(--radioGroup-disabledHelperTextFontColor)"
+          : "var(--radioGroup-helperTextFontColor)"};
+        font-family: var(--radioGroup-helperTextFontFamily);
+        font-size: var(--radioGroup-helperTextFontSize);
+        font-style: var(--radioGroup-helperTextFontStyle);
+        font-weight: var(--radioGroup-helperTextFontWeight);
+        line-height: var(--radioGroup-helperTextLineHeight);
+        margin-bottom: var(--radioGroup-groupLabelMargin);
+      }
+      .radio-list-container {
+        display: flex;
+        flex-direction: ${inputs.stacking};
+        gap: ${inputs.stacking === "row"
+          ? "var(--radioGroup-groupHorizontalGutter)"
+          : "var(--radioGroup-groupVerticalGutter)"};
+      }
+      .errorMessage {
+        color: var(--radioGroup-errorMessageColor);
+        font-size: var(--radioGroup-errorMessageFontSize);
+        font-weight: var(--radioGroup-errorMessageFontWeight);
+        line-height: var(--radioGroup-errorMessageLineHeight);
+        font-family: var(--radioGroup-labelFontFamily);
+      }
+      .valueInput {
+        display: none;
+      }
+    `;
+  }
+
+  ngOnDestroy() {
+    this.utils = null;
+    this.subscriptionOptions.unsubscribe();
+    this.subcriptionNewValue.unsubscribe();
+  }
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.module.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.module.ts
new file mode 100644
index 000000000..7cd923e91
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+import { DxcRadioGroupComponent } from "./dxc-radio-group.component";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { DxcRadioGroupItemComponent } from "./dxc-radio/dxc-radio.component";
+
+@NgModule({
+  declarations: [DxcRadioGroupComponent, DxcRadioGroupItemComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [DxcRadioGroupComponent],
+})
+export class DxcRadioGroupModule {}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.types.ts
new file mode 100644
index 000000000..2dc69ea91
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio-group.types.ts
@@ -0,0 +1,25 @@
+export interface RadioGroupProperties {
+  label: string;
+  helperText?: string;
+  name: string;
+  value?: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  defaultValue?: string;
+  options: Option[];
+  stacking?: "row"|"column";
+  tabIndex?: number;
+  error?: string;
+}
+
+export type Option = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+export type BlurEvent = {
+  value: string,
+  error: string
+};
+
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.html
new file mode 100644
index 000000000..8ed2b127b
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.html
@@ -0,0 +1,10 @@
+<div
+  class="radioInputContainer"
+  role="radio"
+  [attr.aria-disabled]="disabled"
+  [attr.aria-checked]="selected"
+  [attr.aria-labelledby]="radioLabelId"
+>
+  <div class="radioInput"><div *ngIf="selected" class="dot"></div></div>
+</div>
+<span class="radioLabel" [id]="radioLabelId">{{ label }}</span>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.ts
new file mode 100644
index 000000000..8cc7e8070
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/dxc-radio/dxc-radio.component.ts
@@ -0,0 +1,212 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  HostBinding,
+  SimpleChanges,
+  HostListener,
+  ElementRef,
+} from "@angular/core";
+import { css } from "emotion";
+import { BehaviorSubject } from "rxjs";
+import { v4 as uuidv4 } from "uuid";
+import { RadioGroupService } from "../services/radio-group.service";
+import { Option } from "../dxc-radio-group.types";
+
+@Component({
+  selector: "dxc-radio-group-item",
+  templateUrl: "./dxc-radio.component.html",
+})
+export class DxcRadioGroupItemComponent implements OnInit {
+  @HostBinding("class") styles;
+  @HostBinding("class.selected")
+  selected: boolean = false;
+
+  @Input()
+  label: string;
+
+  @Input()
+  value: string;
+
+  @Input()
+  disabled: boolean = false;
+
+  @Input()
+  errorState: boolean = false;
+
+  @Input()
+  readOnlyState: boolean = false;
+
+  @Input()
+  indexValue: number;
+
+  radioLabelId = "";
+
+  defaultInputs = new BehaviorSubject<Option>({
+    label: "",
+    value: undefined,
+    disabled: false,
+  });
+
+  constructor(private service: RadioGroupService, private elRef: ElementRef) {
+    this.service.indexToFocus.subscribe((index) => {
+      if (index >= 0) {
+        if (this.indexValue === index) {
+          this.elRef.nativeElement.focus();
+        }
+      }
+    });
+  }
+
+  @HostListener("click")
+  onClickHandler() {
+    if (!this.disabled) {
+      if (!this.service.firstTabbedFocus) {
+        this.service.newValue.next(this.value);
+        this.service.firstTabbedFocus = true;
+      }
+      if (this.service.newValue.value !== this.value) {
+        this.service.newValue.next(this.value);
+      }
+    }
+  }
+
+  @HostListener("focus")
+  onFocusHandler() {
+    if (!this.disabled) {
+      if (this.service.firstTabbedFocus) {
+        this.service.newValue.next(this.value);
+      }
+      this.service.firstTabbedFocus = true;
+    }
+  }
+
+  ngOnInit(): void {
+    this.service.selectedValue.subscribe((newValue) => {
+      if (this.value || (this.value === "" && newValue) || newValue === "") {
+        this.selected = this.value === newValue;
+      }
+    });
+    this.radioLabelId = `radio-${uuidv4()}`;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const inputs = Object.keys(changes).reduce((result, item) => {
+      result[item] = changes[item].currentValue;
+      return result;
+    }, {});
+    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
+    this.styles = `${this.getDynamicStyle({
+      ...this.defaultInputs.getValue(),
+    })}`;
+  }
+
+  private getBorderColor() {
+    if (this.disabled) {
+      return "var(--radioGroup-disabledRadioInputColor)";
+    } else if (this.errorState) {
+      return "var(--radioGroup-errorRadioInputColor)";
+    } else if (this.readOnlyState) {
+      return "var(--radioGroup-readonlyRadioInputColor)";
+    } else {
+      return "var(--radioGroup-radioInputColor)";
+    }
+  }
+
+  private getHoverBorderColor() {
+    if (this.errorState) {
+      return "var(--radioGroup-hoverErrorRadioInputColor)";
+    } else if (this.readOnlyState) {
+      return "var(--radioGroup-hoverReadonlyRadioInputColor)";
+    } else {
+      return "var(--radioGroup-hoverRadioInputColor)";
+    }
+  }
+
+  private getActiveBorderColor() {
+    if (this.errorState) {
+      return "var(--radioGroup-activeErrorRadioInputColor)";
+    } else if (this.readOnlyState) {
+      return "var(--radioGroup-activeReadonlyRadioInputColor)";
+    } else {
+      return "var(--radioGroup-activeRadioInputColor)";
+    }
+  }
+
+  getDynamicStyle(inputs) {
+    return css`
+      display: inline-flex;
+      align-items: center;
+      ${inputs.disabled ? "pointer-events: none" : "cursor: pointer"};
+      width: fit-content;
+      .radioInputContainer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+        width: 24px;
+        .radioInput {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          width: 18px;
+          height: 18px;
+          border: var(--radioGroup-radioInputBorderWidth) var(--radioGroup-radioInputBorderStyle);;
+          border-color: ${this.getBorderColor()};
+          border-radius: 50%;
+          box-shadow: 0 0 0 2px transparent;
+        }
+      }
+      &.selected {
+        .dot {
+          height: 10px;
+          width: 10px;
+          border-radius: 50%;
+          background-color: ${this.getBorderColor()};
+        }
+      }
+      .radioLabel {
+        margin-left: var(--radioGroup-radioInputLabelMargin);
+        color: ${inputs.disabled
+          ? "var(--radioGroup-disabledRadioInputLabelFontColor)"
+          : "var(--radioGroup-radioInputLabelFontColor)"};
+        font-family: var(--radioGroup-radioInputLabelFontFamily);
+        font-size: var(--radioGroup-radioInputLabelFontSize);
+        font-style: var(--radioGroup-radioInputLabelFontStyle);
+        font-weight: var(--radioGroup-radioInputLabelFontWeight);
+        line-height: var(--radioGroup-radioInputLabelLineHeight);
+      }
+      &:focus,
+      &:focus-visible {
+        outline: none;
+        .radioInput {
+          outline: var(--radioGroup-focusBorderWidth)
+            var(--radioGroup-focusBorderStyle)
+            var(--radioGroup-focusRadioInputColor);
+          outline-offset: 1px;
+        }
+      }
+      &:hover {
+        .radioInput {
+          border-color: ${this.getHoverBorderColor()};
+        }
+        &.selected {
+          .dot {
+            background-color: ${this.getHoverBorderColor()};
+          }
+        }
+      }
+      &:active {
+        .radioInput {
+          border-color: ${this.getActiveBorderColor()};
+        }
+        &.selected {
+          .dot {
+            background-color: ${this.getActiveBorderColor()};
+          }
+        }
+      }
+    `;
+  }
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/services/radio-group.service.ts b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/services/radio-group.service.ts
new file mode 100644
index 000000000..3ec16e34a
--- /dev/null
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-radio-group/services/radio-group.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject, Subject } from "rxjs";
+import { Option } from "../dxc-radio-group.types";
+
+@Injectable({
+  providedIn: "root",
+})
+export class RadioGroupService {
+  public optionList: BehaviorSubject<Option[]> = new BehaviorSubject(null);
+
+  public selectedValue: BehaviorSubject<string> = new BehaviorSubject(
+    undefined
+  );
+
+  public indexToFocus: BehaviorSubject<number> = new BehaviorSubject(undefined);
+
+  public newValue: BehaviorSubject<string> = new BehaviorSubject(undefined);
+
+  public firstTabbedFocus: boolean = false;
+
+}
diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
index f499d2de3..f32143a8d 100644
--- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
+++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
@@ -947,6 +947,60 @@ export const componentTokens = {
   "--radio-fontStyle": globalTokens.type_normal,
   "--radio-fontWeight": globalTokens.type_regular,
 
+  //RADIO GROUP
+  "--radioGroup-radioInputColor": globalTokens.hal_blue_l_45,
+  "--radioGroup-hoverRadioInputColor": globalTokens.hal_blue_s_35,
+  "--radioGroup-focusRadioInputColor": globalTokens.hal_blue_l_50,
+  "--radioGroup-activeRadioInputColor": globalTokens.hal_blue_d_20,
+  "--radioGroup-errorRadioInputColor": globalTokens.hal_red_s_41,
+  "--radioGroup-hoverErrorRadioInputColor": globalTokens.hal_red_d_30,
+  "--radioGroup-activeErrorRadioInputColor": globalTokens.hal_red_d_20,
+  "--radioGroup-disabledRadioInputColor": globalTokens.hal_grey_l_60,
+  "--radioGroup-readonlyRadioInputColor": globalTokens.hal_grey_l_60,
+  "--radioGroup-hoverReadonlyRadioInputColor": globalTokens.color_grey_600,
+  "--radioGroup-activeReadonlyRadioInputColor": globalTokens.hal_grey_s_40,
+  "--radioGroup-labelFontColor": globalTokens.hal_black,
+  "--radioGroup-disabledLabelFontColor": globalTokens.hal_grey_l_60,
+  "--radioGroup-helperTextFontColor": globalTokens.hal_black,
+  "--radioGroup-disabledHelperTextFontColor": globalTokens.hal_grey_l_60,
+  "--radioGroup-radioInputLabelFontColor": globalTokens.hal_black,
+  "--radioGroup-disabledRadioInputLabelFontColor": globalTokens.hal_grey_l_60,
+  "--radioGroup-errorMessageColor": globalTokens.hal_red_s_41,
+
+  "--radioGroup-labelFontFamily": globalTokens.type_sans,
+  "--radioGroup-labelFontSize": globalTokens.type_scale_02,
+  "--radioGroup-labelFontWeight": globalTokens.type_semibold,
+  "--radioGroup-labelLineHeight": globalTokens.type_leading_loose_01,
+  "--radioGroup-labelFontStyle": globalTokens.type_normal,
+  "--radioGroup-helperTextFontFamily": globalTokens.type_sans,
+  "--radioGroup-helperTextFontSize": globalTokens.type_scale_01,
+  "--radioGroup-helperTextFontWeight": globalTokens.type_regular,
+  "--radioGroup-helperTextFontStyle": globalTokens.hal_grey_l_60,
+  "--radioGroup-helperTextLineHeight": globalTokens.type_leading_normal,
+  "--radioGroup-radioInputLabelFontFamily": globalTokens.type_sans,
+  "--radioGroup-radioInputLabelFontSize": globalTokens.type_scale_02,
+  "--radioGroup-radioInputLabelFontWeight": globalTokens.type_regular,
+  "--radioGroup-radioInputLabelFontStyle": globalTokens.type_normal,
+  "--radioGroup-errorMessageFontSize": globalTokens.type_scale_01,
+  "--radioGroup-errorMessageFontWeight": globalTokens.type_regular,
+  "--radioGroup-errorMessageLineHeight": globalTokens.type_leading_normal,
+
+  "--radioGroup-radioInputBorderWidth": globalTokens.border_width_2,
+  "--radioGroup-radioInputBorderStyle": globalTokens.border_solid,
+  "--radioGroup-focusBorderWidth": globalTokens.border_width_2,
+  "--radioGroup-focusBorderStyle": globalTokens.border_solid,
+
+  "--radioGroup-groupLabelMargin": globalTokens.spacing_03,
+  "--radioGroup-radioInputLabelMargin": globalTokens.spacing_03,
+  "--radioGroup-groupVerticalGutter": globalTokens.spacing_02,
+  "--radioGroup-groupHorizontalGutter": globalTokens.spacing_07,
+
+  // "--radioGroup-radioInputwidth": "18px",
+  // "--radioGroup-focusOutlineWidth": "24px",
+  // "--radioGroup-radioInputHeight": "18px",
+  // "--radioGroup-focusOutlineHeight": "24px",
+
+
   //V3 SELECT
   "--v3Select-fontFamily": "Open Sans, sans-serif",
   "--v3Select-labelFontSize": globalTokens.type_scale_03,
diff --git a/projects/dxc-ngx-cdk/src/public-api.ts b/projects/dxc-ngx-cdk/src/public-api.ts
index f1a549b23..c006de145 100644
--- a/projects/dxc-ngx-cdk/src/public-api.ts
+++ b/projects/dxc-ngx-cdk/src/public-api.ts
@@ -173,3 +173,7 @@ export * from "./lib/dxc-application-layout/dxc-application-layout-main/dxc-appl
 export * from "./lib/dxc-application-layout/dxc-application-layout-sidenav/dxc-application-layout-sidenav.component";
 export * from "./lib/dxc-application-layout/dxc-application-layout-header/dxc-application-layout-header.component";
 export * from "./lib/dxc-application-layout/dxc-application-layout-footer/dxc-application-layout-footer.component";
+
+export * from './lib/dxc-radio-group/dxc-radio-group.component';
+export * from './lib/dxc-radio-group/dxc-radio/dxc-radio.component';
+export * from './lib/dxc-radio-group/dxc-radio-group.module';
\ No newline at end of file