diff --git a/app/pods/components/utils/radio-dropdown-combo-select/template.hbs b/app/pods/components/utils/radio-dropdown-combo-select/template.hbs
index b4d7b99f06..58daa6dd14 100644
--- a/app/pods/components/utils/radio-dropdown-combo-select/template.hbs
+++ b/app/pods/components/utils/radio-dropdown-combo-select/template.hbs
@@ -1,35 +1,21 @@
-<div class="vlc-radio-inline">
+<WebComponents::AuRadioList @layout="inline">
   {{#each this.radioOptions as |opt index|}}
-    {{#let (concat this.radioName "-" index) as |radioId|}}
-      <label class="vl-radio" for={{radioId}}>
-        <Input
-          class="vl-radio__toggle"
-          id={{radioId}}
-          name={{this.radioName}}
-          @type="radio"
-          value={{get opt this.labelKey}}
-          checked={{eq opt this.selectedOption}}
-          {{on "input" (fn this.select opt)}}
-        />
-        <div class="vl-radio__label">{{get opt this.labelKey}}</div>
-      </label>
-    {{/let}}
+    <WebComponents::AuRadio
+      @label={{get opt this.labelKey}}
+      name={{this.radioName}}
+      value={{get opt this.labelKey}}
+      checked={{eq opt this.selectedOption}}
+      {{on "input" (fn this.select opt)}}
+    />
   {{/each}}
-  {{#let (concat this.radioName "-" "others") as |radioId|}}
-    <label class="vl-radio" for={{radioId}}>
-      <Input
-        class="vl-radio__toggle"
-        id={{radioId}}
-        name={{this.radioName}}
-        @type="radio"
-        value="Andere"
-        checked={{this.selectedIsInOthers}}
-        {{on "input" this.showOthers}}
-      />
-      <div class="vl-radio__label">{{t "option-others"}}</div>
-    </label>
-  {{/let}}
-</div>
+  <WebComponents::AuRadio
+    @label={{t "option-others"}}
+    name={{this.radioName}}
+    value="Andere"
+    checked={{this.selectedIsInOthers}}
+    {{on "input" this.showOthers}}
+  />
+</WebComponents::AuRadioList>
 {{#if this.othersShown}}
   <PowerSelect
     @options={{this.otherOptions}}
diff --git a/app/pods/components/web-components/vl-radio-button-list/template.hbs b/app/pods/components/web-components/vl-radio-button-list/template.hbs
index 712093794d..dd1dba8f36 100644
--- a/app/pods/components/web-components/vl-radio-button-list/template.hbs
+++ b/app/pods/components/web-components/vl-radio-button-list/template.hbs
@@ -1,33 +1,24 @@
-<div class="vlc-input-field-block">
-  <label class="vl-form__label auk-u-block">
-    {{title}}
-  </label>
-  <div class="vlc-radio-inline">
+<fieldset>
+  <legend class="auk-label">{{title}}</legend>
+  <WebComponents::AuRadioList @layout="inline">
     {{#each optionList as |option index|}}
-      <label class="vl-radio">
-        {{#if selectedModel}}
-          <input
-            class="vl-radio__toggle"
-            value={{option.id}}
-            type="radio"
-            name={{title}}
-            checked={{eq option.id selectedModel.id}}
-            onchange={{action "modelChanged"}}
-          />
-        {{else}}
-          <input
-            class="vl-radio__toggle"
-            value={{option.id}}
-            type="radio"
-            name={{title}}
-            checked={{eq index 0}}
-            onchange={{action "modelChanged"}}
-          />
-        {{/if}}
-        <div class="vl-radio__label">
-          {{option.label}}
-        </div>
-      </label>
+      {{#if selectedModel}}
+        <WebComponents::AuRadio
+          value={{option.id}}
+          name={{title}}
+          checked={{eq option.id selectedModel.id}}
+          onchange={{action "modelChanged"}}
+          @label={{option.label}}
+        />
+      {{else}}
+        <WebComponents::AuRadio
+          value={{option.id}}
+          name={{title}}
+          checked={{eq index 0}}
+          onchange={{action "modelChanged"}}
+          @label={{option.label}}
+        />
+      {{/if}}
     {{/each}}
-  </div>
-</div>
\ No newline at end of file
+  </WebComponents::AuRadioList>
+</fieldset>
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 0d8eb6e622..e1bdd655d9 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -41,7 +41,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_modal';
 @import 'govflanders/components/_pager';
 @import 'govflanders/components/_pill';
-@import 'govflanders/components/_radio';
 @import 'govflanders/components/_typography';
 @import 'govflanders/components/_upload';
 
@@ -105,7 +104,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-components/vlc-procedure-step';
 @import 'custom-components/_vlc-publication-overview';
 @import 'custom-components/vlc-publication-status-pill';
-@import 'custom-components/vlc-radio-inline';
 @import 'custom-components/vlc-rdfa-editor';
 @import 'custom-components/vlc-scroll-wrapper';
 @import 'custom-components/vlc-search';
diff --git a/app/styles/custom-components/_vlc-radio-inline.scss b/app/styles/custom-components/_vlc-radio-inline.scss
deleted file mode 100644
index 3dd91bfa6d..0000000000
--- a/app/styles/custom-components/_vlc-radio-inline.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/* ==========================================================================
-  Radio inline
-  A way to put radio buttons + labels inline
-   ========================================================================== */
-
-.vlc-radio-inline {
-  display: flex;
-  .vl-radio {
-    margin-right: 1rem;
-  }
-}
diff --git a/app/styles/govflanders/components/_radio.scss b/app/styles/govflanders/components/_radio.scss
deleted file mode 100644
index 1e86d55b76..0000000000
--- a/app/styles/govflanders/components/_radio.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-$custom-easing: cubic-bezier(1, 0.1, 0, 0.9);
-
-// Radio
-.vl-radio {
-  position: relative;
-  display: inline-block;
-  margin-top: 0.2rem;
-  margin-right: 5rem;
-
-  &:not(.vl-radio--block) {
-    &:not(:last-of-type) {
-      margin-right: 1.5rem;
-    }
-  }
-
-  // Radio label
-  &__label {
-    padding: 0 0 0 2.4rem;
-
-    &::before {
-      position: absolute;
-      display: block;
-      background: $white;
-      content: "";
-      height: 0.6rem;
-      width: 0.6rem;
-      border-radius: 100%;
-      transform: translateZ(0) translate(-50%, -50%) scale(0);
-      transition: all 0.3s $custom-easing 0.05s;
-      top: 0.9rem;
-      left: 0.5rem;
-      z-index: 2;
-    }
-
-    &::after {
-      position: absolute;
-      display: inline-block;
-      content: "";
-      background: $white;
-      width: 1.6rem;
-      height: 1.6rem;
-      border: 0.1rem solid $border-color;
-      border-radius: 100%;
-      text-indent: -99rem;
-      cursor: pointer;
-      overflow: hidden;
-      white-space: nowrap;
-      transition: all 0.3s $custom-easing;
-      top: 0.4rem;
-      left: 0;
-      z-index: 1;
-    }
-  }
-
-  // Radio toggle
-  &__toggle {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    width: 0.1rem;
-    height: 0.1rem;
-    padding: 0;
-    margin: -0.1rem;
-
-    &:focus {
-      + .vl-radio__label {
-        &::after {
-          border-color: $outline-color;
-          box-shadow: 0 0 0 0.2rem $outline-color;
-        }
-      }
-    }
-
-    &:checked {
-      + .vl-radio__label {
-        &::before {
-          transform: scale(1);
-        }
-
-        &::after {
-          background: $action-color;
-          color: $action-color;
-          border: 0.1rem $action-color solid;
-        }
-      }
-    }
-  }
-
-  // Radio block modifier
-  &--block {
-    display: block;
-    margin: 0;
-  }
-}