diff --git a/.changeset/tall-ears-leave.md b/.changeset/tall-ears-leave.md
new file mode 100644
index 0000000000..bcd6768e39
--- /dev/null
+++ b/.changeset/tall-ears-leave.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**checkbox**: voice over check action fixed
diff --git a/e2e/cypress/component/bal-checkbox-button.cy.ts b/e2e/cypress/component/bal-checkbox-button.cy.ts
index b05a32670e..53271a9871 100644
--- a/e2e/cypress/component/bal-checkbox-button.cy.ts
+++ b/e2e/cypress/component/bal-checkbox-button.cy.ts
@@ -47,7 +47,7 @@ describe('bal-checkbox-button', () => {
   })
 
   it('should select first one and send change event', () => {
-    cy.get('bal-checkbox-button').eq(0).click().find('input').blur()
+    cy.get('bal-checkbox-button').eq(0).find('input').check({ force: true }).blur()
 
     cy.get('bal-checkbox-button').eq(0).find('input').should('be.checked')
     cy.get('bal-checkbox-button').eq(1).find('input').should('not.be.checked')
diff --git a/e2e/cypress/component/bal-checkbox-group.cy.ts b/e2e/cypress/component/bal-checkbox-group.cy.ts
index 7ca479ccb8..54e89cb59a 100644
--- a/e2e/cypress/component/bal-checkbox-group.cy.ts
+++ b/e2e/cypress/component/bal-checkbox-group.cy.ts
@@ -35,7 +35,7 @@ describe('bal-checkbox-group', () => {
   })
 
   it('should select first one and send change event', () => {
-    cy.get('bal-checkbox').eq(0).click().find('input').blur()
+    cy.get('bal-checkbox').eq(0).find('input').check({ force: true }).blur()
 
     cy.get('bal-checkbox').eq(0).find('input').should('be.checked')
     cy.get('bal-checkbox').eq(1).find('input').should('not.be.checked')
diff --git a/e2e/cypress/component/bal-checkbox.cy.ts b/e2e/cypress/component/bal-checkbox.cy.ts
index 454bb43597..849a50f399 100644
--- a/e2e/cypress/component/bal-checkbox.cy.ts
+++ b/e2e/cypress/component/bal-checkbox.cy.ts
@@ -26,7 +26,6 @@ describe('bal-checkbox', () => {
 
     cy.get('bal-checkbox').click().find('input').blur()
 
-    cy.get('@click').should('have.been.calledOnce')
     cy.get('@balFocus').should('have.been.calledOnce')
     cy.get('@balChange').should('have.been.calledOnce')
     cy.get('@balBlur').should('have.been.calledOnce')
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index e369f33323..f243d25cbb 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -479,6 +479,20 @@ export namespace Components {
          */
         "value"?: string | number;
     }
+    interface BalCheck {
+        /**
+          * If `true`, the checkbox is selected.
+         */
+        "checked": boolean;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true` the component gets a invalid red style.
+         */
+        "invalid"?: boolean;
+    }
     interface BalCheckbox {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -3137,6 +3151,20 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface BalSwitch {
+        /**
+          * If `true`, the checkbox is selected.
+         */
+        "checked": boolean;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true` the component gets a invalid red style.
+         */
+        "invalid"?: boolean;
+    }
     interface BalTabItem {
         /**
           * Tells if this route is active and overrides the bal-tabs value property.
@@ -3886,6 +3914,12 @@ declare global {
         prototype: HTMLBalCarouselItemElement;
         new (): HTMLBalCarouselItemElement;
     };
+    interface HTMLBalCheckElement extends Components.BalCheck, HTMLStencilElement {
+    }
+    var HTMLBalCheckElement: {
+        prototype: HTMLBalCheckElement;
+        new (): HTMLBalCheckElement;
+    };
     interface HTMLBalCheckboxElementEventMap {
         "balFocus": BalEvents.BalCheckboxFocusDetail;
         "balBlur": BalEvents.BalCheckboxBlurDetail;
@@ -4860,6 +4894,12 @@ declare global {
         prototype: HTMLBalStepsElement;
         new (): HTMLBalStepsElement;
     };
+    interface HTMLBalSwitchElement extends Components.BalSwitch, HTMLStencilElement {
+    }
+    var HTMLBalSwitchElement: {
+        prototype: HTMLBalSwitchElement;
+        new (): HTMLBalSwitchElement;
+    };
     interface HTMLBalTabItemElementEventMap {
         "balNavigate": BalEvents.BalTabItemNavigateDetail;
     }
@@ -5026,6 +5066,7 @@ declare global {
         "bal-card-title": HTMLBalCardTitleElement;
         "bal-carousel": HTMLBalCarouselElement;
         "bal-carousel-item": HTMLBalCarouselItemElement;
+        "bal-check": HTMLBalCheckElement;
         "bal-checkbox": HTMLBalCheckboxElement;
         "bal-checkbox-button": HTMLBalCheckboxButtonElement;
         "bal-checkbox-group": HTMLBalCheckboxGroupElement;
@@ -5117,6 +5158,7 @@ declare global {
         "bal-stage-image": HTMLBalStageImageElement;
         "bal-step-item": HTMLBalStepItemElement;
         "bal-steps": HTMLBalStepsElement;
+        "bal-switch": HTMLBalSwitchElement;
         "bal-tab-item": HTMLBalTabItemElement;
         "bal-table": HTMLBalTableElement;
         "bal-tabs": HTMLBalTabsElement;
@@ -5595,6 +5637,20 @@ declare namespace LocalJSX {
          */
         "value"?: string | number;
     }
+    interface BalCheck {
+        /**
+          * If `true`, the checkbox is selected.
+         */
+        "checked"?: boolean;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true` the component gets a invalid red style.
+         */
+        "invalid"?: boolean;
+    }
     interface BalCheckbox {
         /**
           * If `true`, in Angular reactive forms the control will not be set invalid
@@ -8265,6 +8321,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface BalSwitch {
+        /**
+          * If `true`, the checkbox is selected.
+         */
+        "checked"?: boolean;
+        /**
+          * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true` the component gets a invalid red style.
+         */
+        "invalid"?: boolean;
+    }
     interface BalTabItem {
         /**
           * Tells if this route is active and overrides the bal-tabs value property.
@@ -8728,6 +8798,7 @@ declare namespace LocalJSX {
         "bal-card-title": BalCardTitle;
         "bal-carousel": BalCarousel;
         "bal-carousel-item": BalCarouselItem;
+        "bal-check": BalCheck;
         "bal-checkbox": BalCheckbox;
         "bal-checkbox-button": BalCheckboxButton;
         "bal-checkbox-group": BalCheckboxGroup;
@@ -8819,6 +8890,7 @@ declare namespace LocalJSX {
         "bal-stage-image": BalStageImage;
         "bal-step-item": BalStepItem;
         "bal-steps": BalSteps;
+        "bal-switch": BalSwitch;
         "bal-tab-item": BalTabItem;
         "bal-table": BalTable;
         "bal-tabs": BalTabs;
@@ -8851,6 +8923,7 @@ declare module "@stencil/core" {
             "bal-card-title": LocalJSX.BalCardTitle & JSXBase.HTMLAttributes<HTMLBalCardTitleElement>;
             "bal-carousel": LocalJSX.BalCarousel & JSXBase.HTMLAttributes<HTMLBalCarouselElement>;
             "bal-carousel-item": LocalJSX.BalCarouselItem & JSXBase.HTMLAttributes<HTMLBalCarouselItemElement>;
+            "bal-check": LocalJSX.BalCheck & JSXBase.HTMLAttributes<HTMLBalCheckElement>;
             "bal-checkbox": LocalJSX.BalCheckbox & JSXBase.HTMLAttributes<HTMLBalCheckboxElement>;
             "bal-checkbox-button": LocalJSX.BalCheckboxButton & JSXBase.HTMLAttributes<HTMLBalCheckboxButtonElement>;
             "bal-checkbox-group": LocalJSX.BalCheckboxGroup & JSXBase.HTMLAttributes<HTMLBalCheckboxGroupElement>;
@@ -8942,6 +9015,7 @@ declare module "@stencil/core" {
             "bal-stage-image": LocalJSX.BalStageImage & JSXBase.HTMLAttributes<HTMLBalStageImageElement>;
             "bal-step-item": LocalJSX.BalStepItem & JSXBase.HTMLAttributes<HTMLBalStepItemElement>;
             "bal-steps": LocalJSX.BalSteps & JSXBase.HTMLAttributes<HTMLBalStepsElement>;
+            "bal-switch": LocalJSX.BalSwitch & JSXBase.HTMLAttributes<HTMLBalSwitchElement>;
             "bal-tab-item": LocalJSX.BalTabItem & JSXBase.HTMLAttributes<HTMLBalTabItemElement>;
             "bal-table": LocalJSX.BalTable & JSXBase.HTMLAttributes<HTMLBalTableElement>;
             "bal-tabs": LocalJSX.BalTabs & JSXBase.HTMLAttributes<HTMLBalTabsElement>;
diff --git a/packages/core/src/components/bal-checkbox/bal-check/bal-check.sass b/packages/core/src/components/bal-checkbox/bal-check/bal-check.sass
new file mode 100644
index 0000000000..3b869bc2ed
--- /dev/null
+++ b/packages/core/src/components/bal-checkbox/bal-check/bal-check.sass
@@ -0,0 +1,65 @@
+@use '@baloise/ds-styles/sass/mixins' as *
+@use '../bal-radio-checkbox.vars' as *
+
+.bal-check
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  cursor: pointer
+  user-select: none
+  width: 1.5rem
+  height: 1.5rem
+  border-radius: var(--bal-radius-normal)
+  //
+  // default color
+  border: 2px solid var(--bal-color-primary)
+  background-color: transparent
+  +hover
+    &:hover
+      background: var(--bal-color-grey-2)
+      border-color: var(--bal-color-border-primary-hovered)
+  &:active
+    background: var(--bal-color-grey-1)
+    border-color: var(--bal-color-border-primary-pressed)
+  //
+  // checked
+  &--checked
+    background-color: var(--bal-color-primary)
+    +hover
+      &:hover
+        background: var(--bal-color-border-primary-hovered)
+        border-color: var(--bal-color-border-primary-hovered)
+    &:active
+      background: var(--bal-color-border-primary-pressed)
+      border-color: var(--bal-color-border-primary-pressed)
+  //
+  // invalid
+  &--invalid
+    border-color: var(--bal-color-border-danger)
+    background-color: var(--bal-color-danger-1)
+    +hover
+      &:hover
+        background-color: var(--bal-color-danger-1)
+        border-color: var(--bal-color-border-danger-hovered)
+    &:active
+      background-color: var(--bal-color-danger-1)
+      border-color: var(--bal-color-border-danger-pressed)
+  &--invalid#{&}--checked
+    border-color: var(--bal-color-border-danger)
+    background: var(--bal-color-border-danger)
+    +hover
+      &:hover
+        background-color: var(--bal-color-border-danger-hovered)
+        border-color: var(--bal-color-border-danger-hovered)
+    &:active
+      background-color: var(--bal-color-border-danger-pressed)
+      border-color: var(--bal-color-border-danger-pressed)
+  //
+  // disabled
+  &--disabled
+    cursor: default !important
+    background: var(--bal-color-grey-2) !important
+    border-color: var(--bal-color-border-grey-dark) !important
+  &--disabled#{&}--checked
+    background-color: var(--bal-color-border-grey-dark) !important
+    border-color: var(--bal-color-border-grey-dark) !important
diff --git a/packages/core/src/components/bal-checkbox/bal-check/bal-check.tsx b/packages/core/src/components/bal-checkbox/bal-check/bal-check.tsx
new file mode 100644
index 0000000000..d47667d477
--- /dev/null
+++ b/packages/core/src/components/bal-checkbox/bal-check/bal-check.tsx
@@ -0,0 +1,53 @@
+import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core'
+import { BEM } from '../../../utils/bem'
+
+@Component({
+  tag: 'bal-check',
+  styleUrl: './bal-check.sass',
+})
+export class Check implements ComponentInterface {
+  /**
+   * PUBLIC PROPERTY API
+   * ------------------------------------------------------
+   */
+
+  /**
+   * If `true`, the checkbox is selected.
+   */
+  @Prop({ mutable: true }) checked = false
+
+  /**
+   * If `true` the component gets a invalid red style.
+   */
+  @Prop() invalid?: boolean = undefined
+
+  /**
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+   */
+  @Prop() disabled?: boolean = undefined
+
+  /**
+   * RENDER
+   * ------------------------------------------------------
+   */
+
+  render() {
+    const block = BEM.block('check')
+    const checked = !!this.checked
+    const disabled = !!this.disabled
+    const invalid = !!this.invalid
+
+    return (
+      <Host
+        class={{
+          ...block.class(),
+          ...block.modifier('checked').class(checked),
+          ...block.modifier('disabled').class(disabled),
+          ...block.modifier('invalid').class(invalid),
+        }}
+      >
+        {checked ? <bal-icon name="check" color="white" size="small" aria-hidden="true"></bal-icon> : ''}
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx b/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx
index e0f80ef507..df05ab871d 100644
--- a/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx
+++ b/packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx
@@ -1,28 +1,28 @@
-import { areArraysEqual } from '../../../utils/array'
 import {
   Component,
-  h,
-  Host,
   ComponentInterface,
-  Prop,
   Element,
-  Watch,
   Event,
   EventEmitter,
+  h,
+  Host,
+  Listen,
   Method,
+  Prop,
   State,
-  Listen,
+  Watch,
 } from '@stencil/core'
-import { stopEventBubbling } from '../../../utils/form-input'
-import { hasTagName, isDescendant } from '../../../utils/helpers'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
+import { areArraysEqual } from '../../../utils/array'
 import { inheritAttributes } from '../../../utils/attributes'
 import { BEM } from '../../../utils/bem'
-import { BalCheckboxOption } from '../bal-checkbox.type'
+import { BalFocusObserver, ListenToFocus } from '../../../utils/focus'
+import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
+import { stopEventBubbling } from '../../../utils/form-input'
+import { hasTagName, isDescendant } from '../../../utils/helpers'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
 import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation'
-import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
-import { BalFocusObserver, ListenToFocus } from '../../../utils/focus'
-import { ariaBooleanToString } from 'packages/core/src/utils/aria'
+import { BalCheckboxOption } from '../bal-checkbox.type'
 
 @Component({
   tag: 'bal-checkbox-group',
@@ -270,10 +270,11 @@ export class CheckboxGroup
   }
 
   @Listen('balChange', { capture: true, target: 'document' })
-  listenOnClick(ev: UIEvent) {
+  listenOnCheckboxChange(ev: UIEvent) {
     if (this.control) {
       if (isDescendant(this.el, ev.target as HTMLElement)) {
         stopEventBubbling(ev)
+        this.updateValues()
       }
     }
   }
@@ -394,7 +395,6 @@ export class CheckboxGroup
     if (element.href) {
       return
     }
-    ev.preventDefault()
 
     const selectedCheckbox = ev.target && (ev.target as HTMLElement).closest('bal-checkbox')
     if (selectedCheckbox) {
@@ -403,6 +403,10 @@ export class CheckboxGroup
       }
     }
 
+    this.updateValues()
+  }
+
+  private updateValues() {
     // generate new value array out of the checked checkboxes
     const newValue: any[] = []
     this.getCheckboxes().forEach(cb => {
diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox.sass b/packages/core/src/components/bal-checkbox/bal-checkbox.sass
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/core/src/components/bal-checkbox/bal-checkbox.tsx b/packages/core/src/components/bal-checkbox/bal-checkbox.tsx
index 27e7e8cb54..6e7a315b5f 100644
--- a/packages/core/src/components/bal-checkbox/bal-checkbox.tsx
+++ b/packages/core/src/components/bal-checkbox/bal-checkbox.tsx
@@ -1,30 +1,30 @@
 import {
   Component,
-  h,
-  Host,
-  Prop,
+  ComponentInterface,
   Element,
-  EventEmitter,
   Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
   Method,
+  Prop,
   State,
-  Listen,
-  ComponentInterface,
 } from '@stencil/core'
-import { FormInput, inputSetBlur, inputSetFocus, stopEventBubbling } from '../../utils/form-input'
-import { isDescendant } from '../../utils/helpers'
+import { ariaBooleanToString } from '../../utils/aria'
 import { inheritAttributes } from '../../utils/attributes'
 import { BEM } from '../../utils/bem'
-import { isSpaceKey } from '../../utils/keyboard'
-import { BalCheckboxOption } from './bal-checkbox.type'
-import { Loggable, Logger, LogInstance } from '../../utils/log'
 import { FOCUS_KEYS } from '../../utils/focus-visible'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
-import { ariaBooleanToString } from '../../utils/aria'
+import { FormInput, inputSetBlur, inputSetFocus, stopEventBubbling } from '../../utils/form-input'
+import { isDescendant } from '../../utils/helpers'
+import { isSpaceKey } from '../../utils/keyboard'
+import { Loggable, Logger, LogInstance } from '../../utils/log'
+import { BalCheckboxOption } from './bal-checkbox.type'
 
 @Component({
   tag: 'bal-checkbox',
-  styleUrl: 'radio-checkbox.sass',
+  styleUrl: 'bal-checkbox.sass',
 })
 export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, BalAriaFormLinking {
   private inputId = `bal-cb-${checkboxIds++}`
@@ -337,44 +337,25 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
    * ------------------------------------------------------
    */
 
-  private toggleChecked() {
-    this.checked = !this.checked
-    this.balChange.emit(this.checked)
-  }
+  private setChecked = (state: boolean) => {
+    const isChecked = (this.checked = state)
 
-  private onKeypress = (ev: KeyboardEvent) => {
-    if (isSpaceKey(ev)) {
-      const element = ev.target as HTMLAnchorElement
-      if (element.href) {
-        return
-      }
+    this.checked = isChecked
+    this.balChange.emit(isChecked)
+  }
 
-      if (element.nodeName === 'INPUT' && !this.disabled && !this.readonly) {
-        this.toggleChecked()
-        ev.preventDefault()
-      } else {
-        stopEventBubbling(ev)
-      }
-    }
+  private onChange = (ev: Event) => {
+    ev.preventDefault()
+    this.setChecked(!this.checked)
+    this.setFocus()
   }
 
   private onClick = (ev: MouseEvent) => {
-    const element = ev.target as HTMLAnchorElement
-    if (element.href) {
-      return
-    }
-
     if (this.wasFocused) {
       this.focused = true
     }
 
-    if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
-      this.toggleChecked()
-      this.nativeInput?.focus()
-      ev.preventDefault()
-    } else {
-      stopEventBubbling(ev)
-    }
+    this.setChecked(!this.checked)
   }
 
   private onFocus = (ev: FocusEvent) => {
@@ -429,22 +410,18 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
     }
 
     const id = this.ariaForm.controlId || this.inputId
-    let labelId = this.ariaForm.labelId || null
-    const LabelTag = this.labelHidden ? 'span' : 'label'
-
-    const labelAttributes: any = {}
-    if (!this.labelHidden) {
-      labelId = `${labelId || ''} ${id}-lbl`.trim()
-      labelAttributes.id = `${id}-lbl`
-      labelAttributes.htmlFor = id
-    }
+    const labelId = this.ariaForm.labelId || null
+    const LabelTag = this.nonSubmit ? 'span' : 'label'
 
     return (
       <Host
         aria-checked={`${this.checked}`}
         aria-disabled={ariaBooleanToString(this.disabled)}
+        aria-invalid={this.invalid === true ? 'true' : 'false'}
         aria-hidden={ariaBooleanToString(this.disabled || this.nonSubmit)}
         aria-focused={focused ? 'true' : null}
+        aria-labelledby={labelId}
+        aria-describedby={this.ariaForm.messageId}
         class={{
           'bal-focused': focused,
           ...block.class(),
@@ -461,29 +438,49 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
           ...block.modifier('pressed').class(this.pressed),
           ...block.modifier('inline').class(this.inline),
         }}
-        onKeypress={this.onKeypress}
         onClick={this.onClick}
       >
-        <input
+        <LabelTag class={{ ...labelEl.class() }}>
+          {this.nonSubmit ? (
+            ''
+          ) : (
+            <input
+              id={id}
+              type="checkbox"
+              data-testid="bal-checkbox-input"
+              name={this.name}
+              value={this.value}
+              checked={this.checked}
+              required={this.required}
+              disabled={this.disabled || this.nonSubmit}
+              readonly={this.readonly}
+              class={{
+                ...inputEl.class(),
+                ...inputEl.modifier('select-button').class(this.interface === 'select-button'),
+              }}
+              aria-hidden={ariaBooleanToString(this.nonSubmit)}
+              onChange={ev => this.onChange(ev)}
+              onFocus={ev => this.onFocus(ev)}
+              onBlur={ev => this.onBlur(ev)}
+              ref={inputEl => (this.nativeInput = inputEl)}
+              {...inputAttributes}
+            />
+          )}
+          <div class={{ ...iconEl.class() }}></div>
+          <div class={{ ...labelEl.class() }}>
+            <slot></slot>
+          </div>
+        </LabelTag>
+        {/* <input
           class={{
             ...inputEl.class(),
             ...inputEl.modifier('select-button').class(this.interface === 'select-button'),
           }}
-          data-testid="bal-checkbox-input"
-          type="checkbox"
-          id={id}
-          aria-labelledby={labelId}
-          aria-describedby={this.ariaForm.messageId}
-          aria-invalid={this.invalid === true ? 'true' : 'false'}
-          aria-disabled={ariaBooleanToString(this.disabled)}
-          aria-checked={`${this.checked}`}
-          aria-hidden={ariaBooleanToString(this.nonSubmit)}
-          name={this.name}
-          value={this.value}
           checked={this.checked}
           disabled={this.disabled || this.nonSubmit}
           readonly={this.readonly}
           required={this.required}
+          onChange={_ => this.toggleChecked()}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           ref={inputEl => (this.nativeInput = inputEl)}
@@ -527,7 +524,7 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B
           </LabelTag>
         ) : (
           ''
-        )}
+        )} */}
       </Host>
     )
   }
diff --git a/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.sass b/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.sass
new file mode 100644
index 0000000000..ef144c8bdb
--- /dev/null
+++ b/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.sass
@@ -0,0 +1,47 @@
+.bal-switch__toggle
+  background: var(--bal-radio-checkbox-switch-label-background-after)
+  border-radius: 50%
+  position: absolute
+  top: 0.25rem
+  width: 1rem
+  height: 1rem
+  transition: transform 0.3s ease-in-out
+
+.bal-switch
+  display: flex
+  align-items: center
+  width: 2.5rem
+  height: 1.5rem
+  padding: 0.25rem
+  background: var(--bal-radio-checkbox-switch-label-background-before)
+  border-radius: 1.5rem
+  position: relative
+
+.bal-switch--disabled
+  background: var(--bal-radio-checkbox-switch-label-background-disabled-before)
+
+.bal-switch--checked
+  background: var(--bal-radio-checkbox-switch-label-background-checked-before)
+
+.bal-switch--invalid
+  background: var(--bal-radio-checkbox-switch-label-background-invalid-before)
+
+.bal-switch__toggle--disabled
+  background: var(--bal-radio-checkbox-switch-label-background-disabled-after)
+
+.bal-switch__toggle--invalid
+  background: var(--bal-radio-checkbox-switch-label-background-invalid-after)
+
+.bal-switch__toggle--checked
+  transform: translateX(100%)
+  background: var(--bal-radio-checkbox-switch-label-background-checked-after)
+
+
+.bal-icon
+  position: absolute
+
+  .bal-switch__icon--checked
+    opacity: 1
+  .bal-switch__icon
+    opacity: 0
+    transition: opacity 0.3s ease-in-out
diff --git a/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.tsx b/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.tsx
new file mode 100644
index 0000000000..f1e004506d
--- /dev/null
+++ b/packages/core/src/components/bal-checkbox/bal-switch/bal-switch.tsx
@@ -0,0 +1,69 @@
+import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core'
+import { BEM } from '../../../utils/bem'
+
+@Component({
+  tag: 'bal-switch',
+  styleUrl: './bal-switch.sass',
+})
+export class Switch implements ComponentInterface {
+  /**
+   * PUBLIC PROPERTY API
+   * ------------------------------------------------------
+   */
+
+  /**
+   * If `true`, the checkbox is selected.
+   */
+  @Prop({ mutable: true }) checked = false
+
+  /**
+   * If `true` the component gets a invalid red style.
+   */
+  @Prop() invalid?: boolean = undefined
+
+  /**
+   * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+   */
+  @Prop() disabled?: boolean = undefined
+
+  /**
+   * RENDER
+   * ------------------------------------------------------
+   */
+
+  // TODO-MZ add color states (invalid, selected, disabled)
+  render() {
+    const block = BEM.block('switch')
+    const checked = !!this.checked
+    const disabled = !!this.disabled
+    const invalid = !!this.invalid
+
+    return (
+      <Host
+        class={{
+          ...block.class(),
+          ...block.modifier('checked').class(checked),
+          ...block.modifier('disabled').class(disabled),
+          ...block.modifier('invalid').class(invalid),
+        }}
+        onClick={() => (this.checked = !this.checked)}
+      >
+          <bal-icon
+            name="check"
+            color="white"
+            size="small"
+            aria-hidden="true"
+            class={{
+              ...block.element('icon').modifier('checked').class(checked),
+            }}
+          ></bal-icon>
+            <div class={{
+              ...block.element('toggle').class(),
+              ...block.element('toggle').modifier('checked').class(checked),
+              ...block.element('toggle').modifier('disabled').class(disabled),
+              ...block.element('toggle').modifier('invalid').class(invalid)
+            }}></div>
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/bal-checkbox/radio-checkbox.mixins.sass b/packages/core/src/components/bal-checkbox/radio-checkbox.mixins.sass
index 12a09b7bf7..95abc16833 100644
--- a/packages/core/src/components/bal-checkbox/radio-checkbox.mixins.sass
+++ b/packages/core/src/components/bal-checkbox/radio-checkbox.mixins.sass
@@ -1,26 +1,26 @@
-=radioGroupVertical
-  flex-direction: column
-  border-radius: var(--bal-radius-normal)
-  gap: 0
+// =radioGroupVertical
+//   flex-direction: column
+//   border-radius: var(--bal-radius-normal)
+//   gap: 0
 
-=radioCheckboxSymbol($color, $border, $inverted, $background)
-  .bal-radio-checkbox__label:not(.bal-radio-checkbox__label--switch)
-    &::before
-      border-color: var(#{$border})
-      background: var(#{$background})
-    &.bal-radio-checkbox__label--radio.bal-radio-checkbox__label--checked
-      &::after
-        background: var(#{$inverted})
-      &::before
-        background: var(#{$color})
-    &.bal-radio-checkbox__label--checkbox
-      &::after
-        border-right-color: var(#{$inverted})
-        border-bottom-color: var(#{$inverted})
-    &.bal-radio-checkbox__label--checkbox.bal-radio-checkbox__label--checked
-      &::before
-        background: var(#{$color})
+// =radioCheckboxSymbol($color, $border, $inverted, $background)
+//   .bal-radio-checkbox__label:not(.bal-radio-checkbox__label--switch)
+//     &::before
+//       border-color: var(#{$border})
+//       background: var(#{$background})
+//     &.bal-radio-checkbox__label--radio.bal-radio-checkbox__label--checked
+//       &::after
+//         background: var(#{$inverted})
+//       &::before
+//         background: var(#{$color})
+//     &.bal-radio-checkbox__label--checkbox
+//       &::after
+//         border-right-color: var(#{$inverted})
+//         border-bottom-color: var(#{$inverted})
+//     &.bal-radio-checkbox__label--checkbox.bal-radio-checkbox__label--checked
+//       &::before
+//         background: var(#{$color})
 
-=radioCheckboxLabel($color)
-  .bal-radio-checkbox__label .bal-radio-checkbox__label__text
-    color: var(#{$color})
+// =radioCheckboxLabel($color)
+//   .bal-radio-checkbox__label .bal-radio-checkbox__label__text
+//     color: var(#{$color})
diff --git a/packages/core/src/components/bal-checkbox/radio-checkbox.sass b/packages/core/src/components/bal-checkbox/radio-checkbox.sass
index a0a5140f8c..ad1f00d8ec 100644
--- a/packages/core/src/components/bal-checkbox/radio-checkbox.sass
+++ b/packages/core/src/components/bal-checkbox/radio-checkbox.sass
@@ -1,426 +1,428 @@
-@use '@baloise/ds-styles/sass/mixins' as *
-@use './radio-checkbox.mixins' as *
-@use './bal-radio-checkbox.vars' as *
+// @use '@baloise/ds-styles/sass/mixins' as *
+// @use './radio-checkbox.mixins' as *
+// @use './bal-radio-checkbox.vars' as *
 
-bal-radio .bal-radio-checkbox__label
-  &::before,
-  &::after
-    margin-top: 0px !important
-//
-//
-// radio & checkbox group
-+block(radio-checkbox-group)
-  display: inline-block
-  position: relative
-  width: 100%
-  //
-  // inner group element
-  +element(inner)
-    display: flex
-    flex-direction: row
-    justify-content: flex-start
-    align-items: stretch
-    flex-wrap: wrap
-    gap: var(--bal-space-normal)
-    //
-    // transform the radios into buttons
-    +modifier(select-button)
-      flex-direction: column
-      flex-wrap: wrap
-      flex: 1
-      gap: var(--bal-space-x-small)
-      +tablet
-        flex-direction: row
-    +modifier(expanded)
-      align-items: stretch
-      .bal-radio-checkbox
-        flex: 1
-        +mobile
-          width: 100%
-    &--select-button#{&}--vertical
-      gap: var(--bal-space-x-small)
-    //
-    // shows the radios verically
-    +modifier(vertical)
-      +radioGroupVertical
-      +tablet
-        align-items: flex-start
-    //
-    // only shows the radios verically on mobile
-    +modifier(vertical-mobile)
-      +mobile
-        +radioGroupVertical
+// bal-radio .bal-radio-checkbox__label
+//   &::before,
+//   &::after
+//     margin-top: 0px !important
+// //
+// //
+// // radio & checkbox group
+// +block(radio-checkbox-group)
+//   display: inline-block
+//   position: relative
+//   width: 100%
+//   //
+//   // inner group element
+//   +element(inner)
+//     display: flex
+//     flex-direction: row
+//     justify-content: flex-start
+//     align-items: stretch
+//     flex-wrap: wrap
+//     gap: var(--bal-space-normal)
+//     //
+//     // transform the radios into buttons
+//     +modifier(select-button)
+//       flex-direction: column
+//       flex-wrap: wrap
+//       flex: 1
+//       gap: var(--bal-space-x-small)
+//       +tablet
+//         flex-direction: row
+//     +modifier(expanded)
+//       align-items: stretch
+//       .bal-radio-checkbox
+//         flex: 1
+//         +mobile
+//           width: 100%
+//     &--select-button#{&}--vertical
+//       gap: var(--bal-space-x-small)
+//     //
+//     // shows the radios verically
+//     +modifier(vertical)
+//       +radioGroupVertical
+//       +tablet
+//         align-items: flex-start
+//     //
+//     // only shows the radios verically on mobile
+//     +modifier(vertical-mobile)
+//       +mobile
+//         +radioGroupVertical
 
-//
-//
-// radio & checkbox
-+block(radio-checkbox)
-  position: relative
-  display: inline-flex
-  justify-content: flex-start
-  align-items: center
-  outline: none
-  min-width: 1.5rem
-  min-height: 3rem
-  //
-  // flat heigt without padding
-  +modifier(flat)
-    &:not(.bal-radio-checkbox--select-button)
-      min-height: 1.5rem
-  //
-  // hide native input
-  +element(input)
-    +hidden-input
-  //
-  // hide native input
-  +modifier(invisible)
-    +hidden-input
-  //
-  // set cursor
-  &:not(#{&}--disabled)
-    &,
-    input,
-    input + label,
-    input + label > span
-      cursor: pointer
+// //
+// //
+// // radio & checkbox
+// +block(radio-checkbox)
+//   position: relative
+//   display: inline-flex
+//   justify-content: flex-start
+//   align-items: center
+//   outline: none
+//   min-width: 1.5rem
+//   min-height: 3rem
+//   //
+//   // flat heigt without padding
+//   +modifier(flat)
+//     &:not(.bal-radio-checkbox--select-button)
+//       min-height: 1.5rem
+//   //
+//   // hide native input
+//   +element(input)
+//     +hidden-input
+//     width: 100%
+//     height: 100%
+//   //
+//   // hide native input
+//   +modifier(invisible)
+//     +hidden-input
+//   //
+//   // set cursor
+//   &:not(#{&}--disabled)
+//     &,
+//     input,
+//     input + label,
+//     input + label > span
+//       cursor: pointer
 
-  &.bal-focused
-    &.bal-radio-checkbox--select-button
-      @extend %focus-shadow
-    .bal-radio-checkbox__input:not(.bal-radio-checkbox__input--select-button) + .bal-radio-checkbox__label::before
-      @extend %focus-shadow
+//   &.bal-focused
+//     &.bal-radio-checkbox--select-button
+//       @extend %focus-shadow
+//     .bal-radio-checkbox__input:not(.bal-radio-checkbox__input--select-button) + .bal-radio-checkbox__label::before
+//       @extend %focus-shadow
 
-  //
-  // label of the radio with the icon and the text
-  +element(label)
-    +font-smoothing()
-    +unselectable
-    margin: 0
-    line-height: 1.5rem
-    contain: layout style
-    display: flex
-    align-items: center
-    justify-content: center
-    text-align: left
-    min-height: var(--bal-radio-checkbox-label-min-height)
-    font-family: var(--bal-font-family-text)
-    //
-    // inner text span element
-    +element(text)
-      padding-left: 2rem
-      hyphens: auto
-      padding-top: 0.25rem
-      padding-bottom: 0.25rem
-      +modifier(hidden)
-        padding-left: 0
-        display: none
-      +modifier(flat)
-        padding-top: 0
-        padding-bottom: 0
-    +modifier(flat)
-      &:not(.bal-radio-checkbox--select-button)
-        &::before,
-        &::after
-          top: 0px !important
-    +modifier(hidden)
-      &::before,
-      &::after
-        top: 0px !important
-    //
-    // symbol
-    &::before,
-    &::after
-      display: inline-block
-      position: absolute
-      left: 0
-      top: 0.25rem
-      height: var(--bal-radio-checkbox-symbol-size)
-      width: var(--bal-radio-checkbox-symbol-size)
-      background-color: transparent
-      background-position: center
-      background-repeat: no-repeat
-      background-size: var(--bal-radio-checkbox-symbol-size) var(--bal-radio-checkbox-symbol-size)
-    &::before
-      content: ''
-      border-style: var(--bal-form-field-control-border-style)
-      border-width: 2px
-    &::after
-      content: none
-    &--checked
-      &::after
-        content: ''
-    //
-    // radio styles
-    &--radio
-      &::before,
-      &::after
-        border-radius: 50%
-      &::after
-        left: 0
-        transform: scale(0.25)
-    //
-    // checkbox styles
-    &--checkbox
-      &::before
-        border-radius: var(--bal-form-field-control-radius)
-      &::after
-        border-top: 0
-        border-right-style: var(--bal-form-field-control-border-style)
-        border-right-width: 2px
-        border-bottom-style: var(--bal-form-field-control-border-style)
-        border-bottom-width: 2px
-        border-left: 0
-        border-radius: 1px
-        width: var(--bal-radio-checkbox-symbol-width)
-        height: var(--bal-radio-checkbox-symbol-height)
-        left: var(--bal-radio-checkbox-symbol-left)
-        margin-top: var(--bal-radio-checkbox-symbol-margin-top)
-        transform: rotate(45deg)
-  //
-  // Symbol colors main, inverted and background
-  +radioCheckboxSymbol(--bal-color-primary, --bal-color-primary, --bal-color-white, --bal-color-transparent)
-  &:hover,
-  &--hovered
-    +radioCheckboxSymbol(--bal-color-light-blue-5, --bal-color-light-blue-5, --bal-color-white, --bal-color-grey-2)
-  &:active,
-  &--pressed
-    +radioCheckboxSymbol(--bal-color-blue-6, --bal-color-blue-6, --bal-color-white, --bal-color-grey-2)
-  &--invalid
-    +radioCheckboxSymbol(--bal-color-border-danger, --bal-color-border-danger, --bal-color-white, --bal-color-danger-1)
-    &:hover,
-    &.bal-radio-checkbox--hovered
-      +radioCheckboxSymbol(--bal-color-danger-5, --bal-color-danger-5, --bal-color-white, --bal-color-danger-1)
-    &:active,
-    &.bal-radio-checkbox--pressed
-      +radioCheckboxSymbol(--bal-color-danger-6, --bal-color-danger-6, --bal-color-white, --bal-color-danger-1)
-  &--disabled,
-  &--disabled:hover,
-  &--disabled:active
-    +radioCheckboxSymbol(--bal-color-border-grey-dark, --bal-color-border-grey-dark, --bal-color-white, --bal-color-grey-2)
-  //
-  // label colors
-  +radioCheckboxLabel(--bal-color-primary)
-  &:hover,
-  &--hovered
-    +radioCheckboxLabel(--bal-color-light-blue-5)
-  &:active,
-  &--pressed
-    +radioCheckboxLabel(--bal-color-blue-6)
-  &--invalid
-    +radioCheckboxLabel(--bal-color-border-danger)
-    &:hover,
-    &.bal-radio-checkbox--hovered
-      +radioCheckboxLabel(--bal-color-danger-5)
-    &:active,
-    &.bal-radio-checkbox--pressed
-      +radioCheckboxLabel(--bal-color-danger-6)
-  &--disabled,
-  &--disabled:hover,
-  &--disabled:active,
-  &--disabled#{&}--hovered,
-  &--disabled#{&}--pressed
-    +radioCheckboxLabel(--bal-color-text-grey)
-  //
-  //
-  // inline display for tables
-  &--inline
-    display: inline
-  //
-  //
-  // select button styles
-  &--select-button
-    padding-left: 0.75rem
-    padding-right: 0.75rem
-    min-width: 3rem
-    border-width: 2px
-    border-style: var(--bal-form-field-control-border-style)
-    border-radius: var(--bal-form-field-control-radius)
-    // color styles
-    border-color: var(--bal-radio-checkbox-select-button-border-color)
-    &:hover
-      border-color: var(--bal-radio-checkbox-select-button-border-color-hover)
-      background: var(--bal-radio-checkbox-select-button-background-hover)
-    &:active
-      border-color: var(--bal-radio-checkbox-select-button-border-color-active)
-      background: var(--bal-radio-checkbox-select-button-background-active)
-    label
-      &::before
-        top: unset
-      &::after
-        top: unset
-        margin-top: -3px
-    .bal-radio-checkbox__label--flat
-      &::before
-        top: unset !important
-      &::after
-        margin-top: -3px
-        top: unset !important
-      .bal-radio-checkbox__label__text--flat
-        padding-top: 0.25rem
-        padding-bottom: 0.25rem
-  &--select-button#{&}--checked
-    background: var(--bal-radio-checkbox-select-button-background-checked)
-    .bal-radio-checkbox__label
-      .bal-radio-checkbox__label__text
-        .is-link
-          color: var(--bal-radio-checkbox-select-button-link-text-color-checked)
-    &:hover
-      background: var(--bal-radio-checkbox-select-button-background-checked-hover)
-    &:active
-      background: var(--bal-radio-checkbox-select-button-background-checked-active)
-    +radioCheckboxSymbol(--bal-color-primary, --bal-color-white, --bal-color-white, --bal-color-transparent)
-    +radioCheckboxLabel(--bal-color-white)
-    &:hover
-      +radioCheckboxSymbol(--bal-color-light-blue-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
-      +radioCheckboxLabel(--bal-color-white)
-    &:active
-      +radioCheckboxSymbol(--bal-color-blue-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
-      +radioCheckboxLabel(--bal-color-white)
-  &--select-button#{&}--invalid
-    border-color: var(--bal-radio-checkbox-select-button-border-color-invalid)
-    background: var(--bal-radio-checkbox-select-button-background-invalid)
-    .bal-radio-checkbox__label
-      .bal-radio-checkbox__label__text
-        .is-link
-          color: var(--bal-form-field-label-danger-color)
-    &:hover
-      border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-hover)
-      background: var(--bal-radio-checkbox-select-button-background-invalid-hover)
-    &:active
-      border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-active)
-      background: var(--bal-radio-checkbox-select-button-background-invalid-active)
-  &--select-button#{&}--invalid#{&}--checked
-    border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked)
-    background: var(--bal-radio-checkbox-select-button-background-invalid-checked)
-    &:hover
-      border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked-hover)
-      background: var(--bal-radio-checkbox-select-button-background-invalid-checked-hover)
-    &:active
-      border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked-active)
-      background: var(--bal-radio-checkbox-select-button-background-invalid-checked-active)
-    +radioCheckboxSymbol(--bal-color-border-danger, --bal-color-white, --bal-color-white, --bal-color-transparent)
-    &:hover
-      +radioCheckboxSymbol(--bal-color-danger-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
-    &:active
-      +radioCheckboxSymbol(--bal-color-danger-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
-  &--select-button#{&}--disabled,
-  &--select-button#{&}--disabled:hover,
-  &--select-button#{&}--disabled:active
-    border-color: var(--bal-radio-checkbox-select-button-border-color-disabled-hover-active)
-    background: var(--bal-radio-checkbox-select-button-background-disabled-hover-active)
-    .bal-radio-checkbox__label
-      .bal-radio-checkbox__label__text
-        .is-link
-          color: var(--bal-form-field-label-disabled-color)
-  &--select-button#{&}--disabled#{&}--checked,
-  &--select-button#{&}--disabled#{&}--checked:hover,
-  &--select-button#{&}--disabled#{&}--checked:active
-    border-color: var(--bal-radio-checkbox-select-button-border-color-disabled-checked-hover-active)
-    background: var(--bal-radio-checkbox-select-button-background-disabled-checked-hover-active)
-    +radioCheckboxSymbol(--bal-color-border-grey-dark, --bal-color-white, --bal-color-white, --bal-color-transparent)
-  //
-  //
-  // Switch styles
-  &--switch
-    min-width: 2.5rem
-    .bal-radio-checkbox__label
-      padding-left: 1rem
-    .bal-radio-checkbox__label::before
-      border-radius: 1.5rem
-      position: absolute
-      display: block
-      top: 0
-      left: 0
-      width: 2.5rem
-      height: 1.5rem
-      border: 1.6px solid transparent
-      content: ''
-      transition: left 0.25s ease-out, background 0.25s ease-out
-      margin-top: 0.25rem
-    .bal-radio-checkbox__label::after
-      border: none
-      margin: 0
-      border-radius: 50%
-      display: block
-      position: absolute
-      top: 0.25rem !important
-      left: 0.25rem
-      width: 1rem
-      height: 1rem
-      z-index: 2
-      margin-top: 0.25rem
-      transform: translate3d(0, 0, 0)
-      transition: left 0.25s ease-out, background 0.25s ease-out
-      content: ''
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-before)
-    .bal-radio-checkbox__label::after
-      background: var(--bal-radio-checkbox-switch-label-background-after)
-    &:hover
-      .bal-radio-checkbox__label::after
-        background: var(--bal-radio-checkbox-switch-label-background-hover-after)
-    &:active
-      .bal-radio-checkbox__label::after
-        background: var(--bal-radio-checkbox-switch-label-background-active-after)
-  &--switch#{&}--flat
-    .bal-radio-checkbox__label::before,
-    .bal-radio-checkbox__label::after
-      margin-top: 0
-  &--switch#{&}--checked
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-checked-before)
-    .bal-radio-checkbox__label::after
-      left: 1.25rem
-      background: var(--bal-radio-checkbox-switch-label-background-checked-after)
-    &:hover
-      .bal-radio-checkbox__label::before
-        background: var(--bal-radio-checkbox-switch-label-background-checked-hover-before)
-    &:active
-      .bal-radio-checkbox__label::before
-        background: var(--bal-radio-checkbox-switch-label-background-checked-active-before)
-  &--switch#{&}--invalid
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-invalid-before)
-    .bal-radio-checkbox__label::after
-      background: var(--bal-radio-checkbox-switch-label-background-invalid-after)
-    &:hover
-      .bal-radio-checkbox__label::after
-        background: var(--bal-radio-checkbox-switch-label-background-invalid-hover-after)
-    &:active
-      .bal-radio-checkbox__label::after
-        background: var(--bal-radio-checkbox-switch-label-background-invalid-active-after)
-  &--switch#{&}--invalid#{&}--checked
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-before)
-    .bal-radio-checkbox__label::after
-      background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-after)
-    &:hover
-      .bal-radio-checkbox__label::before
-        background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-hover-before)
-    &:active
-      .bal-radio-checkbox__label::before
-        background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-active-before)
-  &--switch#{&}--disabled,
-  &--switch#{&}--disabled:hover,
-  &--switch#{&}--disabled:active
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-disabled-hover-active-before)
-    .bal-radio-checkbox__label::after
-      background: var(--bal-radio-checkbox-switch-label-background-disabled-hover-active-after)
-  &--switch#{&}--disabled#{&}--checked,
-  &--switch#{&}--disabled#{&}--checked:hover,
-  &--switch#{&}--disabled#{&}--checked:active
-    .bal-radio-checkbox__label::before
-      background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before)
-    .bal-radio-checkbox__label::after
-      background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after)
+//   //
+//   // label of the radio with the icon and the text
+//   +element(label)
+//     +font-smoothing()
+//     +unselectable
+//     margin: 0
+//     line-height: 1.5rem
+//     contain: layout style
+//     display: flex
+//     align-items: center
+//     justify-content: center
+//     text-align: left
+//     min-height: var(--bal-radio-checkbox-label-min-height)
+//     font-family: var(--bal-font-family-text)
+//     //
+//     // inner text span element
+//     +element(text)
+//       padding-left: 2rem
+//       hyphens: auto
+//       padding-top: 0.25rem
+//       padding-bottom: 0.25rem
+//       +modifier(hidden)
+//         padding-left: 0
+//         display: none
+//       +modifier(flat)
+//         padding-top: 0
+//         padding-bottom: 0
+//     +modifier(flat)
+//       &:not(.bal-radio-checkbox--select-button)
+//         &::before,
+//         &::after
+//           top: 0px !important
+//     +modifier(hidden)
+//       &::before,
+//       &::after
+//         top: 0px !important
+//     //
+//     // symbol
+//     &::before,
+//     &::after
+//       display: inline-block
+//       position: absolute
+//       left: 0
+//       top: 0.25rem
+//       height: var(--bal-radio-checkbox-symbol-size)
+//       width: var(--bal-radio-checkbox-symbol-size)
+//       background-color: transparent
+//       background-position: center
+//       background-repeat: no-repeat
+//       background-size: var(--bal-radio-checkbox-symbol-size) var(--bal-radio-checkbox-symbol-size)
+//     &::before
+//       content: ''
+//       border-style: var(--bal-form-field-control-border-style)
+//       border-width: 2px
+//     &::after
+//       content: none
+//     &--checked
+//       &::after
+//         content: ''
+//     //
+//     // radio styles
+//     &--radio
+//       &::before,
+//       &::after
+//         border-radius: 50%
+//       &::after
+//         left: 0
+//         transform: scale(0.25)
+//     //
+//     // checkbox styles
+//     &--checkbox
+//       &::before
+//         border-radius: var(--bal-form-field-control-radius)
+//       &::after
+//         border-top: 0
+//         border-right-style: var(--bal-form-field-control-border-style)
+//         border-right-width: 2px
+//         border-bottom-style: var(--bal-form-field-control-border-style)
+//         border-bottom-width: 2px
+//         border-left: 0
+//         border-radius: 1px
+//         width: var(--bal-radio-checkbox-symbol-width)
+//         height: var(--bal-radio-checkbox-symbol-height)
+//         left: var(--bal-radio-checkbox-symbol-left)
+//         margin-top: var(--bal-radio-checkbox-symbol-margin-top)
+//         transform: rotate(45deg)
+//   //
+//   // Symbol colors main, inverted and background
+//   +radioCheckboxSymbol(--bal-color-primary, --bal-color-primary, --bal-color-white, --bal-color-transparent)
+//   &:hover,
+//   &--hovered
+//     +radioCheckboxSymbol(--bal-color-light-blue-5, --bal-color-light-blue-5, --bal-color-white, --bal-color-grey-2)
+//   &:active,
+//   &--pressed
+//     +radioCheckboxSymbol(--bal-color-blue-6, --bal-color-blue-6, --bal-color-white, --bal-color-grey-2)
+//   &--invalid
+//     +radioCheckboxSymbol(--bal-color-border-danger, --bal-color-border-danger, --bal-color-white, --bal-color-danger-1)
+//     &:hover,
+//     &.bal-radio-checkbox--hovered
+//       +radioCheckboxSymbol(--bal-color-danger-5, --bal-color-danger-5, --bal-color-white, --bal-color-danger-1)
+//     &:active,
+//     &.bal-radio-checkbox--pressed
+//       +radioCheckboxSymbol(--bal-color-danger-6, --bal-color-danger-6, --bal-color-white, --bal-color-danger-1)
+//   &--disabled,
+//   &--disabled:hover,
+//   &--disabled:active
+//     +radioCheckboxSymbol(--bal-color-border-grey-dark, --bal-color-border-grey-dark, --bal-color-white, --bal-color-grey-2)
+//   //
+//   // label colors
+//   +radioCheckboxLabel(--bal-color-primary)
+//   &:hover,
+//   &--hovered
+//     +radioCheckboxLabel(--bal-color-light-blue-5)
+//   &:active,
+//   &--pressed
+//     +radioCheckboxLabel(--bal-color-blue-6)
+//   &--invalid
+//     +radioCheckboxLabel(--bal-color-border-danger)
+//     &:hover,
+//     &.bal-radio-checkbox--hovered
+//       +radioCheckboxLabel(--bal-color-danger-5)
+//     &:active,
+//     &.bal-radio-checkbox--pressed
+//       +radioCheckboxLabel(--bal-color-danger-6)
+//   &--disabled,
+//   &--disabled:hover,
+//   &--disabled:active,
+//   &--disabled#{&}--hovered,
+//   &--disabled#{&}--pressed
+//     +radioCheckboxLabel(--bal-color-text-grey)
+//   //
+//   //
+//   // inline display for tables
+//   &--inline
+//     display: inline
+//   //
+//   //
+//   // select button styles
+//   &--select-button
+//     padding-left: 0.75rem
+//     padding-right: 0.75rem
+//     min-width: 3rem
+//     border-width: 2px
+//     border-style: var(--bal-form-field-control-border-style)
+//     border-radius: var(--bal-form-field-control-radius)
+//     // color styles
+//     border-color: var(--bal-radio-checkbox-select-button-border-color)
+//     &:hover
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-hover)
+//       background: var(--bal-radio-checkbox-select-button-background-hover)
+//     &:active
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-active)
+//       background: var(--bal-radio-checkbox-select-button-background-active)
+//     label
+//       &::before
+//         top: unset
+//       &::after
+//         top: unset
+//         margin-top: -3px
+//     .bal-radio-checkbox__label--flat
+//       &::before
+//         top: unset !important
+//       &::after
+//         margin-top: -3px
+//         top: unset !important
+//       .bal-radio-checkbox__label__text--flat
+//         padding-top: 0.25rem
+//         padding-bottom: 0.25rem
+//   &--select-button#{&}--checked
+//     background: var(--bal-radio-checkbox-select-button-background-checked)
+//     .bal-radio-checkbox__label
+//       .bal-radio-checkbox__label__text
+//         .is-link
+//           color: var(--bal-radio-checkbox-select-button-link-text-color-checked)
+//     &:hover
+//       background: var(--bal-radio-checkbox-select-button-background-checked-hover)
+//     &:active
+//       background: var(--bal-radio-checkbox-select-button-background-checked-active)
+//     +radioCheckboxSymbol(--bal-color-primary, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//     +radioCheckboxLabel(--bal-color-white)
+//     &:hover
+//       +radioCheckboxSymbol(--bal-color-light-blue-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//       +radioCheckboxLabel(--bal-color-white)
+//     &:active
+//       +radioCheckboxSymbol(--bal-color-blue-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//       +radioCheckboxLabel(--bal-color-white)
+//   &--select-button#{&}--invalid
+//     border-color: var(--bal-radio-checkbox-select-button-border-color-invalid)
+//     background: var(--bal-radio-checkbox-select-button-background-invalid)
+//     .bal-radio-checkbox__label
+//       .bal-radio-checkbox__label__text
+//         .is-link
+//           color: var(--bal-form-field-label-danger-color)
+//     &:hover
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-hover)
+//       background: var(--bal-radio-checkbox-select-button-background-invalid-hover)
+//     &:active
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-active)
+//       background: var(--bal-radio-checkbox-select-button-background-invalid-active)
+//   &--select-button#{&}--invalid#{&}--checked
+//     border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked)
+//     background: var(--bal-radio-checkbox-select-button-background-invalid-checked)
+//     &:hover
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked-hover)
+//       background: var(--bal-radio-checkbox-select-button-background-invalid-checked-hover)
+//     &:active
+//       border-color: var(--bal-radio-checkbox-select-button-border-color-invalid-checked-active)
+//       background: var(--bal-radio-checkbox-select-button-background-invalid-checked-active)
+//     +radioCheckboxSymbol(--bal-color-border-danger, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//     &:hover
+//       +radioCheckboxSymbol(--bal-color-danger-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//     &:active
+//       +radioCheckboxSymbol(--bal-color-danger-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//   &--select-button#{&}--disabled,
+//   &--select-button#{&}--disabled:hover,
+//   &--select-button#{&}--disabled:active
+//     border-color: var(--bal-radio-checkbox-select-button-border-color-disabled-hover-active)
+//     background: var(--bal-radio-checkbox-select-button-background-disabled-hover-active)
+//     .bal-radio-checkbox__label
+//       .bal-radio-checkbox__label__text
+//         .is-link
+//           color: var(--bal-form-field-label-disabled-color)
+//   &--select-button#{&}--disabled#{&}--checked,
+//   &--select-button#{&}--disabled#{&}--checked:hover,
+//   &--select-button#{&}--disabled#{&}--checked:active
+//     border-color: var(--bal-radio-checkbox-select-button-border-color-disabled-checked-hover-active)
+//     background: var(--bal-radio-checkbox-select-button-background-disabled-checked-hover-active)
+//     +radioCheckboxSymbol(--bal-color-border-grey-dark, --bal-color-white, --bal-color-white, --bal-color-transparent)
+//   //
+//   //
+//   // Switch styles
+//   &--switch
+//     min-width: 2.5rem
+//     .bal-radio-checkbox__label
+//       padding-left: 1rem
+//     .bal-radio-checkbox__label::before
+//       border-radius: 1.5rem
+//       position: absolute
+//       display: block
+//       top: 0
+//       left: 0
+//       width: 2.5rem
+//       height: 1.5rem
+//       border: 1.6px solid transparent
+//       content: ''
+//       transition: left 0.25s ease-out, background 0.25s ease-out
+//       margin-top: 0.25rem
+//     .bal-radio-checkbox__label::after
+//       border: none
+//       margin: 0
+//       border-radius: 50%
+//       display: block
+//       position: absolute
+//       top: 0.25rem !important
+//       left: 0.25rem
+//       width: 1rem
+//       height: 1rem
+//       z-index: 2
+//       margin-top: 0.25rem
+//       transform: translate3d(0, 0, 0)
+//       transition: left 0.25s ease-out, background 0.25s ease-out
+//       content: ''
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-before)
+//     .bal-radio-checkbox__label::after
+//       background: var(--bal-radio-checkbox-switch-label-background-after)
+//     &:hover
+//       .bal-radio-checkbox__label::after
+//         background: var(--bal-radio-checkbox-switch-label-background-hover-after)
+//     &:active
+//       .bal-radio-checkbox__label::after
+//         background: var(--bal-radio-checkbox-switch-label-background-active-after)
+//   &--switch#{&}--flat
+//     .bal-radio-checkbox__label::before,
+//     .bal-radio-checkbox__label::after
+//       margin-top: 0
+//   &--switch#{&}--checked
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-checked-before)
+//     .bal-radio-checkbox__label::after
+//       left: 1.25rem
+//       background: var(--bal-radio-checkbox-switch-label-background-checked-after)
+//     &:hover
+//       .bal-radio-checkbox__label::before
+//         background: var(--bal-radio-checkbox-switch-label-background-checked-hover-before)
+//     &:active
+//       .bal-radio-checkbox__label::before
+//         background: var(--bal-radio-checkbox-switch-label-background-checked-active-before)
+//   &--switch#{&}--invalid
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-invalid-before)
+//     .bal-radio-checkbox__label::after
+//       background: var(--bal-radio-checkbox-switch-label-background-invalid-after)
+//     &:hover
+//       .bal-radio-checkbox__label::after
+//         background: var(--bal-radio-checkbox-switch-label-background-invalid-hover-after)
+//     &:active
+//       .bal-radio-checkbox__label::after
+//         background: var(--bal-radio-checkbox-switch-label-background-invalid-active-after)
+//   &--switch#{&}--invalid#{&}--checked
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-before)
+//     .bal-radio-checkbox__label::after
+//       background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-after)
+//     &:hover
+//       .bal-radio-checkbox__label::before
+//         background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-hover-before)
+//     &:active
+//       .bal-radio-checkbox__label::before
+//         background: var(--bal-radio-checkbox-switch-label-background-invalid-checked-active-before)
+//   &--switch#{&}--disabled,
+//   &--switch#{&}--disabled:hover,
+//   &--switch#{&}--disabled:active
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-disabled-hover-active-before)
+//     .bal-radio-checkbox__label::after
+//       background: var(--bal-radio-checkbox-switch-label-background-disabled-hover-active-after)
+//   &--switch#{&}--disabled#{&}--checked,
+//   &--switch#{&}--disabled#{&}--checked:hover,
+//   &--switch#{&}--disabled#{&}--checked:active
+//     .bal-radio-checkbox__label::before
+//       background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before)
+//     .bal-radio-checkbox__label::after
+//       background: var(--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after)
 
-//
-// swicth check icon when selected
-+block(radio-checkbox)
-  +element(icon)
-    position: absolute !important
-    left: 5.5px
-    z-index: 1
-    +modifier(hidden)
-      display: none !important
+// //
+// // swicth check icon when selected
+// +block(radio-checkbox)
+//   +element(icon)
+//     position: absolute !important
+//     left: 5.5px
+//     z-index: 1
+//     +modifier(hidden)
+//       display: none !important
diff --git a/packages/core/src/components/bal-checkbox/test/bal-checkbox-icons.visual.html b/packages/core/src/components/bal-checkbox/test/bal-checkbox-icons.visual.html
new file mode 100644
index 0000000000..36775c148b
--- /dev/null
+++ b/packages/core/src/components/bal-checkbox/test/bal-checkbox-icons.visual.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <script type="module" src="/build/baloise-design-system.esm.js"></script>
+    <script nomodule src="/build/baloise-design-system.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app>
+      <main class="container py-medium">
+        <section data-testid="check">
+          <bal-check></bal-check>
+          <bal-check checked></bal-check>
+          <br />
+          <bal-check invalid></bal-check>
+          <bal-check invalid checked></bal-check>
+          <br />
+          <bal-check disabled></bal-check>
+          <bal-check disabled checked></bal-check>
+        </section>
+
+        <section data-testid="switch">
+          <bal-switch></bal-switch>
+          <bal-switch checked></bal-switch>
+          <br />
+          <bal-switch invalid></bal-switch>
+          <bal-switch invalid checked></bal-switch>
+          <br />
+          <bal-switch disabled></bal-switch>
+          <bal-switch disabled checked></bal-switch>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/packages/core/src/components/bal-checkbox/test/bal-checkbox.visual.html b/packages/core/src/components/bal-checkbox/test/bal-checkbox.visual.html
index 52f94c44ac..ee486a4e29 100644
--- a/packages/core/src/components/bal-checkbox/test/bal-checkbox.visual.html
+++ b/packages/core/src/components/bal-checkbox/test/bal-checkbox.visual.html
@@ -13,7 +13,7 @@
     <bal-doc-app>
       <main class="container py-medium">
         <section data-testid="basic">
-          <bal-checkbox>Label</bal-checkbox>
+          <bal-checkbox non-submit>Label</bal-checkbox>
         </section>
         <br />
         <br />
diff --git a/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx b/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx
index 509bd5bbdd..8fc7cdbea2 100644
--- a/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx
+++ b/packages/core/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx
@@ -1,27 +1,27 @@
 import {
   Component,
-  h,
-  Host,
-  Prop,
+  ComponentInterface,
   Element,
-  EventEmitter,
   Event,
-  Watch,
-  ComponentInterface,
-  Method,
+  EventEmitter,
+  h,
+  Host,
   Listen,
+  Method,
+  Prop,
   State,
+  Watch,
 } from '@stencil/core'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
+import { inheritAttributes } from '../../../utils/attributes'
+import { BEM } from '../../../utils/bem'
+import { BalFocusObserver, ListenToFocus } from '../../../utils/focus'
+import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
 import { stopEventBubbling } from '../../../utils/form-input'
 import { hasTagName, isDescendant } from '../../../utils/helpers'
-import { BEM } from '../../../utils/bem'
-import { BalRadioOption } from '../bal-radio.type'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
-import { inheritAttributes } from '../../../utils/attributes'
 import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation'
-import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
-import { BalFocusObserver, ListenToFocus } from '../../../utils/focus'
-import { ariaBooleanToString } from 'packages/core/src/utils/aria'
+import { BalRadioOption } from '../bal-radio.type'
 
 @Component({
   tag: 'bal-radio-group',
@@ -457,7 +457,7 @@ export class RadioGroup
    */
 
   render() {
-    const block = BEM.block('radio-checkbox-group')
+    const block = BEM.block('radio-group')
     const innerEl = block.element('inner')
 
     const rawOptions = this.options || []
diff --git a/packages/core/src/components/bal-radio/bal-radio.mixins.sass b/packages/core/src/components/bal-radio/bal-radio.mixins.sass
new file mode 100644
index 0000000000..1d15d8a1b4
--- /dev/null
+++ b/packages/core/src/components/bal-radio/bal-radio.mixins.sass
@@ -0,0 +1,19 @@
+=radioGroupVertical
+  flex-direction: column
+  border-radius: var(--bal-radius-normal)
+  gap: 0
+
+=radioSymbol($color, $border, $inverted, $background)
+  .bal-radio__label
+    &::before
+      border-color: var(#{$border})
+      background: var(#{$background})
+    &.bal-radio__label.bal-radio__label--checked
+      &::after
+        background: var(#{$inverted})
+      &::before
+        background: var(#{$color})
+
+=radioLabel($color)
+  .bal-radio__label .bal-radio__label__text
+    color: var(#{$color})
diff --git a/packages/core/src/components/bal-radio/bal-radio.sass b/packages/core/src/components/bal-radio/bal-radio.sass
new file mode 100644
index 0000000000..2f9881cc28
--- /dev/null
+++ b/packages/core/src/components/bal-radio/bal-radio.sass
@@ -0,0 +1,300 @@
+@use '@baloise/ds-styles/sass/mixins' as *
+@use './bal-radio.mixins' as *
+@use './bal-radio.vars' as *
+
+bal-radio .bal-radio__label
+  &::before,
+  &::after
+    margin-top: 0px !important
+//
+//
+// radio group
++block(radio-group)
+  display: inline-block
+  position: relative
+  width: 100%
+  //
+  // inner group element
+  +element(inner)
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+    align-items: stretch
+    flex-wrap: wrap
+    gap: var(--bal-space-normal)
+    //
+    // transform the radios into buttons
+    +modifier(select-button)
+      flex-direction: column
+      flex-wrap: wrap
+      flex: 1
+      gap: var(--bal-space-x-small)
+      +tablet
+        flex-direction: row
+    +modifier(expanded)
+      align-items: stretch
+      .bal-radio
+        flex: 1
+        +mobile
+          width: 100%
+    &--select-button#{&}--vertical
+      gap: var(--bal-space-x-small)
+    //
+    // shows the radios verically
+    +modifier(vertical)
+      +radioGroupVertical
+      +tablet
+        align-items: flex-start
+    //
+    // only shows the radios verically on mobile
+    +modifier(vertical-mobile)
+      +mobile
+        +radioGroupVertical
+
+//
+//
+// radio
++block(radio)
+  position: relative
+  display: inline-flex
+  justify-content: flex-start
+  align-items: center
+  outline: none
+  min-width: 1.5rem
+  min-height: 3rem
+  //
+  // flat heigt without padding
+  +modifier(flat)
+    &:not(.bal-radio--select-button)
+      min-height: 1.5rem
+  //
+  // hide native input
+  +element(input)
+    +hidden-input
+    width: 100%
+    height: 100%
+  //
+  // hide native input
+  +modifier(invisible)
+    +hidden-input
+  //
+  // set cursor
+  &:not(#{&}--disabled)
+    &,
+    input,
+    input + label,
+    input + label > span
+      cursor: pointer
+
+  &.bal-focused
+    &.bal-radio--select-button
+      @extend %focus-shadow
+    .bal-radio__input:not(.bal-radio__input--select-button) + .bal-radio__label::before
+      @extend %focus-shadow
+
+  //
+  // label of the radio with the icon and the text
+  +element(label)
+    +font-smoothing()
+    +unselectable
+    margin: 0
+    line-height: 1.5rem
+    contain: layout style
+    display: flex
+    align-items: center
+    justify-content: center
+    text-align: left
+    min-height: var(--bal-radio-label-min-height)
+    font-family: var(--bal-font-family-text)
+    //
+    // inner text span element
+    +element(text)
+      padding-left: 2rem
+      hyphens: auto
+      padding-top: 0.25rem
+      padding-bottom: 0.25rem
+      +modifier(hidden)
+        padding-left: 0
+        display: none
+      +modifier(flat)
+        padding-top: 0
+        padding-bottom: 0
+    +modifier(flat)
+      &:not(.bal-radio--select-button)
+        &::before,
+        &::after
+          top: 0px !important
+    +modifier(hidden)
+      &::before,
+      &::after
+        top: 0px !important
+    //
+    // symbol
+    &::before,
+    &::after
+      display: inline-block
+      position: absolute
+      left: 0
+      top: 0.25rem
+      height: var(--bal-radio-symbol-size)
+      width: var(--bal-radio-symbol-size)
+      background-color: transparent
+      background-position: center
+      background-repeat: no-repeat
+      background-size: var(--bal-radio-symbol-size) var(--bal-radio-symbol-size)
+    &::before
+      content: ''
+      border-style: var(--bal-form-field-control-border-style)
+      border-width: 2px
+      border-radius: 50%
+    &::after
+      content: none
+      border-radius: 50%
+      left: 0
+      transform: scale(0.25)
+    &--checked
+      &::after
+        content: ''
+
+  //
+  // Symbol colors main, inverted and background
+  +radioSymbol(--bal-color-primary, --bal-color-primary, --bal-color-white, --bal-color-transparent)
+  &:hover,
+  &--hovered
+    +radioSymbol(--bal-color-light-blue-5, --bal-color-light-blue-5, --bal-color-white, --bal-color-grey-2)
+  &:active,
+  &--pressed
+    +radioSymbol(--bal-color-blue-6, --bal-color-blue-6, --bal-color-white, --bal-color-grey-2)
+  &--invalid
+    +radioSymbol(--bal-color-border-danger, --bal-color-border-danger, --bal-color-white, --bal-color-danger-1)
+    &:hover,
+    &.bal-radio--hovered
+      +radioSymbol(--bal-color-danger-5, --bal-color-danger-5, --bal-color-white, --bal-color-danger-1)
+    &:active,
+    &.bal-radio--pressed
+      +radioSymbol(--bal-color-danger-6, --bal-color-danger-6, --bal-color-white, --bal-color-danger-1)
+  &--disabled,
+  &--disabled:hover,
+  &--disabled:active
+    +radioSymbol(--bal-color-border-grey-dark, --bal-color-border-grey-dark, --bal-color-white, --bal-color-grey-2)
+  //
+  // label colors
+  +radioLabel(--bal-color-primary)
+  &:hover,
+  &--hovered
+    +radioLabel(--bal-color-light-blue-5)
+  &:active,
+  &--pressed
+    +radioLabel(--bal-color-blue-6)
+  &--invalid
+    +radioLabel(--bal-color-border-danger)
+    &:hover,
+    &.bal-radio--hovered
+      +radioLabel(--bal-color-danger-5)
+    &:active,
+    &.bal-radio--pressed
+      +radioLabel(--bal-color-danger-6)
+  &--disabled,
+  &--disabled:hover,
+  &--disabled:active,
+  &--disabled#{&}--hovered,
+  &--disabled#{&}--pressed
+    +radioLabel(--bal-color-text-grey)
+  //
+  //
+  // inline display for tables
+  &--inline
+    display: inline
+  //
+  //
+  // select button styles
+  &--select-button
+    padding-left: 0.75rem
+    padding-right: 0.75rem
+    min-width: 3rem
+    border-width: 2px
+    border-style: var(--bal-form-field-control-border-style)
+    border-radius: var(--bal-form-field-control-radius)
+    // color styles
+    border-color: var(--bal-radio-select-button-border-color)
+    &:hover
+      border-color: var(--bal-radio-select-button-border-color-hover)
+      background: var(--bal-radio-select-button-background-hover)
+    &:active
+      border-color: var(--bal-radio-select-button-border-color-active)
+      background: var(--bal-radio-select-button-background-active)
+    label
+      &::before
+        top: unset
+      &::after
+        top: unset
+        margin-top: -3px
+    .bal-radio__label--flat
+      &::before
+        top: unset !important
+      &::after
+        margin-top: -3px
+        top: unset !important
+      .bal-radio__label__text--flat
+        padding-top: 0.25rem
+        padding-bottom: 0.25rem
+  &--select-button#{&}--checked
+    background: var(--bal-radio-select-button-background-checked)
+    .bal-radio__label
+      .bal-radio__label__text
+        .is-link
+          color: var(--bal-radio-select-button-link-text-color-checked)
+    &:hover
+      background: var(--bal-radio-select-button-background-checked-hover)
+    &:active
+      background: var(--bal-radio-select-button-background-checked-active)
+    +radioSymbol(--bal-color-primary, --bal-color-white, --bal-color-white, --bal-color-transparent)
+    +radioLabel(--bal-color-white)
+    &:hover
+      +radioSymbol(--bal-color-light-blue-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
+      +radioLabel(--bal-color-white)
+    &:active
+      +radioSymbol(--bal-color-blue-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
+      +radioLabel(--bal-color-white)
+  &--select-button#{&}--invalid
+    border-color: var(--bal-radio-select-button-border-color-invalid)
+    background: var(--bal-radio-select-button-background-invalid)
+    .bal-radio__label
+      .bal-radio__label__text
+        .is-link
+          color: var(--bal-form-field-label-danger-color)
+    &:hover
+      border-color: var(--bal-radio-select-button-border-color-invalid-hover)
+      background: var(--bal-radio-select-button-background-invalid-hover)
+    &:active
+      border-color: var(--bal-radio-select-button-border-color-invalid-active)
+      background: var(--bal-radio-select-button-background-invalid-active)
+  &--select-button#{&}--invalid#{&}--checked
+    border-color: var(--bal-radio-select-button-border-color-invalid-checked)
+    background: var(--bal-radio-select-button-background-invalid-checked)
+    &:hover
+      border-color: var(--bal-radio-select-button-border-color-invalid-checked-hover)
+      background: var(--bal-radio-select-button-background-invalid-checked-hover)
+    &:active
+      border-color: var(--bal-radio-select-button-border-color-invalid-checked-active)
+      background: var(--bal-radio-select-button-background-invalid-checked-active)
+    +radioSymbol(--bal-color-border-danger, --bal-color-white, --bal-color-white, --bal-color-transparent)
+    &:hover
+      +radioSymbol(--bal-color-danger-5, --bal-color-white, --bal-color-white, --bal-color-transparent)
+    &:active
+      +radioSymbol(--bal-color-danger-6, --bal-color-white, --bal-color-white, --bal-color-transparent)
+  &--select-button#{&}--disabled,
+  &--select-button#{&}--disabled:hover,
+  &--select-button#{&}--disabled:active
+    border-color: var(--bal-radio-select-button-border-color-disabled-hover-active)
+    background: var(--bal-radio-select-button-background-disabled-hover-active)
+    .bal-radio__label
+      .bal-radio__label__text
+        .is-link
+          color: var(--bal-form-field-label-disabled-color)
+  &--select-button#{&}--disabled#{&}--checked,
+  &--select-button#{&}--disabled#{&}--checked:hover,
+  &--select-button#{&}--disabled#{&}--checked:active
+    border-color: var(--bal-radio-select-button-border-color-disabled-checked-hover-active)
+    background: var(--bal-radio-select-button-background-disabled-checked-hover-active)
+    +radioSymbol(--bal-color-border-grey-dark, --bal-color-white, --bal-color-white, --bal-color-transparent)
diff --git a/packages/core/src/components/bal-radio/bal-radio.tsx b/packages/core/src/components/bal-radio/bal-radio.tsx
index 1e47336878..e179a4379a 100644
--- a/packages/core/src/components/bal-radio/bal-radio.tsx
+++ b/packages/core/src/components/bal-radio/bal-radio.tsx
@@ -1,31 +1,31 @@
 import {
   Component,
-  h,
-  Host,
-  Prop,
+  ComponentInterface,
   Element,
-  EventEmitter,
   Event,
-  Method,
-  ComponentInterface,
+  EventEmitter,
+  h,
+  Host,
   Listen,
+  Method,
+  Prop,
   State,
 } from '@stencil/core'
-import { isDescendant } from '../../utils/helpers'
+import { ariaBooleanToString } from '../../utils/aria'
+import { inheritAttributes } from '../../utils/attributes'
 import { BEM } from '../../utils/bem'
+import { BalElementStateInfo } from '../../utils/element-states'
 import { FOCUS_KEYS } from '../../utils/focus-visible'
-import { Loggable, Logger, LogInstance } from '../../utils/log'
-import { BalRadioOption } from './bal-radio.type'
-import { inheritAttributes } from '../../utils/attributes'
+import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
 import { stopEventBubbling } from '../../utils/form-input'
+import { isDescendant } from '../../utils/helpers'
 import { isSpaceKey } from '../../utils/keyboard'
-import { BalElementStateInfo } from '../../utils/element-states'
-import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
-import { ariaBooleanToString } from '../../utils/aria'
+import { Loggable, Logger, LogInstance } from '../../utils/log'
+import { BalRadioOption } from './bal-radio.type'
 
 @Component({
   tag: 'bal-radio',
-  styleUrl: '../bal-checkbox/radio-checkbox.sass',
+  styleUrl: 'bal-radio.sass',
 })
 export class Radio implements ComponentInterface, BalElementStateInfo, Loggable, BalAriaFormLinking {
   private inputId = `bal-rb-${radioIds++}`
@@ -374,7 +374,7 @@ export class Radio implements ComponentInterface, BalElementStateInfo, Loggable,
    */
 
   render() {
-    const block = BEM.block('radio-checkbox')
+    const block = BEM.block('radio')
     const inputEl = block.element('input')
     const labelEl = block.element('label')
     const labelTextEl = labelEl.element('text')
@@ -408,7 +408,6 @@ export class Radio implements ComponentInterface, BalElementStateInfo, Loggable,
         class={{
           'bal-focused': focused,
           ...block.class(),
-          ...block.modifier('radio').class(),
           ...block.modifier('select-button').class(this.interface === 'select-button'),
           ...block.modifier('invalid').class(this.invalid),
           ...block.modifier('checked').class(this.checked),
@@ -449,7 +448,6 @@ export class Radio implements ComponentInterface, BalElementStateInfo, Loggable,
           <LabelTag
             class={{
               ...labelEl.class(),
-              ...labelEl.modifier('radio').class(),
               ...labelEl.modifier('checked').class(this.checked),
               ...labelEl.modifier('hidden').class(this.labelHidden),
               ...labelEl.modifier('flat').class(this.flat),
diff --git a/packages/core/src/components/bal-radio/bal-radio.vars.sass b/packages/core/src/components/bal-radio/bal-radio.vars.sass
new file mode 100644
index 0000000000..938c77ecb5
--- /dev/null
+++ b/packages/core/src/components/bal-radio/bal-radio.vars.sass
@@ -0,0 +1,102 @@
+/**
+ * @prop --bal-radio-select-button-background-hover: tbd
+ * @prop --bal-radio-select-button-background-active: tbd
+ * @prop --bal-radio-select-button-background-checked: tbd
+ * @prop --bal-radio-select-button-background-checked-hover: tbd
+ * @prop --bal-radio-select-button-background-checked-active: tbd
+ * @prop --bal-radio-select-button-background-invalid: tbd
+ * @prop --bal-radio-select-button-background-invalid-hover: tbd
+ * @prop --bal-radio-select-button-background-invalid-active: tbd
+ * @prop --bal-radio-select-button-background-invalid-checked: tbd
+ * @prop --bal-radio-select-button-background-invalid-checked-hover: tbd
+ * @prop --bal-radio-select-button-background-invalid-checked-active: tbd
+ * @prop --bal-radio-select-button-background-disabled-hover-active: tbd
+ * @prop --bal-radio-select-button-background-disabled-checked-hover-active: tbd
+ * @prop --bal-radio-button-background: tbd
+ * @prop --bal-radio-button-background-checked-green: tbd
+ * @prop --bal-radio-button-background-checked-purple: tbd
+ * @prop --bal-radio-button-background-checked-red: tbd
+ * @prop --bal-radio-button-background-checked-yellow: tbd
+ * @prop --bal-radio-button-background-disabled: tbd
+ * @prop --bal-radio-button-background-hover: tbd
+ *
+ * @prop --bal-radio-select-button-border-color: tbd
+ * @prop --bal-radio-select-button-border-color-hover: tbd
+ * @prop --bal-radio-select-button-border-color-active: tbd
+ * @prop --bal-radio-select-button-border-color-invalid: tbd
+ * @prop --bal-radio-select-button-border-color-invalid-hover: tbd
+ * @prop --bal-radio-select-button-border-color-invalid-active: tbd
+ * @prop --bal-radio-select-button-border-color-invalid-checked: tbd
+ * @prop --bal-radio-select-button-border-color-invalid-checked-hover: tbd
+ * @prop --bal-radio-select-button-border-color-invalid-checked-active: tbd
+ * @prop --bal-radio-select-button-border-color-disabled-hover-active: tbd
+ * @prop --bal-radio-select-button-border-color-disabled-checked-hover-active: tbd
+ * @prop --bal-radio-button-border-color-hover: tbd
+ * @prop --bal-radio-button-border-color-active: tbd
+ * @prop --bal-radio-button-border-color-invalid-hover: tbd
+ * @prop --bal-radio-button-border-color-invalid-active: tbd
+ * @prop --bal-radio-button-border-color: tbd
+ * @prop --bal-radio-button-border-color-checked: tbd
+ * @prop --bal-radio-button-border-color-disabled: tbd
+ * @prop --bal-radio-button-border-color-invalid: tbd
+ * @prop --bal-radio-symbol-size: tbd
+ * @prop --bal-radio-symbol-width: tbd
+ * @prop --bal-radio-symbol-height: tbd
+ * @prop --bal-radio-symbol-left: tbd
+ * @prop --bal-radio-symbol-margin-top: tbd
+ * @prop --bal-radio-label-min-height: tbd
+ */
+
+:root
+  --bal-radio-symbol-size: 1.5rem
+  --bal-radio-symbol-width: calc(0.5rem - 1px)
+  --bal-radio-symbol-height: calc(0.875rem - 1px)
+  --bal-radio-symbol-left: calc(0.5rem + 1px)
+  --bal-radio-symbol-margin-top: 0.25rem
+  --bal-radio-label-min-height: 1.5rem
+  //
+  // background colors
+  --bal-radio-select-button-background-hover: var(--bal-color-grey-2)
+  --bal-radio-select-button-background-active: var(--bal-color-grey-2)
+  --bal-radio-select-button-background-checked: var(--bal-color-primary)
+  --bal-radio-select-button-background-checked-hover: var(--bal-color-light-blue-5)
+  --bal-radio-select-button-background-checked-active: var(--bal-color-primary-6)
+  --bal-radio-select-button-background-invalid: var(--bal-color-danger-1)
+  --bal-radio-select-button-background-invalid-hover: var(--bal-color-danger-1)
+  --bal-radio-select-button-background-invalid-active: var(--bal-color-danger-1)
+  --bal-radio-select-button-background-invalid-checked: var(--bal-color-border-danger)
+  --bal-radio-select-button-background-invalid-checked-hover: var(--bal-color-danger-5)
+  --bal-radio-select-button-background-invalid-checked-active: var(--bal-color-danger-6)
+  --bal-radio-select-button-background-disabled-hover-active: var(--bal-color-grey-2)
+  --bal-radio-select-button-background-disabled-checked-hover-active: var(--bal-color-border-grey-dark)
+
+
+  --bal-radio-button-background: transparent
+  --bal-radio-button-background-checked-green: var(--bal-color-green-1)
+  --bal-radio-button-background-checked-purple: var(--bal-color-purple-1)
+  --bal-radio-button-background-checked-red: var(--bal-color-red-1)
+  --bal-radio-button-background-checked-yellow: var(--bal-color-yellow-1)
+  --bal-radio-button-background-disabled: var(--bal-color-grey-1)
+  --bal-radio-button-background-hover: var(--bal-color-grey-1)
+  //
+  // border colors
+  --bal-radio-select-button-border-color: var(--bal-color-primary)
+  --bal-radio-select-button-border-color-hover: var(--bal-color-light-blue-5)
+  --bal-radio-select-button-border-color-active: var(--bal-color-primary-6)
+  --bal-radio-select-button-border-color-invalid: var(--bal-color-border-danger)
+  --bal-radio-select-button-border-color-invalid-hover: var(--bal-color-danger-5)
+  --bal-radio-select-button-border-color-invalid-active: var(--bal-color-danger-6)
+  --bal-radio-select-button-border-color-invalid-checked: var(--bal-color-border-danger)
+  --bal-radio-select-button-border-color-invalid-checked-hover: var(--bal-color-danger-5)
+  --bal-radio-select-button-border-color-invalid-checked-active: var(--bal-color-danger-6)
+  --bal-radio-select-button-border-color-disabled-hover-active: var(--bal-color-border-grey-dark)
+  --bal-radio-select-button-border-color-disabled-checked-hover-active: var(--bal-color-border-grey-dark)
+
+  --bal-radio-button-border-color-hover: var(--bal-color-border-primary-hovered)
+  --bal-radio-button-border-color-active: var(--bal-color-border-primary-pressed)
+  --bal-radio-button-border-color-invalid-hover: var(--bal-color-border-danger-hovered)
+  --bal-radio-button-border-color-invalid-active: var(--bal-color-border-danger-pressed)
+  --bal-radio-button-border-color: var(--bal-color-border)
+  --bal-radio-button-border-color-checked: var(--bal-color-border-primary)
+  --bal-radio-button-border-color-disabled: var(--bal-color-border-grey-dark)
+  --bal-radio-button-border-color-invalid: var(--bal-color-border-danger)
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b499fa145a..8364d56853 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -67,4 +67,4 @@
     "node_modules",
     "tmp"
   ]
-}
+}
\ No newline at end of file