diff --git a/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue b/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue
index bc954f117b..61c10ed9ca 100644
--- a/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue
+++ b/packages/kotti-ui/source/kotti-field-radio-group/KtFieldRadioGroup.vue
@@ -16,11 +16,17 @@
 							}"
 							:data-test="optionDataTest(option)"
 						>
+							<input
+								v-bind="inputProps(option, index)"
+								@change="onChange(option.value)"
+							/>
 							<div
 								class="kt-field-radio-group__radio"
 								:class="{
 									'kt-field-radio-group__radio--checked':
 										field.currentValue === option.value,
+									'kt-field-radio-group__radio--is-disabled':
+										field.isDisabled || Boolean(option.isDisabled),
 								}"
 							>
 								<div class="kt-field-radio-group__radio-inside" />
@@ -28,10 +34,6 @@
 							<slot name="header" :option="option">
 								<div v-text="option.label" />
 							</slot>
-							<input
-								v-bind="inputProps(option, index)"
-								@change="onChange(option.value)"
-							/>
 						</label>
 						<FieldHelpText
 							v-if="option.tooltip"
@@ -191,7 +193,17 @@ export default defineComponent({
 	}
 
 	&__input {
-		display: none;
+		width: 0;
+		height: 0;
+
+		&:focus + .kt-field-radio-group__radio {
+			outline: 1px solid var(--primary-50);
+			outline-offset: 3px;
+		}
+
+		&:focus:not(:focus-visible) + .kt-field-radio-group__radio {
+			outline: none;
+		}
 	}
 
 	&__radio {
@@ -212,10 +224,32 @@ export default defineComponent({
 		//  > (-var(--radio-size) * 0.5) Put it up half the height of the radio height
 		transform: translateY(calc(0.75em - var(--radio-size) * 0.5));
 
+		&:hover {
+			border-color: var(--interactive-01-hover);
+		}
+
+		&:active {
+			border-color: var(--interactive-01-active);
+		}
+
 		&--checked {
 			background-color: var(--interactive-01);
 			border-color: var(--interactive-01);
 			box-shadow: var(--shadow-base);
+
+			&:hover {
+				background-color: var(--interactive-01-hover);
+				border-color: var(--interactive-01-hover);
+			}
+
+			&:active {
+				background-color: var(--interactive-01-active);
+				border-color: var(--interactive-01-active);
+			}
+		}
+
+		&--is-disabled {
+			pointer-events: none;
 		}
 	}
 
diff --git a/packages/kotti-ui/source/kotti-style/tokens.css b/packages/kotti-ui/source/kotti-style/tokens.css
index 10d90363eb..94adadfcd5 100644
--- a/packages/kotti-ui/source/kotti-style/tokens.css
+++ b/packages/kotti-ui/source/kotti-style/tokens.css
@@ -73,6 +73,7 @@
 	--text-05: var(--gray-30);
 	--interactive-01: var(--primary-60);
 	--interactive-01-hover: var(--primary-70);
+	--interactive-01-active: var(--primary-90);
 	--interactive-02: var(--gray-10);
 	--interactive-02-hover: var(--primary-10);
 	--interactive-03: var(--primary-50);
diff --git a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleBox.vue b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleBox.vue
index c6192a0693..d9aa8892c9 100644
--- a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleBox.vue
+++ b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleBox.vue
@@ -1,21 +1,29 @@
 <template>
 	<div class="kt-field-toggle-box">
-		<div class="kt-field-toggle-box__inner">
-			<svg
+		<svg
+			fill="none"
+			height="16"
+			viewBox="0 0 16 16"
+			width="16"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<rect
+				class="kt-field-toggle-box__empty"
+				height="15"
+				rx="0.5"
+				width="15"
+				x="0.5"
+				y="0.5"
+			/>
+			<path
+				class="kt-field-toggle-box__indeterminate"
+				d="M15 0H1C0.45 0 0 0.45 0 1V15C0 15.55 0.45 16 1 16H15C15.55 16 16 15.55 16 15V1C16 0.45 15.55 0 15 0ZM12 9H4C3.45 9 3 8.55 3 8C3 7.45 3.45 7 4 7H12C12.55 7 13 7.45 13 8C13 8.55 12.55 9 12 9Z"
+			/>
+			<path
 				class="kt-field-toggle-box__check"
-				fill="none"
-				height="8"
-				viewBox="0 0 9 8"
-				width="9"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M1 3.92761L2.92242 6L8 1"
-					stroke-linecap="round"
-					stroke-width="2"
-				/>
-			</svg>
-		</div>
+				d="M15 0H1C0.45 0 0 0.45 0 1V15C0 15.55 0.45 16 1 16H15C15.55 16 16 15.55 16 15V1C16 0.45 15.55 0 15 0ZM12.71 5.71L6.5 11.92L3.29 8.71C2.9 8.32 2.9 7.69 3.29 7.3C3.68 6.91 4.31 6.91 4.7 7.3L6.49 9.09L11.28 4.3C11.67 3.91 12.3 3.91 12.69 4.3C13.08 4.69 13.08 5.32 12.69 5.71H12.71Z"
+			/>
+		</svg>
 	</div>
 </template>
 
@@ -30,20 +38,14 @@ export default defineComponent({
 <style lang="scss">
 @import '../../kotti-field/mixins';
 
-@mixin toggle-colors($border-color, $shadow-main, $background-color) {
-	border-color: $border-color;
-	box-shadow:
-		var(--shadow-base),
-		0 0 0 1px $shadow-main inset;
-
-	.kt-field-toggle-box__check {
-		path {
-			stroke: var(--interactive-02);
-		}
+@mixin toggle-colors($fill-color) {
+	.kt-field-toggle-box__empty {
+		stroke: $fill-color;
 	}
 
-	.kt-field-toggle-box__inner {
-		background-color: $background-color;
+	.kt-field-toggle-box__check,
+	.kt-field-toggle-box__indeterminate {
+		fill: $fill-color;
 	}
 }
 
@@ -55,11 +57,11 @@ export default defineComponent({
 	width: 0.8rem;
 	height: 0.8rem;
 	background: var(--ui-background);
-	border: 1px solid var(--ui-02);
-	border-radius: var(--toggle-border-radius);
+	border: 1px solid transparent;
 	transition: border-color ease-in-out var(--transition-short);
 
-	&__check {
+	&__check,
+	&__indetermiate {
 		transition: all ease-in-out var(--transition-short);
 	}
 
@@ -72,66 +74,76 @@ export default defineComponent({
 		background-color: transparent;
 		transition: all ease-in-out var(--transition-short);
 	}
+
+	&:focus {
+		background-color: red;
+	}
 }
 
 .kt-field-toggle-inner {
-	&--is-indeterminate {
+	&--is-off {
 		.kt-field-toggle-box {
-			@include toggle-colors(
-				var(--interactive-01),
-				var(--interactive-01),
-				var(--interactive-04)
-			);
+			@include toggle-colors(var(--text-05));
 
 			&:hover {
-				@include toggle-colors(
-					var(--interactive-01-hover),
-					var(--interactive-01),
-					var(--interactive-01-hover)
-				);
+				@include toggle-colors(var(--interactive-01-hover));
+			}
+
+			&:active {
+				@include toggle-colors(var(--interactive-01-active));
 			}
 
 			&__check {
 				opacity: 0;
 				transform: scale(0);
 			}
+
+			&__indeterminate {
+				display: none;
+			}
 		}
 	}
 
-	&--is-off {
+	&--is-on {
 		.kt-field-toggle-box {
+			@include toggle-colors(var(--interactive-03));
+
 			&:hover {
-				@include toggle-colors(
-					var(--interactive-01-hover),
-					var(--interactive-01),
-					transparent
-				);
+				@include toggle-colors(var(--interactive-01-hover));
+			}
+
+			&:active {
+				@include toggle-colors(var(--interactive-01-active));
 			}
 
 			&__check {
-				opacity: 0;
-				transform: scale(0);
+				opacity: 1;
+				transform: scale(1);
+			}
+
+			&__indeterminate {
+				display: none;
 			}
 		}
 	}
 
-	&--is-on {
+	&--is-indeterminate {
 		.kt-field-toggle-box {
-			@include toggle-colors(
-				var(--interactive-01),
-				var(--interactive-01),
-				var(--interactive-03)
-			);
+			@include toggle-colors(var(--interactive-03));
 
 			&:hover {
-				@include toggle-colors(
-					var(--interactive-01-hover),
-					var(--interactive-01),
-					var(--interactive-01-hover)
-				);
+				@include toggle-colors(var(--interactive-01-hover));
+			}
+
+			&:active {
+				@include toggle-colors(var(--interactive-01-active));
 			}
 
 			&__check {
+				display: none;
+			}
+
+			&__indeterminate {
 				opacity: 1;
 				transform: scale(1);
 			}
@@ -145,36 +157,20 @@ export default defineComponent({
 			.kt-field-toggle-inner {
 				&--is-indeterminate:not(.kt-field-toggle-inner--is-disabled) {
 					.kt-field-toggle-box {
-						@include toggle-colors(
-							var(--support-#{$type}),
-							var(--support-#{$type}-light),
-							var(--support-#{$type}-light)
-						);
+						@include toggle-colors(var(--support-#{$type}-light));
 
 						&:hover {
-							@include toggle-colors(
-								var(--support-#{$type}),
-								var(--support-#{$type}-light),
-								var(--support-#{$type}-dark)
-							);
+							@include toggle-colors(var(--support-#{$type}-dark));
 						}
 					}
 				}
 
 				&--is-off:not(.kt-field-toggle-inner--is-disabled) {
 					.kt-field-toggle-box {
-						@include toggle-colors(
-							var(--support-#{$type}),
-							var(--support-#{$type}-light),
-							transparent
-						);
+						@include toggle-colors(transparent);
 
 						&:hover {
-							@include toggle-colors(
-								var(--support-#{$type}-dark),
-								var(--support-#{$type}-light),
-								transparent
-							);
+							@include toggle-colors(transparent);
 						}
 					}
 				}
@@ -182,18 +178,10 @@ export default defineComponent({
 				&--is-on:not(.kt-field-toggle-inner--is-disabled) {
 					.kt-field-toggle-box {
 						/* stylelint-disable */
-						@include toggle-colors(
-							var(--support-#{$type}),
-							var(--support-#{$type}-light),
-							var(--support-#{$type})
-						);
+						@include toggle-colors(var(--support-#{$type}));
 
 						&:hover {
-							@include toggle-colors(
-								var(--support-#{$type}),
-								var(--support-#{$type}-light),
-								var(--support-#{$type}-dark)
-							);
+							@include toggle-colors(var(--support-#{$type}-dark));
 						}
 					}
 				}
@@ -206,15 +194,17 @@ export default defineComponent({
 .kt-field-toggle-inner--is-disabled {
 	&.kt-field-toggle-inner {
 		&--is-indeterminate .kt-field-toggle-box {
-			@include toggle-colors(var(--ui-01), var(--ui-02), var(--ui-02));
+			@include toggle-colors(var(--text-05));
 		}
 
 		&--is-off .kt-field-toggle-box {
-			@include toggle-colors(var(--ui-02), var(--ui-01), transparent);
+			@include toggle-colors(var(--text-05));
+
+			background-color: var(--ui-01);
 		}
 
 		&--is-on .kt-field-toggle-box {
-			@include toggle-colors(var(--ui-02), var(--ui-01), var(--ui-02));
+			@include toggle-colors(var(--text-05));
 		}
 	}
 }
diff --git a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleInner.vue b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleInner.vue
index 2cf67e4e98..d303b72169 100644
--- a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleInner.vue
+++ b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleInner.vue
@@ -4,14 +4,15 @@
 		class="kt-field-toggle-inner"
 		:class="toggleClasses"
 	>
-		<component :is="svgComponent.is" :class="svgComponent.class" />
-		<slot name="default" />
 		<input
 			v-bind="inputProps"
 			:checked="value === true"
+			:tabindex="isDisabled ? -1 : undefined"
 			type="checkbox"
 			@change="onInput"
 		/>
+		<component :is="svgComponent.is" :class="svgComponent.class" />
+		<slot name="default" />
 	</component>
 </template>
 
@@ -72,7 +73,7 @@ export default defineComponent({
 
 <style lang="scss">
 :root {
-	--toggle-border-radius: 0.1rem;
+	--toggle-border-radius: 1px;
 }
 
 .kt-field-toggle-inner {
@@ -81,7 +82,26 @@ export default defineComponent({
 	cursor: pointer;
 
 	input {
-		display: none;
+		width: 0;
+		height: 0;
+
+		&:focus + .kt-field-toggle-inner__svg--is-box {
+			outline: 1px solid var(--primary-50);
+			outline-offset: 3px;
+		}
+
+		&:focus:not(:focus-visible) + .kt-field-toggle-inner__svg--is-box {
+			outline: none;
+		}
+
+		&:focus + .kt-field-toggle-inner__svg--is-switch {
+			outline: 1px solid var(--primary-50);
+			outline-offset: 1px;
+		}
+
+		&:focus:not(:focus-visible) + .kt-field-toggle-inner__svg--is-switch {
+			outline: none;
+		}
 	}
 
 	&--is-disabled {
@@ -89,8 +109,8 @@ export default defineComponent({
 		cursor: not-allowed;
 	}
 
-	> *:not(:first-child) {
-		margin-left: 0.3rem;
+	&__svg {
+		margin-right: var(--unit-2);
 	}
 }
 </style>
diff --git a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleSwitch.vue b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleSwitch.vue
index 2dd72cf02e..cc8a332a28 100644
--- a/packages/kotti-ui/source/shared-components/toggle-inner/ToggleSwitch.vue
+++ b/packages/kotti-ui/source/shared-components/toggle-inner/ToggleSwitch.vue
@@ -21,11 +21,12 @@ $inner-gap: ($outer-size - $inner-size) * 0.5;
 $track-width: $inner-size * 2.25;
 
 @mixin switch-colors($outer-color, $inner-color) {
-	/* background-color: $outer-color; */
-	box-shadow: 0 0 1px $outer-color;
+	.kt-field-toggle-switch {
+		background-color: $outer-color;
 
-	.kt-field-toggle-switch__inner {
-		background-color: $inner-color;
+		&__inner {
+			background-color: $inner-color;
+		}
 	}
 }
 
@@ -45,23 +46,74 @@ $track-width: $inner-size * 2.25;
 }
 
 .kt-field-toggle-inner {
-	&--is-disabled.kt-field-toggle-inner .kt-field-toggle-switch__inner {
-		background-color: var(--ui-01);
+	&--is-indeterminate {
+		@include switch-colors(var(--interactive-01), var(--interactive-04));
+
+		.kt-field-toggle-switch__inner {
+			width: $track-width;
+		}
+
+		&:hover {
+			@include switch-colors(
+				var(--interactive-01-hover),
+				var(--interactive-01-hover)
+			);
+		}
+
+		&:active {
+			@include switch-colors(
+				var(--interactive-01-active),
+				var(--interactive-01-active)
+			);
+		}
 	}
 
-	&--is-indeterminate .kt-field-toggle-switch__inner {
-		width: $track-width;
-		background-color: var(--gray-30);
+	&--is-off {
+		@include switch-colors(var(--ui-02), var(--white));
+
+		.kt-field-toggle-switch__inner {
+			margin-left: 0;
+		}
+
+		&:hover {
+			@include switch-colors(var(--ui-03), var(--white));
+		}
+
+		&:active {
+			@include switch-colors(var(--ui-04), var(--white));
+		}
 	}
 
-	&--is-off .kt-field-toggle-switch__inner {
-		margin-left: 0;
-		background-color: var(--ui-03);
+	&--is-on {
+		@include switch-colors(var(--interactive-03), var(--white));
+
+		.kt-field-toggle-switch__inner {
+			margin-left: #{$track-width - $inner-size};
+		}
+
+		&:hover {
+			@include switch-colors(var(--interactive-01-hover), var(--white));
+		}
+
+		&:active {
+			@include switch-colors(var(--interactive-01-active), var(--white));
+		}
 	}
+}
+
+.kt-field-toggle-inner--is-disabled {
+	&.kt-field-toggle-inner {
+		&--is-indeterminate {
+			@include switch-colors(var(--text-05), var(--ui-02));
+		}
 
-	&--is-on .kt-field-toggle-switch__inner {
-		margin-left: #{$track-width - $inner-size};
-		background-color: var(--interactive-03);
+		&--is-off {
+			@include switch-colors(var(--text-05), var(--ui-01));
+		}
+
+		&--is-on {
+			@include switch-colors(var(--text-05), var(--ui-01));
+		}
 	}
 }
 
diff --git a/packages/kotti-ui/tokens/colors.js b/packages/kotti-ui/tokens/colors.js
index 182805f58e..a91498a485 100644
--- a/packages/kotti-ui/tokens/colors.js
+++ b/packages/kotti-ui/tokens/colors.js
@@ -129,6 +129,11 @@ export const tokens = [
 		description: 'Hover for Interactive-01',
 		reference: 'primary-70',
 	},
+	{
+		name: 'interactive-01-active',
+		description: 'Active for Interactive-01',
+		reference: 'primary-90',
+	},
 	{
 		name: 'interactive-02',
 		description: 'Secondary interactive color\nSecondary button',