diff --git a/packages/components/src/components/a11y.scss b/packages/components/src/components/a11y.scss
index 458f08f302..19b3a7b078 100644
--- a/packages/components/src/components/a11y.scss
+++ b/packages/components/src/components/a11y.scss
@@ -1,3 +1,5 @@
+@import '@shared/mixins';
+
 /*
  * This file contains all rules for accessibility.
  */
@@ -47,8 +49,7 @@
 	/* select, */
 	/* textarea, */
 	[role='button'],
-	button:not([role='link']),
-	.kol-input .input {
+	button:not([role='link']) {
 		min-height: var(--a11y-min-size);
 		min-width: var(--a11y-min-size);
 	}
diff --git a/packages/components/src/components/abbr/style.scss b/packages/components/src/components/abbr/style.scss
index 97a26f056d..98368bb263 100644
--- a/packages/components/src/components/abbr/style.scss
+++ b/packages/components/src/components/abbr/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {
diff --git a/packages/components/src/components/accordion/style.scss b/packages/components/src/components/accordion/style.scss
index 20ab484764..119f9a5162 100644
--- a/packages/components/src/components/accordion/style.scss
+++ b/packages/components/src/components/accordion/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 
diff --git a/packages/components/src/components/alert/style.scss b/packages/components/src/components/alert/style.scss
index 9b4c78304d..7b766521a6 100644
--- a/packages/components/src/components/alert/style.scss
+++ b/packages/components/src/components/alert/style.scss
@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../@shared/kol-alert-mixin';
+
+@include kol-alert;
 
 @layer kol-component {
 	.kol-alert {
 		font-size: rem(16);
 	}
 }
-
-@include kol-alert-styles;
diff --git a/packages/components/src/components/avatar/style.scss b/packages/components/src/components/avatar/style.scss
index a03bfa8098..3ad65cd7b5 100644
--- a/packages/components/src/components/avatar/style.scss
+++ b/packages/components/src/components/avatar/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 
 @layer kol-component {
diff --git a/packages/components/src/components/badge/style.scss b/packages/components/src/components/badge/style.scss
index 21ce1fd1c8..a9fd1fbf52 100644
--- a/packages/components/src/components/badge/style.scss
+++ b/packages/components/src/components/badge/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {
diff --git a/packages/components/src/components/breadcrumb/style.scss b/packages/components/src/components/breadcrumb/style.scss
index 6e080d637b..d4f4d3fd2a 100644
--- a/packages/components/src/components/breadcrumb/style.scss
+++ b/packages/components/src/components/breadcrumb/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-breadcrumb {
diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss
index 9a8e01b7c8..66eea306b6 100644
--- a/packages/components/src/components/button-link/style.scss
+++ b/packages/components/src/components/button-link/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-link-mixin';
 
 @include kol-link-styles('kol-button');
diff --git a/packages/components/src/components/button/style.scss b/packages/components/src/components/button/style.scss
index 69a9214db8..c75ce6606e 100644
--- a/packages/components/src/components/button/style.scss
+++ b/packages/components/src/components/button/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-button-mixin';
 
 @include kol-button-styles('kol-button');
diff --git a/packages/components/src/components/card/style.scss b/packages/components/src/components/card/style.scss
index 64be42d9e9..2a401036aa 100644
--- a/packages/components/src/components/card/style.scss
+++ b/packages/components/src/components/card/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {
diff --git a/packages/components/src/components/combobox/style.scss b/packages/components/src/components/combobox/style.scss
index 4f5b30d3df..03d7fbc79a 100644
--- a/packages/components/src/components/combobox/style.scss
+++ b/packages/components/src/components/combobox/style.scss
@@ -1,6 +1,7 @@
+@import '../../styles/global';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../host-display-block';
+@import '../tooltip/style';
 
 @layer kol-component {
 	:host {
@@ -28,6 +29,10 @@
 
 		&__input {
 			flex-grow: 1;
+
+			&:focus {
+				outline: none;
+			}
 		}
 
 		&__icon {
@@ -59,4 +64,8 @@
 			}
 		}
 	}
+
+	.kol-input {
+		display: grid;
+	}
 }
diff --git a/packages/components/src/components/details/style.scss b/packages/components/src/components/details/style.scss
index ca76a757a0..2d4be8bf0c 100644
--- a/packages/components/src/components/details/style.scss
+++ b/packages/components/src/components/details/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../../functional-components/Collapsible/collapsible';
 
diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
index 0d76e08942..d5935d8370 100644
--- a/packages/components/src/components/drawer/style.scss
+++ b/packages/components/src/components/drawer/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-drawer {
diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss
index c88ea78593..5593860642 100644
--- a/packages/components/src/components/form/style.scss
+++ b/packages/components/src/components/form/style.scss
@@ -1,11 +1,13 @@
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../../styles/global';
+@import '../host-display-block';
 @import '../@shared/kol-link-mixin';
+@import '../../styles/kol-alert-mixin';
 
 @layer kol-component {
 	@include kol-link-styles('kol-link');
-	@include kol-alert-styles;
+	@include kol-alert;
+
 	.kol-form {
 		font-size: rem(16);
 	}
diff --git a/packages/components/src/components/heading/style.scss b/packages/components/src/components/heading/style.scss
index 148f579055..e0f63d3e40 100644
--- a/packages/components/src/components/heading/style.scss
+++ b/packages/components/src/components/heading/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-headline {
diff --git a/packages/components/src/components/image/style.scss b/packages/components/src/components/image/style.scss
index 0a879c62a8..e0ec8f5377 100644
--- a/packages/components/src/components/image/style.scss
+++ b/packages/components/src/components/image/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-image {
diff --git a/packages/components/src/components/input-checkbox/button.scss b/packages/components/src/components/input-checkbox/button.scss
deleted file mode 100644
index 65f8eabb4b..0000000000
--- a/packages/components/src/components/input-checkbox/button.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@layer kol-component {
-	.button {
-		display: grid;
-		grid-template-columns: var(--a11y-min-size) auto;
-		grid-template-areas: 'error error' 'input label' 'hint hint';
-	}
-
-	.button[data-label-align='left']:not(.hide-label) {
-		grid-template-columns: auto var(--a11y-min-size);
-		grid-template-areas: 'error error' 'label input' 'hint hint';
-	}
-
-	.button:focus-within {
-		/* override global `[tabindex]:focus` style */
-		cursor: inherit;
-		outline-color: black;
-		outline-style: solid;
-	}
-
-	.button > .error {
-		grid-area: error;
-	}
-
-	.button > label {
-		grid-area: label;
-	}
-
-	.button > .input {
-		grid-area: input;
-	}
-
-	.button > .hint {
-		grid-area: hint;
-	}
-
-	.button .icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: var(--a11y-min-size);
-		height: var(--a11y-min-size);
-	}
-}
diff --git a/packages/components/src/components/input-checkbox/checkbox.scss b/packages/components/src/components/input-checkbox/checkbox.scss
deleted file mode 100644
index ba8104f805..0000000000
--- a/packages/components/src/components/input-checkbox/checkbox.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@layer kol-component {
-	.default {
-		& .checkbox-container {
-			align-items: center;
-			display: flex;
-			height: var(--a11y-min-size);
-			justify-content: center;
-			position: relative;
-			width: var(--a11y-min-size);
-		}
-
-		& .icon {
-			display: block;
-			inset: auto;
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-		}
-
-		&:not(.checked):not(.indeterminate) .icon::part(icon) {
-			display: none;
-		}
-
-		& .checkbox-input-element {
-			width: rem(22);
-			height: rem(22);
-		}
-	}
-}
diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss
deleted file mode 100644
index d5dfc31b9c..0000000000
--- a/packages/components/src/components/input-checkbox/common.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import '../@shared/mixins';
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	label {
-		cursor: pointer;
-	}
-
-	.kol-input {
-		align-items: center;
-		display: grid;
-		justify-items: left;
-	}
-
-	.kol-input.default,
-	.kol-input.switch {
-		grid-template-areas: 'input label';
-		grid-template-columns: auto 1fr;
-	}
-
-	.kol-input.default[data-label-align='left']:not(.hide-label),
-	.kol-input.switch[data-label-align='left']:not(.hide-label) {
-		grid-template-areas: 'label input';
-		grid-template-columns: 1fr auto;
-	}
-
-	.kol-input .input {
-		grid-area: input;
-		align-items: center;
-		display: grid;
-	}
-
-	.kol-input .input div {
-		display: inline-flex;
-	}
-
-	.kol-input .input input {
-		margin: 0;
-	}
-
-	.kol-input label {
-		grid-area: label;
-	}
-
-	.kol-input .hint,
-	.kol-input.error > .kol-alert {
-		grid-column: span 2;
-	}
-
-	.kol-input .kol-alert.error {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-	}
-
-	input {
-		border-style: solid;
-		border-width: rem(2);
-		line-height: 1.5;
-	}
-
-	input[type='checkbox'] {
-		appearance: none;
-		background-color: #fff;
-		cursor: pointer;
-		transition: 0.5s;
-	}
-
-	input[type='checkbox']:before {
-		content: '';
-		cursor: pointer;
-	}
-
-	input[type='checkbox']:disabled:before {
-		cursor: not-allowed;
-	}
-
-	.kol-input.required .tooltip-content .kol-span__label::after {
-		content: '*';
-	}
-}
diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
index f0b3baef38..a96429d08f 100644
--- a/packages/components/src/components/input-checkbox/shadow.tsx
+++ b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -29,8 +29,8 @@ import { nonce } from '../../utils/dev.utils';
 import { InputCheckboxController } from './controller';
 
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
-import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
-import KolIconFc from '../../functional-components/Icon';
+import KolFieldControlStateWrapperFc, { type FieldControlStateWrapperProps } from '../../functional-component-wrappers/FieldControlStateWrapper';
+import KolCheckboxStateWrapperFc, { type CheckboxStateWrapperProps } from '../../functional-component-wrappers/CheckboxStateWrapper';
 
 /**
  * @slot expert - Checkbox description.
@@ -71,40 +71,52 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	private getFormFieldProps(): FormFieldStateWrapperProps {
 		return {
 			state: this.state,
-			class: clsx('kol-input-checkbox', 'checkbox', this.state._variant, {
-				'hide-label': !!this.state._hideLabel,
-				checked: this.state._checked,
-				indeterminate: this.state._indeterminate,
+			class: clsx('kol-input-checkbox', {
+				[`kol-input-checkbox--checked`]: this.state._checked,
+				[`kol-input-checkbox--indeterminate`]: this.state._indeterminate,
+				[`kol-input-checkbox--variant-${this.state._variant || 'default'}`]: true,
+				[`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,
 			}),
 			tooltipAlign: this._tooltipAlign,
-			'data-label-align': this.state._labelAlign || 'right',
 			'data-role': this.state._variant === 'button' ? 'button' : undefined,
 			alert: this.showAsAlert(),
-			reverseLabelInput: this.state._labelAlign === 'right',
+			renderNoTooltip: true,
 		};
 	}
 
-	private getInputProps(): InputStateWrapperProps {
+	private getFieldControlProps(): FieldControlStateWrapperProps {
 		return {
-			class: clsx('checkbox-input-element', {
-				'visually-hidden': this.state._variant === 'button',
+			class: clsx('kol-input-checkbox__field-control', {
+				[`kol-input-checkbox__field-control--checked`]: this.state._checked,
+				[`kol-input-checkbox__field-control--indeterminate`]: this.state._indeterminate,
+				[`kol-input-checkbox__field-control--variant-${this.state._variant || 'default'}`]: true,
 			}),
-			ref: this.catchRef,
-			type: 'checkbox',
-			slot: 'input',
 			state: this.state,
-			...this.controller.onFacade,
-			onInput: this.onInput,
-			onChange: this.onChange,
-			onFocus: (event: Event) => {
-				this.controller.onFacade.onFocus(event);
-				this.inputHasFocus = true;
-			},
-			onBlur: (event: Event) => {
-				this.controller.onFacade.onBlur(event);
-				this.inputHasFocus = false;
+		};
+	}
+
+	private getInputProps(): CheckboxStateWrapperProps {
+		return {
+			state: this.state,
+			icon: this.getIcon(),
+			inputProps: {
+				class: clsx({
+					'visually-hidden': this.state._variant === 'button',
+				}),
+				ref: this.catchRef,
+				...this.controller.onFacade,
+				onInput: this.onInput,
+				onChange: this.onChange,
+				onFocus: (event: Event) => {
+					this.controller.onFacade.onFocus(event);
+					this.inputHasFocus = true;
+				},
+				onBlur: (event: Event) => {
+					this.controller.onFacade.onBlur(event);
+					this.inputHasFocus = false;
+				},
+				onClick: undefined, // onClick is not needed since onChange already triggers the correct event
 			},
-			onClick: undefined, // onClick is not needed since onChange already triggers the correct event
 		};
 	}
 
@@ -114,23 +126,12 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 		return this.state._icons.unchecked;
 	}
 
-	private getIconProps() {
-		return {
-			class: 'icon',
-			icons: this.getIcon(),
-			label: '',
-		};
-	}
-
 	public render(): JSX.Element {
 		return (
-			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
-				<div class="input">
-					<label class="checkbox-container">
-						<KolIconFc {...this.getIconProps()} />
-						<KolInputStateWrapperFc {...this.getInputProps()} />
-					</label>
-				</div>
+			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()} renderNoLabel>
+				<KolFieldControlStateWrapperFc {...this.getFieldControlProps()} renderNoHint>
+					<KolCheckboxStateWrapperFc {...this.getInputProps()} />
+				</KolFieldControlStateWrapperFc>
 			</KolFormFieldStateWrapperFc>
 		);
 	}
diff --git a/packages/components/src/components/input-checkbox/style.scss b/packages/components/src/components/input-checkbox/style.scss
index f1a32b3255..34c245bd9e 100644
--- a/packages/components/src/components/input-checkbox/style.scss
+++ b/packages/components/src/components/input-checkbox/style.scss
@@ -1,9 +1,151 @@
+@import '../../styles/global';
+@import '../../styles/kol-field-control-mixin';
+@import '../../styles/kol-form-field-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input';
-@import './common';
-@import './button';
-@import './checkbox';
-@import './switch';
-
-@include kol-alert-styles;
+@import '../host-display-block';
+@import '../tooltip/style';
+
+@include kol-form-field;
+@include kol-field-control;
+
+@layer kol-component {
+	$root: '.kol-checkbox';
+
+	.kol-form-field {
+		display: grid;
+	}
+
+	#{$root} {
+		position: relative;
+		display: flex;
+		align-items: center;
+
+		.kol-input {
+			font-size: rem(16);
+
+			appearance: none;
+			background-color: #fff;
+			cursor: pointer;
+			transition: 0.5s;
+
+			margin: 0;
+			border-style: solid;
+			border-width: rem(2);
+
+			&:before {
+				content: '';
+				cursor: pointer;
+			}
+
+			&:disabled:before {
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	/**
+	 * Variant: Checkbox
+	 */
+	#{$root}--variant-default {
+		height: var(--a11y-min-size);
+		justify-content: center;
+		position: relative;
+		width: var(--a11y-min-size);
+
+		.kol-icon {
+			display: flex;
+			inset: auto;
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+
+			&::part(icon) {
+				display: none;
+			}
+		}
+
+		.kol-input {
+			width: rem(22);
+			height: rem(22);
+		}
+
+		&#{$root}--checked,
+		&#{$root}--indeterminate {
+			.kol-icon::part(icon) {
+				display: block;
+			}
+		}
+	}
+
+	/**
+	 * Variant: Switch
+	 */
+	#{$root}--variant-switch {
+		position: relative;
+
+		.kol-input {
+			display: inline-block;
+			height: 1.7em;
+			min-width: 3.2em;
+			position: relative;
+			width: 3.2em;
+
+			&::before {
+				background-color: #000;
+				height: 1.2em;
+				left: calc(0.25em - rem(2));
+				top: calc(0.25em - rem(2));
+				position: absolute;
+				transition: 0.5s;
+				width: 1.2em;
+			}
+
+			&:checked::before {
+				transform: translateX(1.5em);
+			}
+
+			&:indeterminate::before {
+				transform: translateX(0.75em);
+			}
+		}
+
+		.kol-icon {
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 1.2em;
+			height: 1.2em;
+			position: absolute;
+			z-index: 1;
+			top: 50%;
+			left: rem(4);
+			transform: translate(0, -50%);
+			transition: 0.5s;
+			color: #000;
+		}
+
+		&#{$root}--checked .kol-icon {
+			transform: translate(1.5em, -50%);
+		}
+
+		&#{$root}--indeterminate .kol-icon {
+			transform: translate(0.75em, -50%);
+		}
+	}
+
+	/**
+	 * Variant: Button
+	 */
+	#{$root}--variant-button {
+		width: var(--a11y-min-size);
+
+		.kol-icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: var(--a11y-min-size);
+			height: var(--a11y-min-size);
+		}
+	}
+}
diff --git a/packages/components/src/components/input-checkbox/switch.scss b/packages/components/src/components/input-checkbox/switch.scss
deleted file mode 100644
index 3234e3ddd3..0000000000
--- a/packages/components/src/components/input-checkbox/switch.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@layer kol-component {
-	.switch .input {
-		position: relative;
-	}
-
-	.switch input[type='checkbox'] {
-		display: inline-block;
-		height: 1.7em;
-		min-width: 3.2em;
-		position: relative;
-		width: 3.2em;
-	}
-
-	.switch input[type='checkbox']::before {
-		background-color: #000;
-		height: 1.2em;
-		left: calc(0.25em - rem(2));
-		top: calc(0.25em - rem(2));
-		position: absolute;
-		transition: 0.5s;
-		width: 1.2em;
-	}
-
-	.switch input[type='checkbox']:checked::before {
-		transform: translateX(1.5em);
-	}
-
-	.switch input[type='checkbox']:indeterminate::before {
-		transform: translateX(0.75em);
-	}
-
-	.switch .icon {
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 1.2em;
-		height: 1.2em;
-		position: absolute;
-		z-index: 1;
-		top: 50%;
-		left: rem(4);
-		transform: translate(0, -50%);
-		transition: 0.5s;
-		color: #000;
-	}
-
-	.switch.checked .icon {
-		transform: translate(1.5em, -50%);
-	}
-
-	.switch.indeterminate .icon {
-		transform: translate(0.75em, -50%);
-	}
-}
diff --git a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
index 233c6839b8..b2915ddc73 100644
--- a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,20 +3,24 @@
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _accessKey="V" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -26,19 +30,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -48,19 +56,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _disabled=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default disabled kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--disabled kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -70,23 +82,27 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _hint="Hint" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
     </div>
   </template>
 </kol-input-checkbox>
@@ -95,19 +111,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -117,19 +137,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -139,19 +163,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -161,19 +189,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default hidden-error kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -183,19 +215,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -205,19 +241,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _readOnly=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -227,20 +267,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _shortKey="S" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -250,19 +294,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox touched" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--touched kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -272,19 +320,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -294,21 +346,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _accessKey="V" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -317,20 +373,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -339,20 +399,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _disabled=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox disabled kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--disabled kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--disabled visually-hidden" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -361,21 +425,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _hint="Hint" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -386,20 +454,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -408,20 +480,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -430,20 +506,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -452,20 +532,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox hidden-error kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -474,20 +558,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -496,20 +584,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _readOnly=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -518,21 +610,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _shortKey="S" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -541,20 +637,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox touched" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--touched kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--touched visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -563,20 +663,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -585,21 +689,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _accessKey="V" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -608,20 +716,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -630,20 +742,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _disabled=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox disabled kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--disabled kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -652,21 +768,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _hint="Hint" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -677,20 +797,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -699,20 +823,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -721,20 +849,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -743,20 +875,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox hidden-error kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -765,20 +901,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -787,20 +927,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _readOnly=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -809,21 +953,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _shortKey="S" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -832,20 +980,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _touched=true 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch touched" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--touched kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -854,20 +1006,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" 1`] = `
 <kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-close" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -876,20 +1032,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _accessKey="V" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -899,19 +1059,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -921,19 +1085,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _disabled=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default disabled kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--disabled kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -943,23 +1111,27 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _hint="Hint" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
     </div>
   </template>
 </kol-input-checkbox>
@@ -968,19 +1140,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -990,19 +1166,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1012,19 +1192,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1034,19 +1218,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default hidden-error kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1056,19 +1244,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1078,19 +1270,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _readOnly=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1100,20 +1296,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _shortKey="S" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1123,19 +1323,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox touched" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--touched kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1145,19 +1349,23 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="left" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-left kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-left kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -1167,21 +1375,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _accessKey="V" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1190,20 +1402,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1212,20 +1428,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _disabled=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default disabled kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--disabled kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1234,21 +1454,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _hint="Hint" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -1259,20 +1483,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1281,20 +1509,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1303,20 +1535,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1325,20 +1561,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default hidden-error kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1347,20 +1587,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1369,20 +1613,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _readOnly=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1391,21 +1639,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _shortKey="S" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1414,20 +1666,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox touched" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--touched kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1436,20 +1692,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked default kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1458,21 +1718,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _accessKey="V" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1481,20 +1745,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1503,20 +1771,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _disabled=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked disabled kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--disabled kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--disabled visually-hidden" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1525,21 +1797,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _hint="Hint" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -1550,20 +1826,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1572,20 +1852,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1594,20 +1878,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1616,20 +1904,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked hidden-error kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1638,20 +1930,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1660,20 +1956,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _readOnly=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1682,21 +1982,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _shortKey="S" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1705,20 +2009,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox touched" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--touched kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--touched visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1727,20 +2035,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="button checkbox checked kol-input kol-input-checkbox" data-label-align="right" data-role="button" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-button" data-role="button" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-button">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-button">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input visually-hidden" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1749,21 +2061,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _accessKey="V" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1772,20 +2088,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _alert=true 1`] = `
 <kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1794,20 +2114,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _disabled=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked disabled kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--disabled kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1816,21 +2140,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _hint="Hint" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -1841,20 +2169,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1863,20 +2195,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1885,20 +2221,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1907,20 +2247,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked hidden-error kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1929,20 +2273,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1951,20 +2299,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _readOnly=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1973,21 +2325,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _shortKey="S" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -1996,20 +2352,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _touched=true 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch touched" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--touched kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2018,20 +2378,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" 1`] = `
 <kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox checked kol-input kol-input-checkbox switch" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" checked="" class="checkbox-input-element" id="id-nonce" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--checked kol-input-checkbox--label-align-right kol-input-checkbox--variant-switch" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--checked kol-input-checkbox__field-control--variant-switch">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--checked kol-checkbox--variant-switch">
+              <kol-icon _icons="codicon codicon-check" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" checked="" class="kol-checkbox__input kol-input" id="id-nonce" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2040,21 +2404,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _accessKey="V" 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                V
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            V
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2063,20 +2431,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _alert=true 1`] = `
 <kol-input-checkbox _alert="" _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2085,20 +2457,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _disabled=true 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default disabled indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" disabled="" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--disabled kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--disabled kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--disabled" disabled="" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2107,21 +2483,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _hint="Hint" 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
-      <span class="hint" id="id-nonce-hint">
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </div>
@@ -2132,20 +2512,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2154,20 +2538,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2176,20 +2564,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2198,20 +2590,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-checkbox _hide-error="" _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default hidden-error indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2220,20 +2616,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2242,20 +2642,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _readOnly=true 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2264,21 +2668,25 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _shortKey="S" 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              Label
+              <span aria-hidden="true" class="access-key-hint">
+                S
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          Label
-          <span aria-hidden="true" class="access-key-hint">
-            S
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2287,20 +2695,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _touched=true 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox touched" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
+    <div class="kol-form-field kol-form-field--touched kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-field-control--touched kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--touched kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input kol-input--touched" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
       </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
     </div>
   </template>
 </kol-input-checkbox>
@@ -2309,20 +2721,24 @@ exports[`kol-input-checkbox should render with _label="Label" _name="field" _pla
 exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true 1`] = `
 <kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="checkbox default indeterminate kol-input kol-input-checkbox" data-label-align="right" role="presentation">
-      <div class="input">
-        <label class="checkbox-container">
-          <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
-          <input autocapitalize="off" autocorrect="off" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" slot="input" type="checkbox" value="true">
-        </label>
-      </div>
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
-          <span>
-            Label
-          </span>
-        </span>
-      </label>
+    <div class="kol-form-field kol-input-checkbox kol-input-checkbox--indeterminate kol-input-checkbox--label-align-right kol-input-checkbox--variant-default" role="presentation">
+      <div class="kol-form-field__input">
+        <div class="kol-field-control kol-field-control--label-align-right kol-input-checkbox__field-control kol-input-checkbox__field-control--indeterminate kol-input-checkbox__field-control--variant-default">
+          <div class="kol-field-control__input">
+            <label class="kol-checkbox kol-checkbox--indeterminate kol-checkbox--variant-default">
+              <kol-icon _icons="codicon codicon-remove" _label="" class="kol-checkbox__icon"></kol-icon>
+              <input autocapitalize="off" autocorrect="off" class="kol-checkbox__input kol-input" id="id-nonce" indeterminate="" name="field" type="checkbox" value="true">
+            </label>
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce" id="id-nonce-label">
+            <span class="kol-field-control__label-text">
+              <span>
+                Label
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
     </div>
   </template>
 </kol-input-checkbox>
diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
index e721463698..7e0c6f2508 100644
--- a/packages/components/src/components/input-color/shadow.tsx
+++ b/packages/components/src/components/input-color/shadow.tsx
@@ -76,7 +76,7 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	private getFormFieldProps(): FormFieldStateWrapperProps {
 		return {
 			state: this.state,
-			class: 'kol-input-color color',
+			class: 'kol-input-color',
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.inputRef?.focus(),
 			alert: this.showAsAlert(),
diff --git a/packages/components/src/components/input-color/style.scss b/packages/components/src/components/input-color/style.scss
index 0da74f93fc..0afb4a2557 100644
--- a/packages/components/src/components/input-color/style.scss
+++ b/packages/components/src/components/input-color/style.scss
@@ -1,15 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	div.input {
-		cursor: pointer;
-	}
-}
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
index 0b742da3f2..3f6cee9db0 100644
--- a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _accessKey="V" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _alert=true 1`] = `
 <kol-input-color _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _disabled=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color disabled kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _hint="Hint" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
-      </div>
     </div>
   </template>
 </kol-input-color>
@@ -83,21 +99,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-color _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color hidden-error kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _readOnly=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _shortKey="S" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,22 +302,26 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _accessKey="V" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -279,21 +331,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _alert=true 1`] = `
 <kol-input-color _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -303,21 +359,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _disabled=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color disabled kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -327,25 +387,29 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _hint="Hint" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
-      </div>
     </div>
   </template>
 </kol-input-color>
@@ -354,26 +418,30 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -384,25 +452,29 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -412,24 +484,28 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -440,21 +516,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-color _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color hidden-error kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -464,21 +544,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -488,21 +572,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _readOnly=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -512,22 +600,26 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _shortKey="S" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -537,24 +629,28 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -565,21 +661,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _touched=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -589,21 +689,25 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
-        <datalist id="id-nonce-list">
-          <option value="#F00"></option>
-          <option value="#0F0"></option>
-          <option value="#00F"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" slot="input" type="color" value="#FFF">
+            <datalist id="id-nonce-list">
+              <option value="#F00"></option>
+              <option value="#0F0"></option>
+              <option value="#00F"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -613,16 +717,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _touched=true 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -632,16 +740,20 @@ exports[`kol-input-color should render with _label="Label" _name="field" _placeh
 exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" 1`] = `
 <kol-input-color _placeholder="Hier steht ein Platzhaltertext" _value="#FFF">
   <template shadowrootmode="open">
-    <div class="color kol-input kol-input-color" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-color" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" slot="input" type="color" value="#FFF">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-date/style.scss b/packages/components/src/components/input-date/style.scss
index 3f1253804a..0afb4a2557 100644
--- a/packages/components/src/components/input-date/style.scss
+++ b/packages/components/src/components/input-date/style.scss
@@ -1,15 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	.kol-input-number {
-		display: block;
-	}
-}
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
index 9689ec7df4..538670d402 100644
--- a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _accessKey="V" 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _alert=true 1`] = `
 <kol-input-date _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _disabled=true 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date disabled has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-form-field--disabled kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _hint="Hint" 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
-      </div>
     </div>
   </template>
 </kol-input-date>
@@ -83,21 +99,25 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-date _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value hidden-error kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-form-field--hidden-error kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _readOnly=true 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-form-field--read-only kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" readonly="" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" max="9999-12-31" name="field" readonly="" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _shortKey="S" 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,16 +275,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _touched=true 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-form-field--touched kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -250,16 +298,20 @@ exports[`kol-input-date should render with _label="Label" _name="field" _placeho
 exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" 1`] = `
 <kol-input-date _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01">
   <template shadowrootmode="open">
-    <div class="date has-value kol-input kol-input-date" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="date has-value kol-form-field kol-input-date" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="9999-12-31" name="field" type="date" value="2025-01-01">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-email/style.scss b/packages/components/src/components/input-email/style.scss
index 08fff25ab9..0afb4a2557 100644
--- a/packages/components/src/components/input-email/style.scss
+++ b/packages/components/src/components/input-email/style.scss
@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-}
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
index 6e5858e61e..03d893b47f 100644
--- a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _accessKey="V" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _alert=true 1`] = `
 <kol-input-email _alert="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _disabled=true 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="disabled email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--disabled kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _hint="Hint" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-      </div>
     </div>
   </template>
 </kol-input-email>
@@ -83,21 +99,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-email _hide-error="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value hidden-error kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--hidden-error kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _readOnly=true 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--read-only kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _shortKey="S" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,22 +302,26 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _accessKey="V" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -279,21 +331,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _alert=true 1`] = `
 <kol-input-email _alert="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -303,21 +359,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _disabled=true 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="disabled email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--disabled kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -327,25 +387,29 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _hint="Hint" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
-      </div>
     </div>
   </template>
 </kol-input-email>
@@ -354,26 +418,30 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -384,25 +452,29 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -412,24 +484,28 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -440,21 +516,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-email _hide-error="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value hidden-error kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--hidden-error kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -464,21 +544,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -488,21 +572,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _readOnly=true 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--read-only kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -512,22 +600,26 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _shortKey="S" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -537,24 +629,28 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -565,21 +661,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _touched=true 1`] = `
 <kol-input-email _touched="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--touched kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -589,21 +689,25 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
-        <datalist id="id-nonce-list">
-          <option value="email1@example.com"></option>
-          <option value="email2@example.com"></option>
-          <option value="email3@example.com"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+            <datalist id="id-nonce-list">
+              <option value="email1@example.com"></option>
+              <option value="email2@example.com"></option>
+              <option value="email3@example.com"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -613,16 +717,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _touched=true 1`] = `
 <kol-input-email _touched="" _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-form-field--touched kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -632,16 +740,20 @@ exports[`kol-input-email should render with _label="Label" _name="field" _placeh
 exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" 1`] = `
 <kol-input-email _value="email@example.com">
   <template shadowrootmode="open">
-    <div class="email has-value kol-input kol-input-email" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="email has-value kol-form-field kol-input-email" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="email" value="email@example.com">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-file/style.scss b/packages/components/src/components/input-file/style.scss
index 7c062b20eb..99f1181b38 100644
--- a/packages/components/src/components/input-file/style.scss
+++ b/packages/components/src/components/input-file/style.scss
@@ -1,27 +1,17 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	label input[type='file']::-webkit-file-upload-button {
-		display: none;
-	}
-
-	label input[type='file']:before {
-		content: 'Datei auswählen';
-	}
-
-	label input[multiple]:before {
-		content: 'Dateien auswählen';
-	}
-
-	div.input {
-		cursor: pointer;
+	.kol-input {
+		padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
 	}
 }
diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
index 962d37c64a..1ed6e214f7 100644
--- a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _accessKey="V" 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _alert=true 1`] = `
 <kol-input-file _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _disabled=true 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="disabled file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-form-field--disabled kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _hint="Hint" 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
-      </div>
     </div>
   </template>
 </kol-input-file>
@@ -83,21 +99,25 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-file _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file hidden-error kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-form-field--hidden-error kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _readOnly=true 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _shortKey="S" 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,16 +302,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _touched=true 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-form-field--touched kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -273,16 +325,20 @@ exports[`kol-input-file should render with _label="Label" _name="field" _placeho
 exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" 1`] = `
 <kol-input-file _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="file kol-input kol-input-file" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="file kol-form-field kol-input-file" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" type="file">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" type="file">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-line.scss b/packages/components/src/components/input-line.scss
deleted file mode 100644
index 83456a0974..0000000000
--- a/packages/components/src/components/input-line.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import './input';
-
-@layer kol-component {
-	.kol-input {
-		display: grid;
-	}
-
-	.kol-input .input-slot {
-		flex-grow: 1;
-	}
-
-	input:not([type='checkbox'], [type='radio']),
-	select:not([multiple], [size]) {
-		height: 2.75em;
-	}
-
-	input:focus,
-	option:focus,
-	select:focus,
-	textarea:focus {
-		outline: 0;
-	}
-
-	.input {
-		display: flex;
-		align-items: center;
-	}
-
-	.input > .kol-icon {
-		display: grid;
-		height: var(--a11y-min-size);
-		place-items: center;
-	}
-
-	.kol-input.required .input-tooltip .kol-span__label::after {
-		content: '*';
-	}
-}
diff --git a/packages/components/src/components/input-number/style.scss b/packages/components/src/components/input-number/style.scss
index 08fff25ab9..0afb4a2557 100644
--- a/packages/components/src/components/input-number/style.scss
+++ b/packages/components/src/components/input-number/style.scss
@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-}
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
index 6486137ce3..16e6528470 100644
--- a/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _accessKey="V" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _alert=true 1`] = `
 <kol-input-number _alert="">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _disabled=true 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="disabled kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _hint="Hint" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-      </div>
     </div>
   </template>
 </kol-input-number>
@@ -83,21 +99,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-number _hide-error="">
   <template shadowrootmode="open">
-    <div class="hidden-error kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _readOnly=true 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--read-only kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _shortKey="S" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,22 +302,26 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _accessKey="V" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -279,21 +331,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _alert=true 1`] = `
 <kol-input-number _alert="">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -303,21 +359,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _disabled=true 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="disabled kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -327,25 +387,29 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _hint="Hint" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
-      </div>
     </div>
   </template>
 </kol-input-number>
@@ -354,26 +418,30 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -384,25 +452,29 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -412,24 +484,28 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -440,21 +516,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-number _hide-error="">
   <template shadowrootmode="open">
-    <div class="hidden-error kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -464,21 +544,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -488,21 +572,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _readOnly=true 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--read-only kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -512,22 +600,26 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _shortKey="S" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -537,24 +629,28 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -565,21 +661,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _touched=true 1`] = `
 <kol-input-number _touched="">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -589,21 +689,25 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
-        <datalist id="id-nonce-list">
-          <option value="1"></option>
-          <option value="2"></option>
-          <option value="3"></option>
-        </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+            </datalist>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -613,16 +717,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _touched=true 1`] = `
 <kol-input-number _touched="">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -632,16 +740,20 @@ exports[`kol-input-number should render with _label="Label" _name="field" _place
 exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" 1`] = `
 <kol-input-number>
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-number number" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-number number" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" type="number" value="">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-password/input-password.e2e.ts b/packages/components/src/components/input-password/input-password.e2e.ts
index 1759cab3ba..c9b61d3e9b 100644
--- a/packages/components/src/components/input-password/input-password.e2e.ts
+++ b/packages/components/src/components/input-password/input-password.e2e.ts
@@ -13,7 +13,7 @@ test.describe('kol-input-password', () => {
 		test('should toggle the password visibility when button is clicked', async ({ page }) => {
 			await page.setContent('<kol-input-password _label="Password input" _variant="visibility-toggle"></kol-input-password>');
 			const input = page.locator('kol-input-password input');
-			const toggleButton = page.locator('.password-toggle-button');
+			const toggleButton = page.getByTestId('kol-input-password-toggle-button');
 			await expect(input).toHaveAttribute('type', 'password');
 			await toggleButton.click();
 			await expect(input).toHaveAttribute('type', 'text');
diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
index 2b5e2210d8..d911a47093 100644
--- a/packages/components/src/components/input-password/shadow.tsx
+++ b/packages/components/src/components/input-password/shadow.tsx
@@ -119,7 +119,8 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 		return (
 			<KolIconButtonFc
 				componentName="button"
-				class="password-toggle-button"
+				class="kol-input-password__password-toggle-button"
+				data-testid="kol-input-password-toggle-button"
 				label={this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password')}
 				variant="ghost"
 				onClick={(): void => {
diff --git a/packages/components/src/components/input-password/style.scss b/packages/components/src/components/input-password/style.scss
index 8b0a518a4d..27fbe51e93 100644
--- a/packages/components/src/components/input-password/style.scss
+++ b/packages/components/src/components/input-password/style.scss
@@ -1,20 +1,17 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	.password-toggle-button {
-		position: absolute;
-		transform: translateX(-100%);
-	}
-
-	.kol-tooltip-wc {
+	.kol-input-password {
 		--kol-tooltip-width: #{rem(160)};
 	}
 }
diff --git a/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
index ddb9e733b3..64a8461e4b 100644
--- a/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _accessKey="V" 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _alert=true 1`] = `
 <kol-input-password _alert="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _disabled=true 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="disabled has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--disabled kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _hint="Hint" 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
-      </div>
     </div>
   </template>
 </kol-input-password>
@@ -83,21 +99,25 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-password _hide-error="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value hidden-error kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--hidden-error kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _readOnly=true 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password read-only" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--read-only kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _shortKey="S" 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,16 +302,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _touched=true 1`] = `
 <kol-input-password _touched="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--touched kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -273,16 +325,20 @@ exports[`kol-input-password should render with _label="Label" _name="field" _pla
 exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" 1`] = `
 <kol-input-password _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-password password" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-password password" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" type="password" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
index 8573d420db..2ddba0c587 100644
--- a/packages/components/src/components/input-radio/shadow.tsx
+++ b/packages/components/src/components/input-radio/shadow.tsx
@@ -27,8 +27,8 @@ import { InputRadioController } from './controller';
 import { propagateSubmitEventToForm } from '../form/controller';
 
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
+import KolFieldControlStateWrapperFc, { type FieldControlStateWrapperProps } from '../../functional-component-wrappers/FieldControlStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
-import KolFormFieldHintFc from '../../functional-components/FormFieldHint';
 
 /**
  * @slot - Die Legende/Überschrift der Radiobuttons.
@@ -66,16 +66,17 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		return {
 			state: this.state,
 			component: 'fieldset',
+			class: clsx('kol-form-field--radio'),
 			formFieldLabelProps: {
 				component: 'legend',
-				class: 'block w-full mb-1 leading-normal',
+				class: 'kol-form-field__label--legend',
+			},
+			formFieldInputProps: {
+				class: `kol-form-field__input--orientation-${this.state._orientation}`,
 			},
-			class: clsx('kol-input-radio', 'fieldset', this.state._orientation),
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.inputRef?.focus(),
 			alert: this.showAsAlert(),
-			renderNoHint: true,
-			anotherChildren: (<KolFormFieldHintFc hint={this.state._hint} />) as JSX.Element,
 			hideLabel: false,
 		};
 	}
@@ -88,12 +89,16 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		);
 	}
 
-	private getOptionProps(option: RadioOption<StencilUnknown>): FormFieldStateWrapperProps {
-		const obj: FormFieldStateWrapperProps = {
+	private getOptionProps(option: RadioOption<StencilUnknown>, id: string): FieldControlStateWrapperProps {
+		const obj: FieldControlStateWrapperProps = {
 			state: this.state,
+			id: id,
 			hint: option.hint,
 			label: option.label as string,
-			msg: undefined,
+			required: false,
+			fieldControlLabelProps: {
+				showBadge: false,
+			},
 		};
 
 		if (option.disabled) {
@@ -103,13 +108,13 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		return obj;
 	}
 
-	private getInputProps(option: RadioOption<StencilUnknown>, index: number, selected: boolean): InputStateWrapperProps {
+	private getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): InputStateWrapperProps {
 		const obj: InputStateWrapperProps = {
 			state: this.state,
-
+			id: id,
 			ref: this.state._value === option.value ? this.catchRef : undefined,
-			class: clsx('radio', {
-				disabled: Boolean(this.state._disabled || option.disabled),
+			class: clsx('kol-input-radio', {
+				['kol-input-radio--disabled']: Boolean(this.state._disabled || option.disabled),
 			}),
 			'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,
 			type: 'radio',
@@ -144,25 +149,9 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 		const selected = this.state._value === option.value;
 
 		return (
-			<KolFormFieldStateWrapperFc key={customId} {...this.getOptionProps(option)} renderNoLabel>
-				<div class="radio-input-wrapper">
-					<KolInputStateWrapperFc {...this.getInputProps(option, index, selected)} />
-					<label
-						class="radio-label"
-						htmlFor={`${customId}`}
-						style={{
-							height: this.state._hideLabel ? '0' : undefined,
-							margin: this.state._hideLabel ? '0' : undefined,
-							padding: this.state._hideLabel ? '0' : undefined,
-							visibility: this.state._hideLabel ? 'hidden' : undefined,
-						}}
-					>
-						<span>
-							<span class="radio-label-span-inner">{option.label}</span>
-						</span>
-					</label>
-				</div>
-			</KolFormFieldStateWrapperFc>
+			<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>
+				<KolInputStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />
+			</KolFieldControlStateWrapperFc>
 		);
 	}
 
diff --git a/packages/components/src/components/input-radio/style.scss b/packages/components/src/components/input-radio/style.scss
index a9893f3efc..661f4c12dd 100644
--- a/packages/components/src/components/input-radio/style.scss
+++ b/packages/components/src/components/input-radio/style.scss
@@ -1,25 +1,42 @@
 @import '../@shared/mixins';
-@import '../style';
-@import '../input';
+@import '../../styles/global';
+@import '../host-display-block';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-field-control-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
 
-@include kol-alert-styles;
+@include kol-alert;
+@include kol-field-control;
+@include kol-form-field;
+@include kol-input-container;
 
 @layer kol-component {
-	:host {
+	.kol-form-field {
 		--border-width: #{rem(2)};
 		--input-size: 1.5em;
-		font-size: rem(16);
-	}
 
-	.kol-input .icons {
-		display: none;
-	}
+		&__label {
+			display: contents;
+		}
 
-	label {
-		cursor: pointer;
+		&__input {
+			display: flex;
+			flex-direction: column;
+
+			&--orientation-horizontal {
+				flex-direction: row;
+				flex-wrap: wrap;
+				align-items: flex-start;
+			}
+		}
+
+		&--disabled {
+			opacity: unset;
+		}
 	}
 
-	input {
+	.kol-input-radio {
 		appearance: none;
 		border-width: var(--border-width);
 		border-style: solid;
@@ -32,42 +49,29 @@
 		min-width: var(--input-size);
 		padding: 0;
 		width: var(--input-size);
-	}
-
-	input:before {
-		border-radius: 100%;
-		content: '';
-		margin: auto;
-		height: calc(var(--input-size) / 2);
-		width: calc(var(--input-size) / 2);
-	}
 
-	input:checked:before {
-		background-color: #000;
-	}
-
-	@media (forced-colors: active) {
-		input:checked:before {
-			/* Give it a visible background in forced colors mode */
-			background-color: selectedItem !important;
+		&:before {
+			border-radius: 100%;
+			content: '';
+			margin: auto;
+			height: calc(var(--input-size) / 2);
+			width: calc(var(--input-size) / 2);
 		}
-	}
 
-	fieldset {
-		display: flex;
-	}
+		&:checked {
+			&:before {
+				background-color: #000;
 
-	fieldset.vertical {
-		flex-direction: column;
-	}
-
-	fieldset .input-slot {
-		align-items: center;
-		display: flex;
-	}
+				@media (forced-colors: active) {
+					/* Give it a visible background in forced colors mode */
+					background-color: selectedItem !important;
+				}
+			}
+		}
 
-	/* required star is on fieldset legend */
-	.required label > span::after {
-		content: '';
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
 	}
 }
diff --git a/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
index 4389b6c4d4..e8bbfb292f 100644
--- a/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,45 +3,47 @@
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -56,44 +58,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _alert=true 1`] = `
 <kol-input-radio _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -108,44 +112,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _disabled=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="disabled fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--disabled kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -160,51 +166,53 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _hint="Hint" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
           </label>
         </div>
       </div>
-      <span class="hint" id="undefined-hint">
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </fieldset>
@@ -215,44 +223,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -267,44 +277,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -319,44 +331,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -371,44 +385,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-radio _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset hidden-error kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--hidden-error kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -423,44 +439,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -475,45 +493,47 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _accessKey="V" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input accesskey="V" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input accesskey="V" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -528,44 +548,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _alert=true 1`] = `
 <kol-input-radio _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -580,44 +602,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _disabled=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="disabled fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--disabled kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -632,51 +656,53 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _hint="Hint" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
           </label>
         </div>
       </div>
-      <span class="hint" id="undefined-hint">
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
     </fieldset>
@@ -687,44 +713,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -739,44 +767,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -791,44 +821,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -843,44 +875,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-radio _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset hidden-error horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--hidden-error kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="hidden-error kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -895,44 +929,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -947,44 +983,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _readOnly=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -999,45 +1037,47 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _shortKey="S" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1052,44 +1092,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _touched=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio touched" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio kol-form-field--touched" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input--touched kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1104,44 +1146,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset horizontal kol-input kol-input-radio" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-horizontal">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1156,44 +1200,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _readOnly=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1208,45 +1254,47 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1261,44 +1309,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio touched vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio kol-form-field--touched" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input--touched kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input touched" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control kol-field-control--touched">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--touched kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
@@ -1313,44 +1363,46 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
 exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] 1`] = `
 <kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _value="Value">
   <template shadowrootmode="open">
-    <fieldset class="fieldset kol-input kol-input-radio vertical" role="presentation">
-      <legend class="block input-label leading-normal mb-1 w-full" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <fieldset class="kol-form-field kol-form-field--radio" role="presentation">
+      <legend class="kol-form-field__label kol-form-field__label--legend" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </legend>
-      <div class="disabled kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="disabled radio" disabled="" id="id-nonce" name="field" type="radio" value="-0">
-          <label class="radio-label" htmlfor="id-nonce-0">
-            <span>
-              <span class="radio-label-span-inner">
+      <div class="kol-form-field__input kol-form-field__input--orientation-vertical">
+        <div class="kol-field-control kol-field-control--disabled">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-radio kol-input-radio--disabled" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-0" id="id-nonce-0-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Frau
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-1">
-          <label class="radio-label" htmlfor="id-nonce-1">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-1" name="field" type="radio" value="-1">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-1" id="id-nonce-1-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Herr
               </span>
             </span>
           </label>
         </div>
-      </div>
-      <div class="kol-input" role="presentation">
-        <div class="radio-input-wrapper">
-          <input autocapitalize="off" autocorrect="off" class="radio" id="id-nonce" name="field" type="radio" value="-2">
-          <label class="radio-label" htmlfor="id-nonce-2">
-            <span>
-              <span class="radio-label-span-inner">
+        <div class="kol-field-control">
+          <div class="kol-field-control__input">
+            <input autocapitalize="off" autocorrect="off" class="kol-input kol-input-radio" id="id-nonce-2" name="field" type="radio" value="-2">
+          </div>
+          <label class="kol-field-control__label" htmlfor="id-nonce-2" id="id-nonce-2-label">
+            <span class="kol-field-control__label-text">
+              <span>
                 Divers
               </span>
             </span>
diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
index 18ddd9bbfd..95b72ccf28 100644
--- a/packages/components/src/components/input-range/shadow.tsx
+++ b/packages/components/src/components/input-range/shadow.tsx
@@ -168,19 +168,18 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 
 	public render(): JSX.Element {
 		const inputsWrapperStyle = {
-			'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
+			// use number of digits in max value plus some space for the number input arrow buttons
+			'--kolibri-input-range--input-number--width': `calc(${String(this.state._max ?? 1000).length}ch + 1.5em)`,
 		};
 
 		return (
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
 				<KolInputContainerFc state={this.state}>
-					<div id="input" class="input-slot">
-						<div class="inputs-wrapper" style={inputsWrapperStyle}>
-							<KolInputStateWrapperFc {...this.getInputRangeProps()} />
-							<KolInputStateWrapperFc {...this.getInputNumberProps()} />
-						</div>
-						{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}
+					<div class="kol-input-range__inputs-wrapper" style={inputsWrapperStyle}>
+						<KolInputStateWrapperFc class="kol-input-range__input kol-input-range__input--range" {...this.getInputRangeProps()} />
+						<KolInputStateWrapperFc class="kol-input-range__input kol-input-range__input--number" {...this.getInputNumberProps()} />
 					</div>
+					{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}
 				</KolInputContainerFc>
 			</KolFormFieldStateWrapperFc>
 		);
diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss
index 646e76984e..6b62c04de3 100644
--- a/packages/components/src/components/input-range/style.scss
+++ b/packages/components/src/components/input-range/style.scss
@@ -1,67 +1,66 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
 
 @layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-
-	.inputs-wrapper {
-		align-items: center;
-		display: flex;
-		flex-direction: row;
-	}
+	.kol-input-range {
+		&__inputs-wrapper {
+			align-items: center;
+			display: flex;
+			flex-direction: row;
+			flex-grow: 1;
+		}
 
-	input[type='number'] {
-		min-height: var(--a11y-min-size);
-		min-width: var(--a11y-min-size);
-		width: var(--kolibri-input-range--input-number--width);
-	}
+		&__input {
+			&--number {
+				width: var(--kolibri-input-range--input-number--width);
+			}
 
-	/*
-   * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.
-   */
-	input[type='range'] {
-		appearance: none;
-		background-color: #d3d3d3;
-		border: rem(1) solid #000;
-		display: inline-block;
-		flex-grow: 1;
-		height: rem(8);
-		line-height: 1.5;
-		padding: 0;
-		margin: 0;
-		/* Design-Hack - related with flex-grow */
-		width: 0;
-	}
+			&--range {
+				appearance: none;
+				background-color: #d3d3d3;
+				border: rem(1) solid #000;
+				display: inline-block;
+				flex-grow: 1;
+				height: rem(8);
+				line-height: 1.5;
+				padding: 0;
+				margin: 0;
+				/* Design-Hack - related with flex-grow */
+				width: 0;
 
-	input[type='range']::-webkit-slider-thumb {
-		box-sizing: border-box;
-		background-color: #000;
-		height: rem(20);
-		width: rem(20);
-		border-radius: rem(20);
-		cursor: pointer;
-		-webkit-appearance: none;
-	}
+				&::-webkit-slider-thumb {
+					box-sizing: border-box;
+					background-color: #000;
+					height: rem(20);
+					width: rem(20);
+					border-radius: rem(20);
+					cursor: pointer;
+					-webkit-appearance: none;
 
-	input[type='range']::-moz-range-thumb {
-		box-sizing: border-box;
-		background-color: #000;
-		height: rem(20);
-		width: rem(20);
-		border-radius: rem(20);
-		cursor: pointer;
-		-moz-appearance: none;
-	}
-}
+					@media (prefers-contrast: more) or (forced-colors: active) {
+						outline: rem(1) solid currentColor;
+					}
+				}
 
-/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */
-@media (prefers-contrast: more) {
-	::-webkit-slider-thumb {
-		outline: rem(1) solid currentColor;
+				&::-moz-range-thumb {
+					box-sizing: border-box;
+					background-color: #000;
+					height: rem(20);
+					width: rem(20);
+					border-radius: rem(20);
+					cursor: pointer;
+					-moz-appearance: none;
+				}
+			}
+		}
 	}
 }
diff --git a/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
index 296057e781..19a0bdb783 100644
--- a/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,20 +3,22 @@
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _accessKey="V" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -28,19 +30,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _alert=true 1`] = `
 <kol-input-range _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -52,19 +56,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _disabled=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="disabled kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-range__input kol-input-range__input--range" disabled="" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-range__input kol-input-range__input--number" disabled="" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -76,25 +82,27 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _hint="Hint" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
-        Hint
-      </span>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
+        Hint
+      </span>
     </div>
   </template>
 </kol-input-range>
@@ -103,26 +111,28 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
           </div>
-        </div>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
         </div>
       </div>
     </div>
@@ -133,25 +143,27 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -161,24 +173,26 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
           </div>
-        </div>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
         </div>
       </div>
     </div>
@@ -189,19 +203,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-range _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="hidden-error kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -213,19 +229,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -237,19 +255,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _readOnly=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -261,20 +281,22 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _shortKey="S" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -286,33 +308,35 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _accessKey="V" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -323,32 +347,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _alert=true 1`] = `
 <kol-input-range _alert="" _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -359,32 +385,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _disabled=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="disabled kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-range__input kol-input-range__input--range" disabled="" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled kol-input-range__input kol-input-range__input--number" disabled="" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -395,37 +423,39 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _hint="Hint" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
-        Hint
-      </span>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
+        Hint
+      </span>
     </div>
   </template>
 </kol-input-range>
@@ -434,38 +464,40 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
-        </div>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -476,37 +508,39 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -516,36 +550,38 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
-        </div>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -556,32 +592,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-range _hide-error="" _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="hidden-error kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--hidden-error kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -592,32 +630,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -628,32 +668,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _readOnly=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _readonly="" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -664,33 +706,35 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _shortKey="S" 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -701,32 +745,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _touched=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -737,32 +783,34 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
-          </div>
-          <datalist id="id-nonce-list">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option value="7"></option>
-            <option value="8"></option>
-            <option value="9"></option>
-            <option value="10"></option>
-          </datalist>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" list="id-nonce-list" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
+            <datalist id="id-nonce-list">
+              <option value="1"></option>
+              <option value="2"></option>
+              <option value="3"></option>
+              <option value="4"></option>
+              <option value="5"></option>
+              <option value="6"></option>
+              <option value="7"></option>
+              <option value="8"></option>
+              <option value="9"></option>
+              <option value="10"></option>
+            </datalist>
+          </div>
         </div>
       </div>
     </div>
@@ -773,19 +821,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _touched=true 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _touched="" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--touched kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
@@ -797,19 +847,21 @@ exports[`kol-input-range should render with _label="Label" _name="field" _placeh
 exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 1`] = `
 <kol-input-range _placeholder="Hier steht ein Platzhaltertext" _value="5">
   <template shadowrootmode="open">
-    <div class="kol-input kol-input-range range" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-input-range range" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="input-slot" id="input">
-          <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
-            <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
-            <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <div class="kol-input-range__inputs-wrapper" style="--kolibri-input-range--input-number--width: calc(2ch + 1.5em);">
+              <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--range" max="10" min="1" name="field-range" step="1" tabindex="-1" type="range" value="5">
+              <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input-range__input kol-input-range__input--number" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/components/src/components/input-text/style.scss b/packages/components/src/components/input-text/style.scss
index 08fff25ab9..0afb4a2557 100644
--- a/packages/components/src/components/input-text/style.scss
+++ b/packages/components/src/components/input-text/style.scss
@@ -1,11 +1,11 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
-
-@layer kol-component {
-	:host {
-		font-size: rem(16);
-	}
-}
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
+@include kol-input;
diff --git a/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
index 6028fe4682..db7acbb61f 100644
--- a/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,17 +3,21 @@
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _accessKey="V" 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -23,16 +27,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _alert=true 1`] = `
 <kol-input-text _alert="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -42,16 +50,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _disabled=true 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="disabled has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--disabled kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--disabled" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -61,20 +73,24 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _hint="Hint" 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
-      </div>
     </div>
   </template>
 </kol-input-text>
@@ -83,21 +99,25 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -108,20 +128,24 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -131,19 +155,23 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -154,16 +182,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-input-text _hide-error="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value hidden-error kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--hidden-error kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -173,16 +205,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -192,16 +228,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _readOnly=true 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text read-only text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--read-only kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--readonly" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -211,17 +251,21 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _shortKey="S" 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -231,19 +275,23 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
-        <div class="inputAdornment-end">
-          <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-button-wc _hidelabel="" _label="einblenden" tabindex="0"></kol-button-wc>
+          </div>
         </div>
       </div>
     </div>
@@ -254,16 +302,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" _touched=true 1`] = `
 <kol-input-text _touched="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-form-field--touched kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input kol-input--touched" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -273,16 +325,20 @@ exports[`kol-input-text should render with _label="Label" _name="field" _placeho
 exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _spellCheck=true _value="Value" 1`] = `
 <kol-input-text _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-input-text text" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="has-value kol-form-field kol-input-text text" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <input autocapitalize="off" autocomplete="off" autocorrect="off" class="kol-input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="" type="text" value="Value">
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/input.scss b/packages/components/src/components/input.scss
deleted file mode 100644
index ce3ff1c4e3..0000000000
--- a/packages/components/src/components/input.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-@import './@shared/mixins';
-@import './@shared/kol-alert-mixin';
-@import './label';
-@import './host-display-block';
-
-@layer kol-component {
-	input,
-	textarea {
-		cursor: text;
-	}
-
-	input[type='checkbox'],
-	input[type='color'],
-	input[type='file'],
-	input[type='radio'],
-	input[type='range'],
-	label,
-	option,
-	select {
-		cursor: pointer;
-	}
-
-	/* input[type='checkbox'], */
-	/* input[type='radio'], */
-	/* input[type='range'], */
-	input[type='color'],
-	input[type='date'],
-	input[type='datetime-local'],
-	input[type='email'],
-	input[type='file'],
-	input[type='month'],
-	input[type='number'],
-	input[type='password'],
-	input[type='search'],
-	input[type='tel'],
-	input[type='text'],
-	input[type='time'],
-	input[type='url'],
-	input[type='week'],
-	select,
-	select[multiple] option,
-	textarea {
-		font-size: rem(16);
-		width: 100%;
-	}
-
-	/* needed hack for vertical alignment */
-	input[type='file'] {
-		padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em;
-	}
-
-	/* needed hack for vertical alignment */
-	select[multiple] option {
-		padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;
-	}
-
-	.input {
-		background-color: white;
-	}
-}
diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx
index 93671a73f1..a73d5cfdff 100644
--- a/packages/components/src/components/input/component.tsx
+++ b/packages/components/src/components/input/component.tsx
@@ -67,7 +67,7 @@ export class KolInputWc implements Props {
 
 		const hasExpertSlot = showExpertSlot(this._label);
 		const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
-		const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
+		const useTooltipInsteadOfLabel = !hasExpertSlot && this._hideLabel;
 
 		return (
 			<Host
@@ -80,7 +80,7 @@ export class KolInputWc implements Props {
 					'hidden-error': this._hideError === true,
 				})}
 			>
-				<label class="input-label" id={!useTooltopInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltopInsteadOfLabel} htmlFor={this._id}>
+				<label class="input-label" id={!useTooltipInsteadOfLabel ? `${this._id}-label` : undefined} hidden={useTooltipInsteadOfLabel} htmlFor={this._id}>
 					{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}
 					<span class="input-label-span">
 						{/* INFO: label comes with any html tag or as plain text! */}
@@ -120,7 +120,7 @@ export class KolInputWc implements Props {
 						<KolIconTag _label="" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>
 					)}
 				</div>
-				{useTooltopInsteadOfLabel && (
+				{useTooltipInsteadOfLabel && (
 					<KolTooltipWcTag
 						/**
 						 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
diff --git a/packages/components/src/components/kolibri/style.scss b/packages/components/src/components/kolibri/style.scss
index 77fb4d0bb2..024c0291b4 100644
--- a/packages/components/src/components/kolibri/style.scss
+++ b/packages/components/src/components/kolibri/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-kolibri {
diff --git a/packages/components/src/components/label.scss b/packages/components/src/components/label.scss
deleted file mode 100644
index fb7b8bc94a..0000000000
--- a/packages/components/src/components/label.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@layer kol-component {
-	.required label > span::after,
-	.required legend > span::after {
-		content: '*';
-	}
-}
diff --git a/packages/components/src/components/link-button/style.scss b/packages/components/src/components/link-button/style.scss
index 907260460e..6078f08099 100644
--- a/packages/components/src/components/link-button/style.scss
+++ b/packages/components/src/components/link-button/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-button-mixin';
 
 @include kol-button-styles('kol-link');
diff --git a/packages/components/src/components/link/style.scss b/packages/components/src/components/link/style.scss
index dd8f131dec..44b01ded8e 100644
--- a/packages/components/src/components/link/style.scss
+++ b/packages/components/src/components/link/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-link-mixin';
 
 @include kol-link-styles('kol-link');
diff --git a/packages/components/src/components/modal/style.scss b/packages/components/src/components/modal/style.scss
index 08bbe81a58..36426e61b3 100644
--- a/packages/components/src/components/modal/style.scss
+++ b/packages/components/src/components/modal/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-modal {
diff --git a/packages/components/src/components/nav/style.scss b/packages/components/src/components/nav/style.scss
index 9a1c8d6b4e..9d5f6f5695 100644
--- a/packages/components/src/components/nav/style.scss
+++ b/packages/components/src/components/nav/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {
diff --git a/packages/components/src/components/pagination/style.scss b/packages/components/src/components/pagination/style.scss
index a073d3e580..e22a769071 100644
--- a/packages/components/src/components/pagination/style.scss
+++ b/packages/components/src/components/pagination/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../tooltip/style.scss';
 
 @layer kol-component {
diff --git a/packages/components/src/components/progress/style.scss b/packages/components/src/components/progress/style.scss
index ebe75ce1af..67532b950a 100644
--- a/packages/components/src/components/progress/style.scss
+++ b/packages/components/src/components/progress/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-progress {
diff --git a/packages/components/src/components/quote/style.scss b/packages/components/src/components/quote/style.scss
index 54f1d6ffec..2ea61999a3 100644
--- a/packages/components/src/components/quote/style.scss
+++ b/packages/components/src/components/quote/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-quote {
diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
index a9a571d88f..0a4f483093 100644
--- a/packages/components/src/components/select/shadow.tsx
+++ b/packages/components/src/components/select/shadow.tsx
@@ -62,8 +62,8 @@ export class KolSelect implements SelectAPI, FocusableElement {
 	private getFormFieldProps(): FormFieldStateWrapperProps {
 		return {
 			state: this.state,
-			class: clsx('kol-select', 'select', {
-				'has-value': this.state._hasValue,
+			class: clsx('kol-form-field-select', {
+				'kol-form-field--has-value': this.state._hasValue,
 			}),
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.selectRef?.focus(),
@@ -93,9 +93,7 @@ export class KolSelect implements SelectAPI, FocusableElement {
 		return (
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
 				<KolInputContainerFc state={this.state}>
-					{/* deprecated: remove from theme and replace/refactor 'flex-grow: 1;' */}
 					<form
-						class="input-slot"
 						onSubmit={(event) => {
 							event.preventDefault();
 							propagateSubmitEventToForm({
diff --git a/packages/components/src/components/select/style.scss b/packages/components/src/components/select/style.scss
index 4834d2d743..2ce66d0a83 100644
--- a/packages/components/src/components/select/style.scss
+++ b/packages/components/src/components/select/style.scss
@@ -1,15 +1,35 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
+@import '../../styles/kol-input-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
 
-@include kol-alert-styles;
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
 
 @layer kol-component {
-	:host {
+	.kol-select {
 		font-size: rem(16);
+		cursor: pointer;
+		width: 100%;
 
-		option:checked::before {
+		&:not([multiple], [size]) {
+			height: 2.75em;
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&__option:checked::before {
 			content: '✓ ';
 		}
+
+		/* needed hack for vertical alignment */
+		&[multiple] option {
+			padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;
+		}
 	}
 }
diff --git a/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
index b1edb3f4b8..f2a3af14af 100644
--- a/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,30 +3,34 @@
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select accesskey="V" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -36,29 +40,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _alert=true 1`] = `
 <kol-select _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -68,29 +76,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _disabled=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="disabled has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select kol-select--disabled" disabled="" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -100,33 +112,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _hint="Hint" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-      </div>
     </div>
   </template>
 </kol-select>
@@ -135,34 +151,38 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -173,33 +193,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -209,32 +233,36 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -245,29 +273,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-select _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value hidden-error kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--hidden-error kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -277,29 +309,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -309,30 +345,34 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _accessKey="V" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select accesskey="V" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -342,29 +382,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _alert=true 1`] = `
 <kol-select _alert="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -374,29 +418,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _disabled=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="disabled has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select kol-select--disabled" disabled="" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -406,33 +454,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _hint="Hint" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-      </div>
     </div>
   </template>
 </kol-select>
@@ -441,34 +493,38 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -479,33 +535,37 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
         </div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end"></div>
       </div>
     </div>
   </template>
@@ -515,32 +575,36 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div>
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -551,29 +615,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-select _hide-error="" _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value hidden-error kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--hidden-error kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -583,29 +651,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -615,29 +687,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _readOnly=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -647,30 +723,34 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _shortKey="S" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -680,29 +760,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _touched=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--touched kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select kol-select--touched" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -712,29 +796,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field">
-            <option disabled="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" multiple="" name="field">
+                <option class="kol-select__option kol-select__option--disabled" disabled="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -744,29 +832,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _readOnly=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _readonly="">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -776,30 +868,34 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -809,29 +905,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--touched kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select kol-select--touched" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -841,29 +941,33 @@ exports[`kol-select should render with _label="Label" _name="field" _placeholder
 exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] 1`] = `
 <kol-select _placeholder="Hier steht ein Platzhaltertext">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-select select" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-select" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <form class="input-slot">
-          <input hidden="" type="submit">
-          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field">
-            <option disabled="" selected="" value="-0">
-              Frau
-            </option>
-            <option value="-1">
-              Herr
-            </option>
-            <option value="-2">
-              Divers
-            </option>
-          </select>
-        </form>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container">
+            <form>
+              <input hidden="" type="submit">
+              <select autocapitalize="off" autocorrect="off" class="kol-select" id="id-nonce" name="field">
+                <option class="kol-select__option kol-select__option--disabled kol-select__option--selected" disabled="" selected="" value="-0">
+                  Frau
+                </option>
+                <option class="kol-select__option" value="-1">
+                  Herr
+                </option>
+                <option class="kol-select__option" value="-2">
+                  Divers
+                </option>
+              </select>
+            </form>
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/single-select/style.scss b/packages/components/src/components/single-select/style.scss
index 74437825a3..8307831d7d 100644
--- a/packages/components/src/components/single-select/style.scss
+++ b/packages/components/src/components/single-select/style.scss
@@ -1,6 +1,7 @@
+@import '../../styles/global';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../host-display-block';
+@import '../tooltip/style';
 
 @layer kol-component {
 	:host {
@@ -22,6 +23,10 @@
 
 		&__input {
 			flex-grow: 1;
+
+			&:focus {
+				outline: none;
+			}
 		}
 
 		&__button {
@@ -60,4 +65,8 @@
 			min-height: rem(50);
 		}
 	}
+
+	.kol-input {
+		display: grid;
+	}
 }
diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss
index fbe9e76032..33a57863ff 100644
--- a/packages/components/src/components/skip-nav/style.scss
+++ b/packages/components/src/components/skip-nav/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-skip-nav {
diff --git a/packages/components/src/components/spin/style.scss b/packages/components/src/components/spin/style.scss
index 1488fdbd55..cc946f481b 100644
--- a/packages/components/src/components/spin/style.scss
+++ b/packages/components/src/components/spin/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import './cycle';
 @import './dot';
 
diff --git a/packages/components/src/components/split-button/style.scss b/packages/components/src/components/split-button/style.scss
index 497b716c2e..31f0ae21ed 100644
--- a/packages/components/src/components/split-button/style.scss
+++ b/packages/components/src/components/split-button/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../popover/style.scss';
 @import '../tooltip/style.scss';
 
diff --git a/packages/components/src/components/table-stateful/style.scss b/packages/components/src/components/table-stateful/style.scss
index 93e9c86e0b..4720a843b6 100644
--- a/packages/components/src/components/table-stateful/style.scss
+++ b/packages/components/src/components/table-stateful/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-table-stateless-mixin';
 
 @include kol-table-stateless-styles;
diff --git a/packages/components/src/components/table-stateless/style.scss b/packages/components/src/components/table-stateless/style.scss
index 71ab0e2a70..5fa4f67b0e 100644
--- a/packages/components/src/components/table-stateless/style.scss
+++ b/packages/components/src/components/table-stateless/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../@shared/kol-table-stateless-mixin';
 @import '../host-display-block';
 
diff --git a/packages/components/src/components/tabs/style.scss b/packages/components/src/components/tabs/style.scss
index 911f6c9277..1d38eefb7a 100644
--- a/packages/components/src/components/tabs/style.scss
+++ b/packages/components/src/components/tabs/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 @import '../host-display-block';
 @import '../tooltip/style.scss';
 
diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
index 0716556a3b..840c6fe10f 100644
--- a/packages/components/src/components/textarea/shadow.tsx
+++ b/packages/components/src/components/textarea/shadow.tsx
@@ -28,7 +28,7 @@ import { setState } from '../../schema';
 import { nonce } from '../../utils/dev.utils';
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
 import KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper';
-import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
+import KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper';
 import { TextareaController } from './controller';
 
 /**
@@ -79,9 +79,9 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 	private getFormFieldProps(): FormFieldStateWrapperProps {
 		return {
 			state: this.state,
-			class: clsx('kol-textarea', 'textarea', {
-				'has-value': this.state._hasValue,
-				'has-counter': !!this.state._hasCounter,
+			class: clsx('kol-form-field-textarea', {
+				'kol-form-field--has-value': this.state._hasValue,
+				'kol-form-field--has-counter': !!this.state._hasCounter,
 			}),
 			tooltipAlign: this._tooltipAlign,
 			onClick: () => this.textareaRef?.focus(),
@@ -112,9 +112,9 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 	public render(): JSX.Element {
 		return (
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
-				<KolInputContainerFc state={this.state}>
+				<KolInputContainerStateWrapperFc state={this.state}>
 					<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />
-				</KolInputContainerFc>
+				</KolInputContainerStateWrapperFc>
 			</KolFormFieldStateWrapperFc>
 		);
 	}
diff --git a/packages/components/src/components/textarea/style.scss b/packages/components/src/components/textarea/style.scss
index 134affeab3..d3548601c7 100644
--- a/packages/components/src/components/textarea/style.scss
+++ b/packages/components/src/components/textarea/style.scss
@@ -1,9 +1,21 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
+@import '../../styles/kol-form-field-mixin';
+@import '../../styles/kol-input-container-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../input-line';
+@import '../host-display-block';
+
+@include kol-alert;
+@include kol-form-field;
+@include kol-input-container;
 
 @layer kol-component {
-	:host {
+	.kol-textarea {
 		font-size: rem(16);
+		width: 100%;
+
+		&:focus {
+			outline: none;
+		}
 	}
 }
diff --git a/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
index 11e0f3831c..4c42b3316a 100644
--- a/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,16 +3,20 @@
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _accessKey="V" 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             V
           </span>
         </span>
       </label>
-      <div class="input"><textarea accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea accesskey="V" autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -22,15 +26,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _alert=true 1`] = `
 <kol-textarea _alert="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -40,15 +48,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _disabled=true 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="disabled has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--disabled kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container kol-input-container--disabled">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea kol-textarea--disabled" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -58,19 +70,23 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _hint="Hint" 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <span class="hint" id="id-nonce-hint">
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
+      </div>
+      <span class="kol-form-field__hint" id="id-nonce-hint">
         Hint
       </span>
-      <div class="input"><textarea aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
-      </div>
     </div>
   </template>
 </kol-textarea>
@@ -79,20 +95,24 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -103,19 +123,23 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
-        </div><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
-        <div class="inputAdornment-end"></div>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-left" _label=""></kol-icon>
+          </div>
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
+        </div>
       </div>
     </div>
   </template>
@@ -125,18 +149,22 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input">
-        <div class="inputAdornment-start"></div><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
-        <div class="inputAdornment-end">
-          <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+          <div class="kol-input-container__adornment kol-input-container__adornment--end">
+            <kol-icon _icons="codicon codicon-codicon codicon-arrow-right" _label=""></kol-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -147,15 +175,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
 <kol-textarea _hide-error="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value hidden-error kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--hidden-error kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -165,15 +197,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -183,15 +219,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _readOnly=true 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea read-only textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--read-only kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea kol-textarea--readonly" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -201,16 +241,20 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _shortKey="S" 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           Label
           <span aria-hidden="true" class="access-key-hint">
             S
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -220,15 +264,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" _touched=true 1`] = `
 <kol-textarea _touched="" _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea touched" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field--touched kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea kol-textarea--touched" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
@@ -238,15 +286,19 @@ exports[`kol-textarea should render with _label="Label" _name="field" _placehold
 exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _spellCheck=true _value="Value" 1`] = `
 <kol-textarea _value="Value">
   <template shadowrootmode="open">
-    <div class="has-value kol-input kol-textarea textarea" role="presentation">
-      <label class="input-label" htmlfor="id-nonce" id="id-nonce-label">
-        <span class="input-label-span">
+    <div class="kol-form-field kol-form-field--has-value kol-form-field-textarea" role="presentation">
+      <label class="kol-form-field__label" htmlfor="id-nonce" id="id-nonce-label">
+        <span class="kol-form-field__label-text">
           <span>
             Label
           </span>
         </span>
       </label>
-      <div class="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+      <div class="kol-form-field__input">
+        <div class="kol-input-container">
+          <div class="kol-input-container__container"><textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" value="Value" style="resize: vertical;"></textarea>
+          </div>
+        </div>
       </div>
     </div>
   </template>
diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss
index 6b7bb64b57..2c70f1ff0b 100644
--- a/packages/components/src/components/toaster/style.scss
+++ b/packages/components/src/components/toaster/style.scss
@@ -1,8 +1,8 @@
+@import '../../styles/global';
+@import '../../styles/kol-alert-mixin';
 @import '../@shared/mixins';
-@import '../style';
-@import '../@shared/kol-alert-mixin';
 
-@include kol-alert-styles;
+@include kol-alert;
 
 @layer kol-component {
 	:host {
diff --git a/packages/components/src/components/toolbar/style.scss b/packages/components/src/components/toolbar/style.scss
index 55c95d6dd0..d03058c834 100644
--- a/packages/components/src/components/toolbar/style.scss
+++ b/packages/components/src/components/toolbar/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-toolbar {
diff --git a/packages/components/src/components/tree-item/style.scss b/packages/components/src/components/tree-item/style.scss
index f82ac40fd0..3d5364cc14 100644
--- a/packages/components/src/components/tree-item/style.scss
+++ b/packages/components/src/components/tree-item/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-tree-item {
diff --git a/packages/components/src/components/tree/style.scss b/packages/components/src/components/tree/style.scss
index bcef9e6d0d..e985d68bf4 100644
--- a/packages/components/src/components/tree/style.scss
+++ b/packages/components/src/components/tree/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	.kol-tree {
diff --git a/packages/components/src/components/version/style.scss b/packages/components/src/components/version/style.scss
index 728527017d..35e4e258d6 100644
--- a/packages/components/src/components/version/style.scss
+++ b/packages/components/src/components/version/style.scss
@@ -1,5 +1,5 @@
 @import '../@shared/mixins';
-@import '../style';
+@import '../../styles/global';
 
 @layer kol-component {
 	:host {
diff --git a/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper.tsx b/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper.tsx
new file mode 100644
index 0000000000..e86ebb9e61
--- /dev/null
+++ b/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper.tsx
@@ -0,0 +1,43 @@
+import { h, type FunctionalComponent as FC } from '@stencil/core';
+import KolCheckboxFc, { type CheckboxProps } from '../../functional-components/inputs/Checkbox';
+import { type InputProps } from '../../functional-components/inputs/Input';
+
+import { type InputCheckboxStates, convertMsgToInternMsg } from '../../schema';
+import { getRenderStates } from '../_helpers/getRenderStates';
+
+export type CheckboxStateWrapperProps = Omit<CheckboxProps, 'inputProps'> & {
+	state: InputCheckboxStates;
+	inputProps?: Partial<InputProps>;
+};
+
+function getCheckboxProps(state: InputCheckboxStates, inputProps: Partial<InputProps> = {}): InputProps {
+	const { ariaDescribedBy } = getRenderStates(state);
+
+	const props: InputProps = {
+		id: state._id,
+		hideLabel: state._hideLabel,
+		label: state._label,
+		value: state._value as string | number | string[],
+		accessKey: state._accessKey,
+		disabled: state._disabled,
+		name: state._name,
+
+		ariaDescribedBy: ariaDescribedBy,
+	};
+
+	if ('_required' in state) props.required = state._required;
+	if ('_checked' in state) props.checked = state._checked;
+	if ('_indeterminate' in state) props.indeterminate = state._indeterminate;
+	if ('_touched' in state) props.touched = state._touched;
+	if ('_msg' in state) props.msg = convertMsgToInternMsg(state._msg);
+
+	return { ...props, ...inputProps };
+}
+
+const CheckboxStateWrapper: FC<CheckboxStateWrapperProps> = ({ state, inputProps, ...other }) => {
+	const variant = state?._variant || 'default';
+
+	return <KolCheckboxFc variant={variant} inputProps={getCheckboxProps(state, inputProps)} {...other} />;
+};
+
+export default CheckboxStateWrapper;
diff --git a/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/index.ts b/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/index.ts
new file mode 100644
index 0000000000..5dfbf69b60
--- /dev/null
+++ b/packages/components/src/functional-component-wrappers/CheckboxStateWrapper/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CheckboxStateWrapper';
+export * from './CheckboxStateWrapper';
diff --git a/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper.tsx b/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper.tsx
new file mode 100644
index 0000000000..71700c4636
--- /dev/null
+++ b/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper.tsx
@@ -0,0 +1,69 @@
+import { h, type FunctionalComponent as FC } from '@stencil/core';
+import KolFieldControlFc, { type FieldControlProps } from '../../functional-components/FieldControl';
+import {
+	type InputColorStates,
+	type InputEmailStates,
+	type InputFileStates,
+	type InputNumberStates,
+	type InputPasswordStates,
+	type InputRangeStates,
+	type InputTextStates,
+	type InputCheckboxStates,
+	type InputRadioStates,
+	type SelectStates,
+	convertMsgToInternMsg,
+} from '../../schema';
+
+type InputState =
+	| InputTextStates
+	| InputEmailStates
+	| InputPasswordStates
+	| InputNumberStates
+	| InputColorStates
+	| InputFileStates
+	| InputRangeStates
+	| InputCheckboxStates
+	| InputRadioStates
+	| SelectStates;
+
+export type FieldControlStateWrapperProps = Partial<FieldControlProps> & {
+	state: InputState;
+};
+
+function getFieldControlProps(state: InputState): FieldControlProps {
+	const props: FieldControlProps = {
+		accessKey: state._accessKey,
+		shortKey: state._shortKey,
+		id: state._id,
+		disabled: state._disabled,
+		msg: convertMsgToInternMsg(state._msg),
+		hint: state._hint,
+		label: state._label,
+		hideLabel: state._hideLabel,
+		touched: state._touched,
+	};
+
+	if ('_required' in state) {
+		props.required = state._required;
+	}
+
+	if ('_readOnly' in state) {
+		props.readonly = state._readOnly;
+	}
+
+	if ('_labelAlign' in state) {
+		props.labelAlign = state._labelAlign;
+	}
+
+	return props;
+}
+
+const FieldControlStateWrapper: FC<FieldControlStateWrapperProps> = ({ state, ...other }, children) => {
+	return (
+		<KolFieldControlFc {...getFieldControlProps(state)} {...other}>
+			{children}
+		</KolFieldControlFc>
+	);
+};
+
+export default FieldControlStateWrapper;
diff --git a/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/index.ts b/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/index.ts
new file mode 100644
index 0000000000..d770928bba
--- /dev/null
+++ b/packages/components/src/functional-component-wrappers/FieldControlStateWrapper/index.ts
@@ -0,0 +1,2 @@
+export { default } from './FieldControlStateWrapper';
+export * from './FieldControlStateWrapper';
diff --git a/packages/components/src/functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper.tsx b/packages/components/src/functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper.tsx
index 5966ccc7cb..cc474f339b 100644
--- a/packages/components/src/functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper.tsx
+++ b/packages/components/src/functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper.tsx
@@ -1,17 +1,19 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
-import type {
-	ButtonProps,
-	IconOrIconClass,
-	InputColorStates,
-	InputEmailStates,
-	InputFileStates,
-	InputNumberStates,
-	InputPasswordStates,
-	InputRangeStates,
-	InputTextStates,
-	KoliBriHorizontalIcons,
-	TextareaStates,
-	SelectStates,
+import type { InternMsgPropType } from '../../schema';
+import {
+	type ButtonProps,
+	type IconOrIconClass,
+	type InputColorStates,
+	type InputEmailStates,
+	type InputFileStates,
+	type InputNumberStates,
+	type InputPasswordStates,
+	type InputRangeStates,
+	type InputTextStates,
+	type KoliBriHorizontalIcons,
+	type TextareaStates,
+	type SelectStates,
+	convertMsgToInternMsg,
 } from '../../schema';
 
 import KolInputContainerFc, { type InputContainerProps } from '../../functional-components/InputContainer';
@@ -33,7 +35,13 @@ export type InputContainerStateWrapperProps = Partial<InputContainerProps> & {
 	state: InputState;
 };
 
-function getInputContainerProps(state: InputState): { icons?: KoliBriHorizontalIcons; smartButton?: ButtonProps; disabled?: boolean } {
+function getInputContainerProps(state: InputState): {
+	icons?: KoliBriHorizontalIcons;
+	smartButton?: ButtonProps;
+	disabled?: boolean;
+	msg?: InternMsgPropType;
+	touched?: boolean;
+} {
 	let icons: KoliBriHorizontalIcons | undefined = undefined;
 	let smartButton: ButtonProps | undefined;
 
@@ -45,11 +53,17 @@ function getInputContainerProps(state: InputState): { icons?: KoliBriHorizontalI
 		smartButton = state._smartButton;
 	}
 
-	return { icons, smartButton, disabled: state._disabled };
+	return {
+		icons,
+		smartButton,
+		disabled: state._disabled,
+		msg: convertMsgToInternMsg(state._msg),
+		touched: state._touched,
+	};
 }
 
 const InputContainerStateWrapperFc: FC<InputContainerStateWrapperProps> = ({ state, endAdornment: defaultEndAdornment }, children) => {
-	const { icons, smartButton, disabled } = getInputContainerProps(state);
+	const { icons, smartButton, disabled, msg, touched } = getInputContainerProps(state);
 
 	let leftIconProps: IconOrIconClass | undefined = icons?.left;
 	if (isString(leftIconProps)) {
@@ -85,7 +99,7 @@ const InputContainerStateWrapperFc: FC<InputContainerStateWrapperProps> = ({ sta
 	}
 
 	return (
-		<KolInputContainerFc startAdornment={startAdornment} endAdornment={endAdornment}>
+		<KolInputContainerFc disabled={disabled} msg={msg} touched={touched} startAdornment={startAdornment} endAdornment={endAdornment}>
 			{children}
 		</KolInputContainerFc>
 	);
diff --git a/packages/components/src/functional-component-wrappers/InputStateWrapper/InputStateWrapper.tsx b/packages/components/src/functional-component-wrappers/InputStateWrapper/InputStateWrapper.tsx
index 61f7d1fe7b..ffbddf523a 100644
--- a/packages/components/src/functional-component-wrappers/InputStateWrapper/InputStateWrapper.tsx
+++ b/packages/components/src/functional-component-wrappers/InputStateWrapper/InputStateWrapper.tsx
@@ -2,16 +2,17 @@ import type { VNode } from '@stencil/core';
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import KolInputFc, { type InputProps } from '../../functional-components/inputs/Input';
 
-import type {
-	InputColorStates,
-	InputEmailStates,
-	InputFileStates,
-	InputNumberStates,
-	InputPasswordStates,
-	InputRangeStates,
-	InputTextStates,
-	InputCheckboxStates,
-	InputRadioStates,
+import {
+	type InputColorStates,
+	type InputEmailStates,
+	type InputFileStates,
+	type InputNumberStates,
+	type InputPasswordStates,
+	type InputRangeStates,
+	type InputTextStates,
+	type InputCheckboxStates,
+	type InputRadioStates,
+	convertMsgToInternMsg,
 } from '../../schema';
 import { getRenderStates } from '../_helpers/getRenderStates';
 import SuggestionsFc from '../../functional-components/Suggestions';
@@ -53,13 +54,15 @@ function getInputProps(state: InputState): InputProps {
 	if ('_autoComplete' in state) props.autoComplete = state._autoComplete;
 	if ('_spellCheck' in state) props.spellcheck = state._spellCheck;
 	if ('_pattern' in state) props.pattern = state._pattern;
-	if ('_readOnly' in state) props.readOnly = state._readOnly;
+	if ('_readOnly' in state) props.readonly = state._readOnly;
 	if ('_min' in state) props.min = state._min;
 	if ('_max' in state) props.max = state._max;
 	if ('_step' in state) props.step = state._step;
 	if ('_multiple' in state) props.multiple = state._multiple;
 	if ('_checked' in state) props.checked = state._checked;
 	if ('_indeterminate' in state) props.indeterminate = state._indeterminate;
+	if ('_touched' in state) props.touched = state._touched;
+	if ('_msg' in state) props.msg = convertMsgToInternMsg(state._msg);
 
 	if ('_suggestions' in state) {
 		const hasSuggestions = Array.isArray(state._suggestions) && state._suggestions.length > 0;
diff --git a/packages/components/src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx b/packages/components/src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx
index b644951fa3..c467eaf650 100644
--- a/packages/components/src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx
+++ b/packages/components/src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx
@@ -1,7 +1,7 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import KolSelectFc, { type SelectProps } from '../../functional-components/inputs/NativeSelect';
 
-import type { SelectStates } from '../../schema';
+import { convertMsgToInternMsg, type SelectStates } from '../../schema';
 import { getRenderStates } from '../_helpers/getRenderStates';
 
 export type SelectStateWrapperProps = Partial<SelectProps> & {
@@ -24,6 +24,8 @@ function getSelectProps(state: SelectStates): SelectProps {
 		size: state._rows,
 		multiple: state._multiple,
 		required: state._required,
+		touched: state._touched,
+		msg: convertMsgToInternMsg(state._msg),
 	};
 
 	return props;
diff --git a/packages/components/src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx b/packages/components/src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx
index 372acad15f..5b129b8f4f 100644
--- a/packages/components/src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx
+++ b/packages/components/src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx
@@ -1,7 +1,7 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import KolTextAreaFc, { type TextAreaProps } from '../../functional-components/inputs/TextArea';
 
-import type { TextareaStates } from '../../schema';
+import { convertMsgToInternMsg, type TextareaStates } from '../../schema';
 import { getRenderStates } from '../_helpers/getRenderStates';
 
 export type TextAreaStateWrapperProps = Partial<TextAreaProps> & {
@@ -21,10 +21,12 @@ function getTextAreaProps(state: TextareaStates): TextAreaProps {
 		name: state._name,
 		ariaDescribedBy: ariaDescribedBy,
 		rows: state._rows,
-		readOnly: state._readOnly,
+		readonly: state._readOnly,
 		required: state._required,
 		placeholder: state._placeholder,
 		maxLength: state._maxLength,
+		touched: state._touched,
+		msg: convertMsgToInternMsg(state._msg),
 	};
 
 	return props;
diff --git a/packages/components/src/functional-components/FieldControl/FieldControl.tsx b/packages/components/src/functional-components/FieldControl/FieldControl.tsx
new file mode 100644
index 0000000000..628312004d
--- /dev/null
+++ b/packages/components/src/functional-components/FieldControl/FieldControl.tsx
@@ -0,0 +1,128 @@
+import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';
+import type { JSXBase } from '@stencil/core/internal';
+import clsx from 'clsx';
+import { type AlignPropType, type LabelAlignPropType, buildBadgeTextString, checkHasError, type InternMsgPropType, showExpertSlot } from '../../schema';
+import KolFieldControlTooltipFc from '../FormFieldTooltip';
+import KolFieldControlLabelFc from '../FormFieldLabel';
+import KolFieldControlHintFc from '../FormFieldHint';
+
+export type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
+	id: string;
+	hint?: string;
+	label: string;
+	hideLabel?: boolean;
+	labelAlign?: LabelAlignPropType;
+	accessKey?: string;
+	shortKey?: string;
+	tooltipAlign?: AlignPropType;
+	disabled?: boolean;
+	msg?: InternMsgPropType;
+	touched?: boolean;
+	required?: boolean;
+	readonly?: boolean;
+	showTooltip?: boolean;
+
+	renderNoLabel?: boolean;
+	renderNoHint?: boolean;
+	renderNoTooltip?: boolean;
+
+	fieldControlLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {
+		component?: 'label' | 'legend';
+		showBadge?: boolean;
+	};
+	fieldControlInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+	fieldControlTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;
+	fieldControlHintProps?: JSXBase.HTMLAttributes<HTMLElement>;
+};
+
+const InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {
+	return (
+		<div class={clsx('kol-field-control__input', classNames)} {...other}>
+			{children}
+		</div>
+	);
+};
+
+const KolFieldControlFc: FC<FieldControlProps> = (props, children) => {
+	const {
+		class: classNames,
+		id,
+		disabled,
+		label,
+		hideLabel,
+		labelAlign,
+		renderNoTooltip,
+		hint,
+		renderNoHint,
+		tooltipAlign,
+		accessKey,
+		shortKey,
+		msg,
+		touched,
+		required,
+		readonly,
+		fieldControlInputProps,
+		fieldControlLabelProps,
+		fieldControlTooltipProps,
+		fieldControlHintProps,
+		...other
+	} = props;
+
+	const canShowHint = !renderNoHint;
+	const canShowTooltip = !renderNoTooltip;
+	const showMsg = checkHasError(msg, touched);
+	const hasExpertSlot = showExpertSlot(label);
+	const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
+	const badgeText = buildBadgeTextString(accessKey, shortKey);
+
+	const components = [
+		<>
+			<InputContainer {...fieldControlInputProps}>{children}</InputContainer>
+			{useTooltipInsteadOfLabel && (
+				<KolFieldControlTooltipFc
+					{...(fieldControlTooltipProps || {})}
+					id={id}
+					label={label}
+					hideLabel={hideLabel}
+					align={tooltipAlign}
+					badgeText={badgeText}
+				/>
+			)}
+		</>,
+		<KolFieldControlLabelFc
+			{...(fieldControlLabelProps || {})}
+			id={id}
+			baseClassName="kol-field-control"
+			class={clsx(fieldControlLabelProps?.class, {
+				['kol-field-control__label--visually-hidden']: Boolean(hideLabel),
+			})}
+			hasExpertSlot={hasExpertSlot}
+			label={label}
+			accessKey={accessKey}
+			shortKey={shortKey}
+		/>,
+	];
+
+	if (labelAlign === 'left') {
+		components.reverse();
+	}
+
+	const stateCssClasses = {
+		['kol-field-control--disabled']: Boolean(disabled),
+		['kol-field-control--required']: Boolean(required),
+		['kol-field-control--touched']: Boolean(touched),
+		['kol-field-control--hide-label']: Boolean(hideLabel),
+		['kol-field-control--read-only']: Boolean(readonly),
+		[`kol-field-control--${msg?.type || 'error'}`]: Boolean(showMsg),
+		[`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),
+	};
+
+	return (
+		<div class={clsx('kol-field-control', stateCssClasses, classNames)} {...other}>
+			{components}
+			{canShowHint && <KolFieldControlHintFc {...(fieldControlHintProps || {})} baseClassName="kol-field-control" id={id} hint={hint} />}
+		</div>
+	);
+};
+
+export default KolFieldControlFc;
diff --git a/packages/components/src/functional-components/FieldControl/index.ts b/packages/components/src/functional-components/FieldControl/index.ts
new file mode 100644
index 0000000000..d98b3aefc7
--- /dev/null
+++ b/packages/components/src/functional-components/FieldControl/index.ts
@@ -0,0 +1,2 @@
+export { default } from './FieldControl';
+export * from './FieldControl';
diff --git a/packages/components/src/functional-components/FormField/FormField.tsx b/packages/components/src/functional-components/FormField/FormField.tsx
index e3df6541e6..0ce2d13924 100644
--- a/packages/components/src/functional-components/FormField/FormField.tsx
+++ b/packages/components/src/functional-components/FormField/FormField.tsx
@@ -1,5 +1,5 @@
 import type { JSX } from '@stencil/core';
-import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';
+import { h, type FunctionalComponent as FC } from '@stencil/core';
 import KolFormFieldMsgFc from '../FormFieldMsg';
 import KolFormFieldLabelFc from '../FormFieldLabel';
 import KolFormFieldHintFc from '../FormFieldHint/FormFieldHint';
@@ -8,7 +8,7 @@ import KolFormFieldTooltipFc from '../FormFieldTooltip';
 import type { JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
 import type { AlignPropType, InternMsgPropType } from '../../schema';
-import { buildBadgeTextString, showExpertSlot } from '../../schema';
+import { buildBadgeTextString, checkHasError, showExpertSlot } from '../../schema';
 
 function getModifierClassNameByMsgType(msg?: { type?: string }): string {
 	if (msg?.type) {
@@ -26,26 +26,6 @@ function getModifierClassNameByMsgType(msg?: { type?: string }): string {
 	return '';
 }
 
-function checkHasError(msg?: InternMsgPropType, touched?: boolean): boolean {
-	/**
-	 * We support 5 types of messages:
-	 * - default
-	 * - info
-	 * - success
-	 * - warning
-	 * - error
-	 *
-	 * The message is shown if:
-	 * - the message text is not an empty string
-	 * - we show only one message at a time
-	 * - by error messages the input must be touched
-	 */
-	const hasValidMsg = Boolean(msg?.description && msg?.description.length > 0);
-	const showMsg = hasValidMsg && (touched === true || msg?.type !== 'error');
-
-	return showMsg;
-}
-
 export type FormFieldProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
 	component?: 'div' | 'fieldset';
 	id: string;
@@ -64,24 +44,33 @@ export type FormFieldProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
 	touched?: boolean;
 	required?: boolean;
 	renderNoLabel?: boolean;
+	renderNoTooltip?: boolean;
 	renderNoHint?: boolean;
 	anotherChildren?: JSX.Element | JSX.Element[];
 
-	reverseLabelInput?: boolean;
-
 	formFieldLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & { component?: 'label' | 'legend' };
 	formFieldHintProps?: JSXBase.HTMLAttributes<HTMLElement>;
 	formFieldTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;
 	formFieldMsgProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
 	formFieldCounterProps?: JSXBase.HTMLAttributes<HTMLSpanElement>;
+	formFieldInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
 } & {
 	[key: `data-${string}`]: unknown;
 };
 
+const InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {
+	return (
+		<div class={clsx('kol-form-field__input', classNames)} {...other}>
+			{children}
+		</div>
+	);
+};
+
 const KolFormFieldFc: FC<FormFieldProps> = (props, children) => {
 	const {
 		component: Component = 'div',
 		renderNoLabel,
+		renderNoTooltip,
 		renderNoHint,
 		anotherChildren,
 		id,
@@ -100,41 +89,46 @@ const KolFormFieldFc: FC<FormFieldProps> = (props, children) => {
 		counter,
 		readOnly,
 		touched,
-		reverseLabelInput,
 		formFieldLabelProps,
 		formFieldHintProps,
 		formFieldTooltipProps,
 		formFieldMsgProps,
 		formFieldCounterProps,
+		formFieldInputProps,
 		...other
 	} = props;
 
 	const showLabel = !renderNoLabel;
 	const showHint = !renderNoHint;
+	const showTooltip = !renderNoTooltip;
 	const hasExpertSlot = showExpertSlot(label);
 	const showMsg = checkHasError(msg, touched);
 	const badgeText = buildBadgeTextString(accessKey, shortKey);
-	const useTooltipInsteadOfLabel = !hasExpertSlot && hideLabel;
+	const useTooltipInsteadOfLabel = showTooltip && !hasExpertSlot && hideLabel;
 
 	let stateCssClasses = {
-		disabled: Boolean(disabled),
-		required: Boolean(required),
-		touched: Boolean(touched),
-		'hide-label': Boolean(hideLabel),
-		'read-only': Boolean(readOnly),
-		'hidden-error': Boolean(hideError),
+		['kol-form-field--disabled']: Boolean(disabled),
+		['kol-form-field--required']: Boolean(required),
+		['kol-form-field--touched']: Boolean(touched),
+		['kol-form-field--hide-label']: Boolean(hideLabel),
+		['kol-form-field--read-only']: Boolean(readOnly),
+		['kol-form-field--hidden-error']: Boolean(hideError),
 	};
 
 	if (showMsg) {
 		stateCssClasses = {
 			...stateCssClasses,
-			[msg?.type || 'error']: true,
-			[getModifierClassNameByMsgType(msg)]: true,
+			[`kol-form-field--${msg?.type || 'error'}`]: true,
+			[`kol-form-field--${getModifierClassNameByMsgType(msg)}`]: true,
 		};
 	}
 
-	const componentList = [
-		<>
+	return (
+		<Component
+			class={clsx('kol-form-field', stateCssClasses, classNames)}
+			role={`presentation` /* Avoid element being read as 'clickable' in NVDA */}
+			{...other}
+		>
 			{showLabel && (
 				<KolFormFieldLabelFc
 					{...(formFieldLabelProps || {})}
@@ -146,25 +140,15 @@ const KolFormFieldFc: FC<FormFieldProps> = (props, children) => {
 					shortKey={shortKey}
 				/>
 			)}
-			{showHint && <KolFormFieldHintFc {...(formFieldHintProps || {})} id={id} hint={hint} />}
-		</>,
-		<>
-			{children}
-			{useTooltipInsteadOfLabel && (
-				<KolFormFieldTooltipFc {...(formFieldTooltipProps || {})} id={id} label={label} hideLabel={hideLabel} align={tooltipAlign} badgeText={badgeText} />
-			)}
-		</>,
-	];
-
-	if (reverseLabelInput) {
-		componentList.reverse();
-	}
-
-	return (
-		<Component class={clsx('kol-input', stateCssClasses, classNames)} role={`presentation` /* Avoid element being read as 'clickable' in NVDA */} {...other}>
-			{componentList}
-			{showMsg && <KolFormFieldMsgFc {...(formFieldMsgProps || {})} id={id} alert={alert} msg={msg} hideError={hideError} />}
+			<InputContainer {...formFieldInputProps}>
+				{children}
+				{useTooltipInsteadOfLabel && (
+					<KolFormFieldTooltipFc {...(formFieldTooltipProps || {})} id={id} label={label} hideLabel={hideLabel} align={tooltipAlign} badgeText={badgeText} />
+				)}
+			</InputContainer>
 			{counter ? <KolFormFieldCounterFc {...(formFieldCounterProps || {})} {...counter} /> : null}
+			{showMsg && <KolFormFieldMsgFc {...(formFieldMsgProps || {})} id={id} alert={alert} msg={msg} hideError={hideError} />}
+			{showHint && <KolFormFieldHintFc {...(formFieldHintProps || {})} id={id} hint={hint} />}
 			{anotherChildren}
 		</Component>
 	);
diff --git a/packages/components/src/functional-components/FormField/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/FormField/tests/__snapshots__/snapshot.test.tsx.snap
index 5e3c76813f..cd99ecf1e8 100644
--- a/packages/components/src/functional-components/FormField/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/FormField/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,51 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolFormFieldFc should render correctly 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
+  <div class="kol-form-field__input"></div>
 </div>
 `;
 
 exports[`KolFormFieldFc should render correctly with div tag 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
+  <div class="kol-form-field__input"></div>
 </div>
 `;
 
 exports[`KolFormFieldFc should render correctly with fieldset tag 1`] = `
-<fieldset class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<fieldset class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
+  <div class="kol-form-field__input"></div>
 </fieldset>
 `;
 
 exports[`KolFormFieldFc should render with counter 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
-  <span aria-atomic="true" aria-live="polite" class="counter" data-testid="input-counter">
+  <div class="kol-form-field__input"></div>
+  <span aria-atomic="true" aria-live="polite" class="kol-form-field__counter" data-testid="input-counter">
     5
     <span aria-label="kol-of" role="img">
       /
@@ -59,28 +63,31 @@ exports[`KolFormFieldFc should render with counter 1`] = `
 `;
 
 exports[`KolFormFieldFc should render with custom children 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
-  <input type="text">
+  <div class="kol-form-field__input">
+    <input type="text">
+  </div>
 </div>
 `;
 
 exports[`KolFormFieldFc should render with error message 1`] = `
-<div class="error kol-input msg-type-error touched" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field kol-form-field--error kol-form-field--msg-type-error kol-form-field--touched" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
-  <div aria-hidden="true" class="error kol-alert kol-alert--error kol-alert--msg" description="Error message" id="test-id-error">
+  <div class="kol-form-field__input"></div>
+  <div aria-hidden="true" class="kol-alert kol-alert--error kol-alert--msg kol-form-field__msg" description="Error message" id="test-id-error">
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">
@@ -94,40 +101,43 @@ exports[`KolFormFieldFc should render with error message 1`] = `
 `;
 
 exports[`KolFormFieldFc should render with hint 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
-  <span class="hint" id="test-id-hint">
+  <div class="kol-form-field__input"></div>
+  <span class="kol-form-field__hint" id="test-id-hint">
     Hint message
   </span>
 </div>
 `;
 
 exports[`KolFormFieldFc should render with required props 1`] = `
-<div class="kol-input required" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field kol-form-field--required" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
+  <div class="kol-form-field__input"></div>
 </div>
 `;
 
 exports[`KolFormFieldFc should render with tooltip 1`] = `
-<div class="kol-input" role="presentation">
-  <label class="input-label" htmlfor="test-id" id="test-id-label">
-    <span class="input-label-span">
+<div class="kol-form-field" role="presentation">
+  <label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+    <span class="kol-form-field__label-text">
       <span>
         Test Label
       </span>
     </span>
   </label>
+  <div class="kol-form-field__input"></div>
 </div>
 `;
diff --git a/packages/components/src/functional-components/FormFieldCounter/FormFieldCounter.tsx b/packages/components/src/functional-components/FormFieldCounter/FormFieldCounter.tsx
index b5cc80776d..a40b2be71f 100644
--- a/packages/components/src/functional-components/FormFieldCounter/FormFieldCounter.tsx
+++ b/packages/components/src/functional-components/FormFieldCounter/FormFieldCounter.tsx
@@ -10,7 +10,7 @@ type FormFieldCounterProps = JSXBase.HTMLAttributes<HTMLSpanElement> & {
 
 const KolFormFieldCounterFc: FC<FormFieldCounterProps> = ({ currentLength, maxLength, class: classNames, ...other }) => {
 	return (
-		<span class={clsx('counter', classNames)} {...other} aria-atomic="true" aria-live="polite" data-testid="input-counter">
+		<span class={clsx('kol-form-field__counter', classNames)} {...other} aria-atomic="true" aria-live="polite" data-testid="input-counter">
 			{currentLength}
 			{maxLength && (
 				<>
diff --git a/packages/components/src/functional-components/FormFieldCounter/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/FormFieldCounter/tests/__snapshots__/snapshot.test.tsx.snap
index d892259514..af7ab6e218 100644
--- a/packages/components/src/functional-components/FormFieldCounter/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/FormFieldCounter/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolFormFieldCounterFc should render correctly 1`] = `
-<span aria-atomic="true" aria-live="polite" class="counter custom-class" data-testid="input-counter">
+<span aria-atomic="true" aria-live="polite" class="custom-class kol-form-field__counter" data-testid="input-counter">
   5
   <span aria-label="kol-of" role="img">
     /
diff --git a/packages/components/src/functional-components/FormFieldHint/FormFieldHint.tsx b/packages/components/src/functional-components/FormFieldHint/FormFieldHint.tsx
index ea069138b5..c30ba13203 100644
--- a/packages/components/src/functional-components/FormFieldHint/FormFieldHint.tsx
+++ b/packages/components/src/functional-components/FormFieldHint/FormFieldHint.tsx
@@ -4,15 +4,16 @@ import clsx from 'clsx';
 
 type FormFieldHintProps = JSXBase.HTMLAttributes<HTMLSpanElement> & {
 	hint?: string;
+	baseClassName?: string;
 };
 
-const KolFormFieldHintFc: FC<FormFieldHintProps> = ({ id, class: classNames, hint, ...other }) => {
+const KolFormFieldHintFc: FC<FormFieldHintProps> = ({ id, class: classNames, hint, baseClassName = 'kol-form-field', ...other }) => {
 	if (!hint) {
 		return null;
 	}
 
 	return (
-		<span class={clsx('hint', classNames)} id={`${id}-hint`} {...other}>
+		<span class={clsx(`${baseClassName}__hint`, classNames)} id={`${id}-hint`} {...other}>
 			{hint}
 		</span>
 	);
diff --git a/packages/components/src/functional-components/FormFieldHint/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/FormFieldHint/tests/__snapshots__/snapshot.test.tsx.snap
index d8565fe064..d134df53cb 100644
--- a/packages/components/src/functional-components/FormFieldHint/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/FormFieldHint/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolFormFieldHintFc should render with hint 1`] = `
-<span class="custom-class hint" id="test-id-hint">
+<span class="custom-class kol-form-field__hint" id="test-id-hint">
   This is a hint
 </span>
 `;
diff --git a/packages/components/src/functional-components/FormFieldLabel/FormFieldLabel.tsx b/packages/components/src/functional-components/FormFieldLabel/FormFieldLabel.tsx
index fb0381694c..6b0bac28ff 100644
--- a/packages/components/src/functional-components/FormFieldLabel/FormFieldLabel.tsx
+++ b/packages/components/src/functional-components/FormFieldLabel/FormFieldLabel.tsx
@@ -10,15 +10,18 @@ type LabelProps = {
 	accessKey?: string;
 	shortKey?: string;
 	hasExpertSlot?: boolean;
+	showBadge?: boolean;
 };
 
 type FormFieldLabelProps = JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {
 	component?: 'label' | 'legend';
 	id: string;
 	hideLabel?: boolean;
+	baseClassName?: string;
+	showBadge?: boolean;
 } & LabelProps;
 
-const LabelFc: FC<LabelProps> = ({ hasExpertSlot, accessKey, shortKey, label }) => {
+const LabelFc: FC<LabelProps> = ({ hasExpertSlot, accessKey, shortKey, label, showBadge = true }) => {
 	if (hasExpertSlot) {
 		return <slot name="expert"></slot>;
 	}
@@ -29,7 +32,7 @@ const LabelFc: FC<LabelProps> = ({ hasExpertSlot, accessKey, shortKey, label })
 
 	const hasBadgeText = isString(accessKey) || isString(shortKey);
 
-	if (!hasBadgeText) {
+	if (!showBadge || !hasBadgeText) {
 		return <span>{label}</span>;
 	}
 
@@ -49,28 +52,30 @@ const LabelFc: FC<LabelProps> = ({ hasExpertSlot, accessKey, shortKey, label })
 const KolFormFieldLabelFc: FC<FormFieldLabelProps> = ({
 	component: Component = 'label',
 	id,
+	baseClassName = 'kol-form-field',
 	class: classNames,
 	accessKey,
 	shortKey,
 	label,
 	hideLabel,
 	hasExpertSlot,
+	showBadge,
 	...other
 }) => {
-	const useTooltopInsteadOfLabel = !hasExpertSlot && hideLabel;
+	const useTooltipInsteadOfLabel = !hasExpertSlot && hideLabel;
 
 	return (
 		<Component
 			{...other}
-			class={clsx('input-label', classNames)}
-			id={!useTooltopInsteadOfLabel ? `${id}-label` : undefined}
-			hidden={useTooltopInsteadOfLabel}
+			class={clsx(`${baseClassName}__label`, classNames)}
+			id={!useTooltipInsteadOfLabel ? `${id}-label` : undefined}
+			hidden={useTooltipInsteadOfLabel}
 			htmlFor={id}
 		>
 			{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}
-			<span class="input-label-span">
+			<span class={clsx(`${baseClassName}__label-text`)}>
 				{/* INFO: label comes with any html tag or as plain text! */}
-				<LabelFc hasExpertSlot={hasExpertSlot} accessKey={accessKey} shortKey={shortKey} label={label} />
+				<LabelFc hasExpertSlot={hasExpertSlot} accessKey={accessKey} shortKey={shortKey} label={label} showBadge={showBadge} />
 			</span>
 		</Component>
 	);
diff --git a/packages/components/src/functional-components/FormFieldLabel/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/FormFieldLabel/tests/__snapshots__/snapshot.test.tsx.snap
index 5fd9f9ed99..1174595faf 100644
--- a/packages/components/src/functional-components/FormFieldLabel/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/FormFieldLabel/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KolFormFieldLabelFc should render the correct component tag "label"  1`] = `
-<label class="input-label" htmlfor="test-id" id="test-id-label">
-  <span class="input-label-span">
+<label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+  <span class="kol-form-field__label-text">
     <span>
       Test Label
     </span>
@@ -11,8 +11,8 @@ exports[`KolFormFieldLabelFc should render the correct component tag "label"  1`
 `;
 
 exports[`KolFormFieldLabelFc should render the correct component tag "legend"  1`] = `
-<legend class="input-label" htmlfor="test-id" id="test-id-label">
-  <span class="input-label-span">
+<legend class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+  <span class="kol-form-field__label-text">
     <span>
       Test Label
     </span>
@@ -21,8 +21,8 @@ exports[`KolFormFieldLabelFc should render the correct component tag "legend"  1
 `;
 
 exports[`KolFormFieldLabelFc should render with accessKey and shortKey 1`] = `
-<label class="input-label" htmlfor="test-id" id="test-id-label">
-  <span class="input-label-span">
+<label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+  <span class="kol-form-field__label-text">
     Test Label
     <span aria-hidden="true" class="access-key-hint">
       A
@@ -32,14 +32,14 @@ exports[`KolFormFieldLabelFc should render with accessKey and shortKey 1`] = `
 `;
 
 exports[`KolFormFieldLabelFc should render with expert slot 1`] = `
-<label class="input-label" htmlfor="test-id" id="test-id-label">
-  <span class="input-label-span"></span>
+<label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+  <span class="kol-form-field__label-text"></span>
 </label>
 `;
 
 exports[`KolFormFieldLabelFc should render with label 1`] = `
-<label class="input-label" htmlfor="test-id" id="test-id-label">
-  <span class="input-label-span">
+<label class="kol-form-field__label" htmlfor="test-id" id="test-id-label">
+  <span class="kol-form-field__label-text">
     <span>
       Test Label
     </span>
diff --git a/packages/components/src/functional-components/FormFieldLabel/tests/snapshot.test.tsx b/packages/components/src/functional-components/FormFieldLabel/tests/snapshot.test.tsx
index ca8f29785e..885a271891 100644
--- a/packages/components/src/functional-components/FormFieldLabel/tests/snapshot.test.tsx
+++ b/packages/components/src/functional-components/FormFieldLabel/tests/snapshot.test.tsx
@@ -39,7 +39,7 @@ describe('KolFormFieldLabelFc', () => {
 		const page = await renderFunctionalComponentToSpecPage(() => <KolFormFieldLabelFc label={label} id={id} class={classNames} />);
 
 		expect(page.root?.id).toBe(`${id}-label`);
-		expect(page.root?.className).toContain('input-label');
+		expect(page.root?.className).toContain('kol-form-field__label');
 		expect(page.root?.className).toContain(classNames);
 	});
 
diff --git a/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx b/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
index d7068c6385..0eea8a3642 100644
--- a/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
+++ b/packages/components/src/functional-components/FormFieldMsg/FormFieldMsg.tsx
@@ -17,13 +17,7 @@ const FormFieldMsgFc: FunctionalComponent<FormFieldMsgProps> = ({ alert, msg, hi
 		id={`${id}-error`}
 		alert={alert}
 		type="error"
-		class={clsx(
-			{
-				error: true,
-				'visually-hidden': hideError === true,
-			},
-			classNames,
-		)}
+		class={clsx('kol-form-field__msg', { 'visually-hidden': hideError === true }, classNames)}
 		{...msg}
 		{...other}
 		aria-hidden="true"
diff --git a/packages/components/src/functional-components/FormFieldMsg/tests/__snapshots__/snapshort.test.tsx.snap b/packages/components/src/functional-components/FormFieldMsg/tests/__snapshots__/snapshort.test.tsx.snap
index 6cd3c60001..25a2343cce 100644
--- a/packages/components/src/functional-components/FormFieldMsg/tests/__snapshots__/snapshort.test.tsx.snap
+++ b/packages/components/src/functional-components/FormFieldMsg/tests/__snapshots__/snapshort.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormFieldMsgFc should render with all props 1`] = `
-<div aria-hidden="true" class="custom-class error kol-alert kol-alert--error kol-alert--msg" description="This is an error message" id="test-id-error" role="alert">
+<div aria-hidden="true" class="custom-class kol-alert kol-alert--error kol-alert--msg kol-form-field__msg" description="This is an error message" id="test-id-error" role="alert">
   <div class="kol-alert__container">
     <kol-icon _icons="codicon codicon-error" _label="kol-error" class="kol-alert__heading-icon"></kol-icon>
     <div class="kol-alert__container-content">
diff --git a/packages/components/src/functional-components/FormFieldTooltip/FormFieldTooltip.tsx b/packages/components/src/functional-components/FormFieldTooltip/FormFieldTooltip.tsx
index 03f8e1f45d..54bce2f7bd 100644
--- a/packages/components/src/functional-components/FormFieldTooltip/FormFieldTooltip.tsx
+++ b/packages/components/src/functional-components/FormFieldTooltip/FormFieldTooltip.tsx
@@ -20,7 +20,7 @@ const FormFieldTooltipFc: FC<FormFieldTooltipProps> = ({ id, align, badgeText, h
 			 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
 			 */
 			aria-hidden="true"
-			class={clsx('input-tooltip', classNames)}
+			class={clsx('kol-form-field__tooltip', classNames)}
 			_badgeText={badgeText}
 			_align={align}
 			_id={hideLabel ? `${id}-label` : undefined}
diff --git a/packages/components/src/functional-components/FormFieldTooltip/tests/__snapshots__/snapshort.test.tsx.snap b/packages/components/src/functional-components/FormFieldTooltip/tests/__snapshots__/snapshort.test.tsx.snap
index d6adb2407c..097e9c0988 100644
--- a/packages/components/src/functional-components/FormFieldTooltip/tests/__snapshots__/snapshort.test.tsx.snap
+++ b/packages/components/src/functional-components/FormFieldTooltip/tests/__snapshots__/snapshort.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`FormFieldTooltipFc should render correctly 1`] = `
 <kol-tooltip-wc
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip"
+  class="kol-form-field__tooltip"
 />
 `;
 
@@ -13,7 +13,7 @@ exports[`FormFieldTooltipFc should set the correct align property 1`] = `
   _align="left"
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip"
+  class="kol-form-field__tooltip"
 />
 `;
 
@@ -22,7 +22,7 @@ exports[`FormFieldTooltipFc should set the correct badgeText 1`] = `
   _badgetext="Badge Text"
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip"
+  class="kol-form-field__tooltip"
 />
 `;
 
@@ -30,7 +30,7 @@ exports[`FormFieldTooltipFc should set the correct class names 1`] = `
 <kol-tooltip-wc
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip custom-class"
+  class="kol-form-field__tooltip custom-class"
 />
 `;
 
@@ -38,7 +38,7 @@ exports[`FormFieldTooltipFc should set the correct id and label 1`] = `
 <kol-tooltip-wc
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip"
+  class="kol-form-field__tooltip"
 />
 `;
 
@@ -47,6 +47,6 @@ exports[`FormFieldTooltipFc should set the correct id when hideLabel is true 1`]
   _id="test-id-label"
   _label="Test Label"
   aria-hidden="true"
-  class="input-tooltip"
+  class="kol-form-field__tooltip"
 />
 `;
diff --git a/packages/components/src/functional-components/FormFieldTooltip/tests/snapshort.test.tsx b/packages/components/src/functional-components/FormFieldTooltip/tests/snapshort.test.tsx
index 4c9ec17732..5180d757b7 100644
--- a/packages/components/src/functional-components/FormFieldTooltip/tests/snapshort.test.tsx
+++ b/packages/components/src/functional-components/FormFieldTooltip/tests/snapshort.test.tsx
@@ -16,7 +16,7 @@ describe('FormFieldTooltipFc', () => {
 		const page = await renderFunctionalComponentToSpecPage(() => <FormFieldTooltipFc id="test-id" label="Test Label" class={classNames} />);
 
 		expect(page.root).toMatchSnapshot();
-		expect(page.root?.className).toContain('input-tooltip');
+		expect(page.root?.className).toContain('kol-form-field__tooltip');
 		expect(page.root?.className).toContain(classNames);
 	});
 
diff --git a/packages/components/src/functional-components/InputAdornment/InputAdornment.tsx b/packages/components/src/functional-components/InputAdornment/InputAdornment.tsx
index 9f51ea7ce6..c9808435c0 100644
--- a/packages/components/src/functional-components/InputAdornment/InputAdornment.tsx
+++ b/packages/components/src/functional-components/InputAdornment/InputAdornment.tsx
@@ -7,10 +7,11 @@ export type InputAdornmentProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
 };
 
 const InputAdornment: FC<InputAdornmentProps> = ({ position = 'start', class: className, ...other }, children) => {
-	const rootClassName = `inputAdornment-${position}`;
+	const rootClassName = `kol-input-container__adornment`;
+	const positionClassName = `${rootClassName}--${position}`;
 
 	return (
-		<div class={clsx(rootClassName, className)} {...other}>
+		<div class={clsx(rootClassName, positionClassName, className)} {...other}>
 			{children}
 		</div>
 	);
diff --git a/packages/components/src/functional-components/InputAdornment/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/InputAdornment/tests/__snapshots__/snapshot.test.tsx.snap
index 607f9ce0b3..68de3e7a9a 100644
--- a/packages/components/src/functional-components/InputAdornment/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/InputAdornment/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KolInputContainerFc should render correctly 1`] = `<div class="inputAdornment-start"></div>`;
+exports[`KolInputContainerFc should render correctly 1`] = `<div class="kol-input-container__adornment kol-input-container__adornment--start"></div>`;
 
 exports[`KolInputContainerFc should render with children 1`] = `
-<div class="inputAdornment-start">
+<div class="kol-input-container__adornment kol-input-container__adornment--start">
   <kol-icon _icons="codicon codicon-start-icon" _label=""></kol-icon>
 </div>
 `;
diff --git a/packages/components/src/functional-components/InputContainer/InputContainer.tsx b/packages/components/src/functional-components/InputContainer/InputContainer.tsx
index 1d983ffd9f..7154d452f7 100644
--- a/packages/components/src/functional-components/InputContainer/InputContainer.tsx
+++ b/packages/components/src/functional-components/InputContainer/InputContainer.tsx
@@ -2,12 +2,20 @@ import { h, type FunctionalComponent as FC } from '@stencil/core';
 import clsx from 'clsx';
 import type { JSXBase, VNode } from '@stencil/core/internal';
 import InputAdornment from '../InputAdornment';
+import { checkHasError, type InternMsgPropType } from '../../schema';
 
 type InputAdornmentType = VNode | VNode[] | null;
 
 export type InputContainerProps = JSXBase.HTMLAttributes & {
 	startAdornment?: InputAdornmentType;
 	endAdornment?: InputAdornmentType;
+	disabled?: boolean;
+	msg?: InternMsgPropType;
+	touched?: boolean;
+
+	containerProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+	startAdornmentProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
+	endAdornmentProps?: JSXBase.HTMLAttributes<HTMLDivElement>;
 };
 
 function hasItems(items?: InputAdornmentType): boolean {
@@ -18,22 +26,45 @@ function hasItems(items?: InputAdornmentType): boolean {
 	return Array.isArray(items) ? items.length > 0 : Boolean(items);
 }
 
+const Container: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: className, ...other }, children) => {
+	return (
+		<div class={clsx('kol-input-container__container', className)} {...other}>
+			{children}
+		</div>
+	);
+};
+
 const KolInputContainerFc: FC<InputContainerProps> = (props, children) => {
-	const { class: classNames, startAdornment, endAdornment, ...other } = props;
+	const { class: classNames, startAdornment, endAdornment, disabled, msg, touched, containerProps, startAdornmentProps, endAdornmentProps, ...other } = props;
+	const showMsg = checkHasError(msg, touched);
+
+	const stateCssClasses = {
+		['kol-input-container--disabled']: disabled,
+		[`kol-input-container--${msg?.type || 'error'}`]: showMsg,
+	};
+
+	const baseProps: JSXBase.HTMLAttributes<HTMLDivElement> = {
+		class: clsx('kol-input-container', stateCssClasses, classNames),
+		...other,
+	};
 
 	if (!hasItems(startAdornment) && !hasItems(endAdornment)) {
 		return (
-			<div class={clsx('input', classNames)} {...other}>
-				{children}
+			<div {...baseProps}>
+				<Container {...containerProps}>{children}</Container>
 			</div>
 		);
 	}
 
 	return (
-		<div class={clsx('input', classNames)} {...other}>
-			<InputAdornment position="start">{startAdornment}</InputAdornment>
-			{children}
-			<InputAdornment position="end">{endAdornment}</InputAdornment>
+		<div {...baseProps}>
+			<InputAdornment {...startAdornmentProps} position="start">
+				{startAdornment}
+			</InputAdornment>
+			<Container {...containerProps}>{children}</Container>
+			<InputAdornment {...endAdornmentProps} position="end">
+				{endAdornment}
+			</InputAdornment>
 		</div>
 	);
 };
diff --git a/packages/components/src/functional-components/InputContainer/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/InputContainer/tests/__snapshots__/snapshot.test.tsx.snap
index 194bb20067..86c88bacee 100644
--- a/packages/components/src/functional-components/InputContainer/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/InputContainer/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,38 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KolInputContainerFc should render correctly 1`] = `<div class="input"></div>`;
+exports[`KolInputContainerFc should render correctly 1`] = `
+<div class="kol-input-container">
+  <div class="kol-input-container__container"></div>
+</div>
+`;
 
 exports[`KolInputContainerFc should render with both startAdornment and endAdornment 1`] = `
-<div class="input">
-  <div class="inputAdornment-start">
+<div class="kol-input-container">
+  <div class="kol-input-container__adornment kol-input-container__adornment--start">
     <kol-icon _icons="codicon codicon-start-icon" _label=""></kol-icon>
   </div>
-  <div class="inputAdornment-end">
+  <div class="kol-input-container__container"></div>
+  <div class="kol-input-container__adornment kol-input-container__adornment--end">
     <kol-icon _icons="codicon codicon-end-icon" _label=""></kol-icon>
   </div>
 </div>
 `;
 
 exports[`KolInputContainerFc should render with children 1`] = `
-<div class="input">
-  <input type="text">
+<div class="kol-input-container">
+  <div class="kol-input-container__container">
+    <input type="text">
+  </div>
 </div>
 `;
 
 exports[`KolInputContainerFc should render with endAdornment 1`] = `
-<div class="input">
-  <div class="inputAdornment-start"></div>
-  <div class="inputAdornment-end">
+<div class="kol-input-container">
+  <div class="kol-input-container__adornment kol-input-container__adornment--start"></div>
+  <div class="kol-input-container__container"></div>
+  <div class="kol-input-container__adornment kol-input-container__adornment--end">
     <kol-icon _icons="codicon codicon-end-icon" _label=""></kol-icon>
   </div>
 </div>
 `;
 
 exports[`KolInputContainerFc should render with startAdornment 1`] = `
-<div class="input">
-  <div class="inputAdornment-start">
+<div class="kol-input-container">
+  <div class="kol-input-container__adornment kol-input-container__adornment--start">
     <kol-icon _icons="codicon codicon-start-icon" _label=""></kol-icon>
   </div>
-  <div class="inputAdornment-end"></div>
+  <div class="kol-input-container__container"></div>
+  <div class="kol-input-container__adornment kol-input-container__adornment--end"></div>
 </div>
 `;
diff --git a/packages/components/src/functional-components/inputs/Checkbox/Checkbox.tsx b/packages/components/src/functional-components/inputs/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..05fc8fab5a
--- /dev/null
+++ b/packages/components/src/functional-components/inputs/Checkbox/Checkbox.tsx
@@ -0,0 +1,43 @@
+import { h, type FunctionalComponent as FC } from '@stencil/core';
+import type { JSXBase } from '@stencil/core/internal';
+import clsx from 'clsx';
+import KolIconFc, { type IconProps } from '../../Icon';
+import KolInputFc, { type InputProps } from '../Input';
+import { checkHasError } from '../../../schema';
+
+export type CheckboxProps = JSXBase.HTMLAttributes<HTMLLabelElement> & {
+	icon: string;
+	variant?: 'default' | 'button' | 'switch';
+	inputProps: InputProps;
+};
+
+const IconWrapperFc: FC<IconProps> = ({ class: classNames, ...other }) => {
+	return <KolIconFc class={clsx('kol-checkbox__icon', classNames)} {...other} />;
+};
+
+const InputWrapperFc: FC<InputProps> = ({ class: classNames, ...other }) => {
+	return <KolInputFc class={clsx('kol-checkbox__input', classNames)} {...other} type="checkbox" />;
+};
+
+const CheckboxFc: FC<CheckboxProps> = ({ class: classNames, variant = 'default', icon, inputProps, ...other }) => {
+	const showMsg = checkHasError(inputProps?.msg, inputProps?.touched);
+
+	const cssVariants = {
+		[`kol-checkbox--variant-${variant}`]: true,
+		[`kol-checkbox--checked`]: inputProps?.checked,
+		[`kol-checkbox--indeterminate`]: inputProps?.indeterminate,
+		['kol-checkbox--disabled']: Boolean(inputProps?.disabled),
+		['kol-checkbox--required']: Boolean(inputProps?.required),
+		['kol-checkbox--touched']: Boolean(inputProps?.touched),
+		[`kol-checkbox--${inputProps?.msg?.type || 'error'}`]: Boolean(showMsg),
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/label-has-associated-control
+		<label class={clsx('kol-checkbox', cssVariants, classNames)} {...other}>
+			<IconWrapperFc label="" icons={icon} />
+			<InputWrapperFc {...inputProps} />
+		</label>
+	);
+};
+export default CheckboxFc;
diff --git a/packages/components/src/functional-components/inputs/Checkbox/index.ts b/packages/components/src/functional-components/inputs/Checkbox/index.ts
new file mode 100644
index 0000000000..b077973e26
--- /dev/null
+++ b/packages/components/src/functional-components/inputs/Checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export * from './Checkbox';
diff --git a/packages/components/src/functional-components/inputs/Input/Input.tsx b/packages/components/src/functional-components/inputs/Input/Input.tsx
index a492ad1897..c0b41952f5 100644
--- a/packages/components/src/functional-components/inputs/Input/Input.tsx
+++ b/packages/components/src/functional-components/inputs/Input/Input.tsx
@@ -1,21 +1,39 @@
 import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';
 import type { JSXBase, VNode } from '@stencil/core/internal';
+import clsx from 'clsx';
+import { checkHasError, type InternMsgPropType } from '../../../schema';
 import { getDefaultProps } from '../_helpers/getDefaultProps';
 import type { DefaultInputProps } from '../_types';
 
 export type InputProps = DefaultInputProps<JSXBase.InputHTMLAttributes<HTMLInputElement>> & {
 	value?: string | number | string[];
+	touched?: boolean;
 	suggestions?: VNode;
 	spellcheck?: boolean;
+	msg?: InternMsgPropType;
 } & {
 	[key: `data-${string}`]: unknown;
 	[key: `aria-${string}`]: unknown;
 };
 
 const InputFc: FC<InputProps> = (props) => {
-	const { ariaDescribedBy, hideLabel, label, suggestions, value, ...other } = props;
+	const { class: classNames, msg, required, disabled, touched, readonly, ariaDescribedBy, hideLabel, label, suggestions, value, ...other } = props;
+
+	const showMsg = checkHasError(msg, touched);
+
+	const stateCssClasses = {
+		['kol-input--disabled']: Boolean(disabled),
+		['kol-input--required']: Boolean(required),
+		['kol-input--touched']: Boolean(touched),
+		['kol-input--readonly']: Boolean(readonly),
+		[`kol-input--${msg?.type || 'error'}`]: showMsg,
+	};
 
 	const inputProps: JSXBase.InputHTMLAttributes<HTMLInputElement> = {
+		class: clsx('kol-input', stateCssClasses, classNames),
+		required: required,
+		disabled: disabled,
+		readonly: readonly,
 		type: 'text',
 		list: suggestions ? `${other.id}-list` : undefined,
 		...getDefaultProps({ ariaDescribedBy, hideLabel, label }),
diff --git a/packages/components/src/functional-components/inputs/Input/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/inputs/Input/tests/__snapshots__/snapshot.test.tsx.snap
index 81c05f512c..0660c8b110 100644
--- a/packages/components/src/functional-components/inputs/Input/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/inputs/Input/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputFc should render and match snapshot 1`] = `<input autocapitalize="off" autocorrect="off" id="test" type="text" value="test">`;
+exports[`InputFc should render and match snapshot 1`] = `<input autocapitalize="off" autocorrect="off" class="kol-input" id="test" type="text" value="test">`;
diff --git a/packages/components/src/functional-components/inputs/NativeOption/NativeOption.tsx b/packages/components/src/functional-components/inputs/NativeOption/NativeOption.tsx
index c9909f9c20..82bcf11e80 100644
--- a/packages/components/src/functional-components/inputs/NativeOption/NativeOption.tsx
+++ b/packages/components/src/functional-components/inputs/NativeOption/NativeOption.tsx
@@ -1,23 +1,50 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
 import type { W3CInputValue } from '../../../schema';
+import clsx from 'clsx';
 
 export type NativeOptionProps = Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'> & {
 	selectedValue?: W3CInputValue | W3CInputValue[];
 	value: W3CInputValue;
 	label: W3CInputValue;
 	index?: string | number;
+	baseClassName?: 'kol-select' | 'kol-datalist';
 };
 
-const NativeOptionFc: FC<NativeOptionProps> = ({ index, selectedValue, selected, value, label, ...other }) => {
+const NativeOptionFc: FC<NativeOptionProps> = ({
+	baseClassName = 'kol-select',
+	class: classNames,
+	index,
+	selectedValue,
+	selected,
+	value,
+	label,
+	disabled,
+	...other
+}) => {
 	if (!selectedValue) {
 		selectedValue = [];
 	} else if (!Array.isArray(selectedValue)) {
 		selectedValue = [selectedValue];
 	}
 
+	const isSelected = selected || selectedValue.includes(value);
+
 	return (
-		<option selected={selected || selectedValue.includes(value)} value={index || value} {...other}>
+		<option
+			class={clsx(
+				`${baseClassName}__option`,
+				{
+					[`${baseClassName}__option--selected`]: isSelected,
+					[`${baseClassName}__option--disabled`]: disabled,
+				},
+				classNames,
+			)}
+			selected={isSelected}
+			disabled={disabled}
+			value={index || value}
+			{...other}
+		>
 			{label}
 		</option>
 	);
diff --git a/packages/components/src/functional-components/inputs/NativeOption/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/inputs/NativeOption/tests/__snapshots__/snapshot.test.tsx.snap
index 63921ec7d2..9da784e2d4 100644
--- a/packages/components/src/functional-components/inputs/NativeOption/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/inputs/NativeOption/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,43 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NativeOptionFc should render an option tag with the correct index as value and label 1`] = `
-<option value="-1">
+<option class="kol-select__option" value="-1">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should render an option tag with the correct value and label 1`] = `
-<option value="testValue">
+<option class="kol-select__option" value="testValue">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should render and match snapshot 1`] = `
-<option value="testValue">
+<option class="kol-select__option" value="testValue">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should set selected attribute correctly based on selected prop 1`] = `
-<option selected="" value="testValue">
+<option class="kol-select__option kol-select__option--selected" selected="" value="testValue">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should set selected attribute correctly based on selectedValue (with index as value) 1`] = `
-<option selected="" value="-1">
+<option class="kol-select__option kol-select__option--selected" selected="" value="-1">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should set selected attribute correctly based on selectedValue 1`] = `
-<option selected="" value="testValue">
+<option class="kol-select__option kol-select__option--selected" selected="" value="testValue">
   testLabel
 </option>
 `;
 
 exports[`NativeOptionFc should set selected attribute correctly based on selectedValue as number (with index as value) 1`] = `
-<option selected="" value="-1">
+<option class="kol-select__option kol-select__option--selected" selected="" value="-1">
   testLabel
 </option>
 `;
diff --git a/packages/components/src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx b/packages/components/src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx
index bde82ec3d2..969c301b45 100644
--- a/packages/components/src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx
+++ b/packages/components/src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx
@@ -1,4 +1,5 @@
 import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';
+import clsx from 'clsx';
 import type { SelectOption, W3CInputValue } from '../../../schema';
 import NativeOptionFc from '../NativeOption/NativeOption';
 import type { JSXBase } from '@stencil/core/internal';
@@ -11,9 +12,19 @@ export type NativeOptionListProps = {
 
 	OptionProps?: Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'>;
 	OptionGroupProps?: Omit<JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>, 'label'>;
+
+	baseClassName?: 'kol-select';
 };
 
-const NativeOptionListFc: FC<NativeOptionListProps> = ({ preKey, options, value: selectedValue, OptionProps = {}, OptionGroupProps = {} }) => {
+const NativeOptionListFc: FC<NativeOptionListProps> = ({
+	baseClassName,
+	preKey,
+	options,
+	disabled,
+	value: selectedValue,
+	OptionProps = {},
+	OptionGroupProps = {},
+}) => {
 	if (!options?.length) {
 		return null;
 	}
@@ -31,14 +42,27 @@ const NativeOptionListFc: FC<NativeOptionListProps> = ({ preKey, options, value:
 					const { label, ...other } = option;
 
 					return (
-						<optgroup key={key} {...OptionGroupProps} label={label?.toString()}>
-							<NativeOptionListFc OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} value={selectedValue} preKey={key} {...other} />
+						<optgroup
+							class={clsx(`${baseClassName}__optgroup`, { [`${baseClassName}__optgroup--disabled`]: disabled })}
+							key={key}
+							{...OptionGroupProps}
+							label={label?.toString()}
+							disabled={disabled}
+						>
+							<NativeOptionListFc
+								baseClassName={baseClassName}
+								OptionGroupProps={OptionGroupProps}
+								OptionProps={OptionProps}
+								value={selectedValue}
+								preKey={key}
+								{...other}
+							/>
 						</optgroup>
 					);
 				}
 
 				if ('value' in option) {
-					return <NativeOptionFc key={key} {...OptionProps} index={key} selectedValue={selectedValue} {...option} />;
+					return <NativeOptionFc key={key} baseClassName={baseClassName} {...OptionProps} index={key} selectedValue={selectedValue} {...option} />;
 				}
 
 				return null;
diff --git a/packages/components/src/functional-components/inputs/NativeOptionList/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/inputs/NativeOptionList/tests/__snapshots__/snapshot.test.tsx.snap
index 41ab1c90ef..b270b6a2ec 100644
--- a/packages/components/src/functional-components/inputs/NativeOptionList/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/inputs/NativeOptionList/tests/__snapshots__/snapshot.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`NativeOptionListFc should render and match snapshot 1`] = `
 <div id="jest-test">
-  <option value="-0">
+  <option class="kol-select__option" value="-0">
     Option 1
   </option>
 </div>
@@ -10,7 +10,7 @@ exports[`NativeOptionListFc should render and match snapshot 1`] = `
 
 exports[`NativeOptionListFc should render with a single option 1`] = `
 <div id="jest-test">
-  <option value="-0">
+  <option class="kol-select__option" value="-0">
     Option 1
   </option>
 </div>
@@ -18,10 +18,10 @@ exports[`NativeOptionListFc should render with a single option 1`] = `
 
 exports[`NativeOptionListFc should render with multiple options 1`] = `
 <div id="jest-test">
-  <option value="-0">
+  <option class="kol-select__option" value="-0">
     Option 1
   </option>
-  <option value="-1">
+  <option class="kol-select__option" value="-1">
     Option 2
   </option>
 </div>
@@ -29,10 +29,10 @@ exports[`NativeOptionListFc should render with multiple options 1`] = `
 
 exports[`NativeOptionListFc should render with multiple options with selected value 1`] = `
 <div id="jest-test">
-  <option value="-0">
+  <option class="kol-select__option" value="-0">
     Option 1
   </option>
-  <option selected="" value="-1">
+  <option class="kol-select__option kol-select__option--selected" selected="" value="-1">
     Option 2
   </option>
 </div>
@@ -40,11 +40,11 @@ exports[`NativeOptionListFc should render with multiple options with selected va
 
 exports[`NativeOptionListFc should render with nested option groups 1`] = `
 <div id="jest-test">
-  <optgroup label="Group 1">
-    <option value="-0-0">
+  <optgroup class="undefined__optgroup" label="Group 1">
+    <option class="kol-select__option" value="-0-0">
       Option 1
     </option>
-    <option value="-0-1">
+    <option class="kol-select__option" value="-0-1">
       Option 2
     </option>
   </optgroup>
@@ -53,11 +53,11 @@ exports[`NativeOptionListFc should render with nested option groups 1`] = `
 
 exports[`NativeOptionListFc should render with nested option groups with selected value 1`] = `
 <div id="jest-test">
-  <optgroup label="Group 1">
-    <option value="-0-0">
+  <optgroup class="undefined__optgroup" label="Group 1">
+    <option class="kol-select__option" value="-0-0">
       Option 1
     </option>
-    <option selected="" value="-0-1">
+    <option class="kol-select__option kol-select__option--selected" selected="" value="-0-1">
       Option 2
     </option>
   </optgroup>
diff --git a/packages/components/src/functional-components/inputs/NativeSelect/NativeSelect.tsx b/packages/components/src/functional-components/inputs/NativeSelect/NativeSelect.tsx
index b1881091a4..5714bfbcb9 100644
--- a/packages/components/src/functional-components/inputs/NativeSelect/NativeSelect.tsx
+++ b/packages/components/src/functional-components/inputs/NativeSelect/NativeSelect.tsx
@@ -1,24 +1,56 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
+import clsx from 'clsx';
 import { getDefaultProps } from '../_helpers/getDefaultProps';
 import type { DefaultInputProps } from '../_types';
 import NativeOptionListFc, { type NativeOptionListProps } from '../NativeOptionList';
+import { checkHasError, type InternMsgPropType } from '../../../schema';
 
 type SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
 
-export type SelectProps = DefaultInputProps<SelectAttributes> & NativeOptionListProps;
+export type SelectProps = DefaultInputProps<SelectAttributes> &
+	NativeOptionListProps & {
+		touched?: boolean;
+		msg?: InternMsgPropType;
+	};
 
 const NativeSelectFc: FC<SelectProps> = (props) => {
-	const { options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label, ...other } = props;
+	const {
+		class: classNames,
+		msg,
+		touched,
+		disabled,
+		required,
+		options,
+		value,
+		OptionProps,
+		OptionGroupProps,
+		ariaDescribedBy,
+		hideLabel,
+		label,
+		...other
+	} = props;
+
+	const showMsg = checkHasError(msg, touched);
+
+	const stateCssClasses = {
+		['kol-select--disabled']: Boolean(disabled),
+		['kol-select--required']: Boolean(required),
+		['kol-select--touched']: Boolean(touched),
+		[`kol-select--${msg?.type || 'error'}`]: showMsg,
+	};
 
 	const inputProps: SelectAttributes = {
+		class: clsx('kol-select', stateCssClasses, classNames),
+		required: required,
+		disabled: disabled,
 		...getDefaultProps({ ariaDescribedBy, hideLabel, label }),
 		...other,
 	};
 
 	return (
 		<select {...inputProps}>
-			<NativeOptionListFc options={options} value={value} OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} />
+			<NativeOptionListFc baseClassName="kol-select" options={options} value={value} OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} />
 		</select>
 	);
 };
diff --git a/packages/components/src/functional-components/inputs/NativeSelect/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/inputs/NativeSelect/tests/__snapshots__/snapshot.test.tsx.snap
index 2003e8c824..b3d3960c4c 100644
--- a/packages/components/src/functional-components/inputs/NativeSelect/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/inputs/NativeSelect/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NativeSelectFc should render and match snapshot 1`] = `<select autocapitalize="off" autocorrect="off" id="test"></select>`;
+exports[`NativeSelectFc should render and match snapshot 1`] = `<select autocapitalize="off" autocorrect="off" class="kol-select" id="test"></select>`;
diff --git a/packages/components/src/functional-components/inputs/TextArea/TextArea.tsx b/packages/components/src/functional-components/inputs/TextArea/TextArea.tsx
index 229e631a04..397a1b16bf 100644
--- a/packages/components/src/functional-components/inputs/TextArea/TextArea.tsx
+++ b/packages/components/src/functional-components/inputs/TextArea/TextArea.tsx
@@ -1,16 +1,34 @@
 import { h, type FunctionalComponent as FC } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
+import clsx from 'clsx';
 import { getDefaultProps } from '../_helpers/getDefaultProps';
 import type { DefaultInputProps } from '../_types';
+import { checkHasError, type InternMsgPropType } from '../../../schema';
 
 export type TextAreaProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {
 	value: string;
+	touched?: boolean;
+	msg?: InternMsgPropType;
 };
 
 const TextAreaFc: FC<TextAreaProps> = (props) => {
-	const { ariaDescribedBy, hideLabel, label, ...other } = props;
+	const { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;
+
+	const showMsg = checkHasError(msg, touched);
+
+	const stateCssClasses = {
+		['kol-textarea--disabled']: Boolean(disabled),
+		['kol-textarea--required']: Boolean(required),
+		['kol-textarea--touched']: Boolean(touched),
+		['kol-textarea--readonly']: Boolean(readonly),
+		[`kol-textarea--${msg?.type || 'error'}`]: showMsg,
+	};
 
 	const inputProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {
+		class: clsx('kol-textarea', stateCssClasses, classNames),
+		required: required,
+		disabled: disabled,
+		readonly: readonly,
 		...getDefaultProps({ ariaDescribedBy, hideLabel, label }),
 		...other,
 	};
diff --git a/packages/components/src/functional-components/inputs/TextArea/tests/__snapshots__/snapshot.test.tsx.snap b/packages/components/src/functional-components/inputs/TextArea/tests/__snapshots__/snapshot.test.tsx.snap
index 5a71364602..2d7fa6a0c7 100644
--- a/packages/components/src/functional-components/inputs/TextArea/tests/__snapshots__/snapshot.test.tsx.snap
+++ b/packages/components/src/functional-components/inputs/TextArea/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextAreaFc should render and match snapshot 1`] = `<textarea autocapitalize="off" autocorrect="off" id="test" value="test"></textarea>`;
+exports[`TextAreaFc should render and match snapshot 1`] = `<textarea autocapitalize="off" autocorrect="off" class="kol-textarea" id="test" value="test"></textarea>`;
diff --git a/packages/components/src/schema/props/msg.ts b/packages/components/src/schema/props/msg.ts
index 306d39be42..f2ea420299 100644
--- a/packages/components/src/schema/props/msg.ts
+++ b/packages/components/src/schema/props/msg.ts
@@ -63,3 +63,23 @@ export function convertMsgToInternMsg(msg?: MsgPropType): InternMsgPropType | un
 
 	return transformObjectProperties(msg);
 }
+
+export function checkHasError(msg?: InternMsgPropType, touched?: boolean): boolean {
+	/**
+	 * We support 5 types of messages:
+	 * - default
+	 * - info
+	 * - success
+	 * - warning
+	 * - error
+	 *
+	 * The message is shown if:
+	 * - the message text is not an empty string
+	 * - we show only one message at a time
+	 * - by error messages the input must be touched
+	 */
+	const hasValidMsg = Boolean(msg?.description && msg?.description.length > 0);
+	const showMsg = hasValidMsg && (touched === true || msg?.type !== 'error');
+
+	return showMsg;
+}
diff --git a/packages/components/src/components/style.scss b/packages/components/src/styles/_global.scss
similarity index 94%
rename from packages/components/src/components/style.scss
rename to packages/components/src/styles/_global.scss
index 2ed0f629b1..357d548581 100644
--- a/packages/components/src/components/style.scss
+++ b/packages/components/src/styles/_global.scss
@@ -1,5 +1,5 @@
-@import './a11y';
-@import './preset';
+@import '../components/a11y';
+@import '../components/preset';
 
 @layer kol-global {
 	:host {
diff --git a/packages/components/src/components/@shared/_kol-alert-mixin.scss b/packages/components/src/styles/_kol-alert-mixin.scss
similarity index 66%
rename from packages/components/src/components/@shared/_kol-alert-mixin.scss
rename to packages/components/src/styles/_kol-alert-mixin.scss
index d4aaacd1db..43a127b17f 100644
--- a/packages/components/src/components/@shared/_kol-alert-mixin.scss
+++ b/packages/components/src/styles/_kol-alert-mixin.scss
@@ -1,8 +1,8 @@
-@import '../@shared/mixins';
-@import '../host-display-block';
-@import '../tooltip/style.scss';
+@import '../components/@shared/mixins';
+@import '../components/host-display-block';
+@import '../components/tooltip/style';
 
-@mixin kol-alert-styles {
+@mixin kol-alert {
 	@layer kol-component {
 		.kol-alert {
 			display: grid;
diff --git a/packages/components/src/styles/_kol-field-control-mixin.scss b/packages/components/src/styles/_kol-field-control-mixin.scss
new file mode 100644
index 0000000000..a5834831ae
--- /dev/null
+++ b/packages/components/src/styles/_kol-field-control-mixin.scss
@@ -0,0 +1,94 @@
+@mixin kol-field-control {
+	@layer kol-component {
+		.kol-field-control {
+			$base: &;
+
+			min-height: var(--a11y-min-size);
+			display: grid;
+			grid-template-columns: auto 1fr;
+			grid-template-areas: 'input label';
+			grid-template-rows: auto;
+
+			align-items: center;
+			justify-content: left;
+
+			&:has(&__hint) {
+				grid-template-columns: auto 1fr;
+				grid-template-areas: 'input label' 'hint hint';
+				grid-template-rows: auto auto;
+			}
+
+			&--label-align-left:not(&--hide-label) {
+				&:has(.kol-field-control__hint) {
+					grid-template-columns: 1fr auto;
+					grid-template-areas: 'label input' 'hint hint';
+					grid-template-rows: auto auto;
+				}
+
+				grid-template-columns: 1fr auto;
+				grid-template-areas: 'label input';
+				grid-template-rows: auto;
+			}
+
+			&__input {
+				grid-area: input;
+				display: flex;
+				min-height: var(--a11y-min-size);
+				align-items: center;
+			}
+
+			&__label {
+				align-items: center;
+				cursor: pointer;
+				display: flex;
+				flex-grow: 1;
+				grid-area: label;
+				min-height: var(--a11y-min-size);
+
+				&--visually-hidden {
+					height: 0;
+					margin: 0;
+					padding: 0;
+					visibility: hidden;
+				}
+
+				&-text {
+					&::after {
+						content: '';
+					}
+				}
+			}
+
+			&__tooltip {
+				.span-label::after {
+					content: '';
+				}
+			}
+
+			&__hint {
+				grid-area: hint;
+			}
+
+			&--disabled & {
+				&__label {
+					cursor: not-allowed;
+					opacity: 0.5;
+				}
+			}
+
+			&--required & {
+				&__label-text {
+					&::after {
+						content: '*';
+					}
+				}
+
+				&__tooltip {
+					.span-label::after {
+						content: '*';
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/components/src/styles/_kol-form-field-mixin.scss b/packages/components/src/styles/_kol-form-field-mixin.scss
new file mode 100644
index 0000000000..de27323f28
--- /dev/null
+++ b/packages/components/src/styles/_kol-form-field-mixin.scss
@@ -0,0 +1,38 @@
+@mixin kol-form-field {
+	@layer kol-component {
+		.kol-form-field {
+			$root: &;
+
+			display: grid;
+			font-size: rem(16);
+
+			&__label {
+				#{$root}:not(#{$root}--disabled) & {
+					cursor: pointer;
+				}
+
+				#{$root}--disabled & {
+					opacity: 0.5;
+				}
+			}
+
+			&__label-text::after {
+				#{$root}--required & {
+					content: '*';
+				}
+			}
+
+			&__hint {
+				#{$root}--disabled & {
+					opacity: 0.5;
+				}
+			}
+
+			&__tooltip .span-label::after {
+				#{$root}--required & {
+					content: '*';
+				}
+			}
+		}
+	}
+}
diff --git a/packages/components/src/styles/_kol-input-container-mixin.scss b/packages/components/src/styles/_kol-input-container-mixin.scss
new file mode 100644
index 0000000000..db315e2042
--- /dev/null
+++ b/packages/components/src/styles/_kol-input-container-mixin.scss
@@ -0,0 +1,39 @@
+@mixin kol-input-container {
+	@layer kol-component {
+		.kol-input-container {
+			$root: &;
+
+			align-items: center;
+			background-color: white;
+			cursor: pointer;
+			display: grid;
+			grid-template-columns: 1fr;
+			min-height: var(--a11y-min-size);
+			min-width: var(--a11y-min-size);
+			width: 100%;
+
+			&:has(> #{$root}__adornment--start) {
+				grid-template-columns: auto 1fr;
+			}
+
+			&:has(> #{$root}__adornment--end) {
+				grid-template-columns: 1fr auto;
+			}
+
+			&:has(> #{$root}__adornment--start):has(> #{$root}__adornment--end) {
+				grid-template-columns: auto 1fr auto;
+			}
+
+			&__adornment {
+				display: flex;
+				align-items: center;
+
+				.kol-icon {
+					display: grid;
+					height: var(--a11y-min-size);
+					place-items: center;
+				}
+			}
+		}
+	}
+}
diff --git a/packages/components/src/styles/_kol-input-mixin.scss b/packages/components/src/styles/_kol-input-mixin.scss
new file mode 100644
index 0000000000..8f52591072
--- /dev/null
+++ b/packages/components/src/styles/_kol-input-mixin.scss
@@ -0,0 +1,14 @@
+@mixin kol-input {
+	@layer kol-component {
+		.kol-input {
+			font-size: rem(16);
+			height: rem(44);
+			min-width: var(--a11y-min-size);
+			width: 100%;
+
+			&:focus {
+				outline: none;
+			}
+		}
+	}
+}
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index e9964e3302..9a24e6b86e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png
index cb00c5ad7f..cad7ebe384 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
index 9ee5a8ed5d..b0ee39f640 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
index 449fd16e09..2dc0455632 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
index cc9c38fa55..1af4ffc3b6 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
index 47798cc627..6aa7854538 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index c7ed46583d..1ec851c1bb 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png
index a234862d60..9ae4029425 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index d45a331704..0acb1174e2 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png
index 37a3fb7b51..05feff3c2e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index 39743d774c..c9e8098347 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png
index fcac7bee2d..8fe94790c1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 6fedc4d888..aea5ab850b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png
index 5abb0f7c3d..e875ca43f5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index bede885889..aa2841b0c4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
index cc4a1e0378..4abe594459 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index 093640681d..10ffa94c51 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png
index fc59476516..f207d953e5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 4d903bd966..d4c60a2220 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png
index 82e9a2014d..7f9cda5e4e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index e1e907236e..ec1e84e313 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png
index 298a178359..26fb9a0956 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index e3849f31e3..bc37816217 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png
index aae0672969..2cdf792e82 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png
index 20784f90dd..ceaada1820 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
index 98122f4618..902def66a8 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index a9895a945a..f25f4e280f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png
index 77956a50f6..1b7f69883b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png
index 6b073e9a05..442126a88f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png
index 098f1f3e3a..9a54b7f338 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png
index 42e51835db..c279a265b7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png
index 6684ec2aa0..c52cd92b1c 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index e4fb562eb2..3b41618c4d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
index 266748a02e..1832cb31bd 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index c56b334729..ec75d3fa19 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png
index a3ac9ab69f..3f27d8b956 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
index 9777f72ee4..f6427d232d 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
index a445de994d..547bbb8adf 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png
index 223ee39a8d..199845a9b5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png
index 502c8ef1d4..69bd65e727 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png
index d3cefa9e22..1ee2f5338c 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png
index ffc6b451b2..89d4c16e6f 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png
index 2450cd42d7..2e937bffd5 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png
index c7283474c5..2c1cf57dc7 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png
index 17c21ef58f..8dd2f3701a 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png
index 25135fef21..4c05e3e49b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png
index b15bfffc57..2f3e1b99b0 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png
index 63484ce173..0c5fb2e683 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png
index d7e4fa8d89..64f401e94e 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png
index 076bb2049e..3efbad28ec 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png
index cf8987b3fe..04f6c96fc1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png
index f2967e8cd9..cde90440bd 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png
index 3121dc7b56..7d5aa2dd87 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png
index 240cec2cf1..fa02f8f121 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png
index df8953c294..6c9e02f79b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png
index e2ef581702..513cbc5b3b 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
index be8e3a4d53..d8718070f4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
index 93511eb2eb..72b10ad3a4 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png
index a80eda48a8..52b86aec05 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index f5450104d7..f92d8fb2f1 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png
index 802a71abee..843e27f7e3 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 8834a59869..90fa6d2bf8 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png
index 500fa9582e..ec13932b23 100644
Binary files a/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png and b/packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png
index e9964e3302..9a24e6b86e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png
index cb00c5ad7f..cad7ebe384 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-combobox-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png
index 9ee5a8ed5d..b0ee39f640 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-bottom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png
index 449fd16e09..2dc0455632 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-drawer-basic-align-right-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png
index cc9c38fa55..1af4ffc3b6 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png
index 47798cc627..6aa7854538 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-handout-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png
index c7ed46583d..1ec851c1bb 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png
index a234862d60..9ae4029425 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png
index d45a331704..0acb1174e2 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png
index 37a3fb7b51..05feff3c2e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-button-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png
index 39743d774c..c9e8098347 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png
index fcac7bee2d..8fe94790c1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-checkbox-switch-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png
index 6fedc4d888..aea5ab850b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png
index 5abb0f7c3d..e875ca43f5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-color-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png
index bede885889..aa2841b0c4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png
index cc4a1e0378..4abe594459 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-date-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png
index 093640681d..10ffa94c51 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png
index fc59476516..f207d953e5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-email-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png
index 4d903bd966..d4c60a2220 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png
index 82e9a2014d..7f9cda5e4e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-file-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png
index e1e907236e..ec1e84e313 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png
index 298a178359..26fb9a0956 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-number-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png
index e3849f31e3..bc37816217 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png
index aae0672969..2cdf792e82 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png
index 20784f90dd..ceaada1820 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png
index 98122f4618..902def66a8 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-password-show-password-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png
index a9895a945a..f25f4e280f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png
index 77956a50f6..1b7f69883b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png
index 6b073e9a05..442126a88f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png
index 098f1f3e3a..9a54b7f338 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-horizontal-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png
index 42e51835db..c279a265b7 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png
index 6684ec2aa0..c52cd92b1c 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-object-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png
index e4fb562eb2..3b41618c4d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png
index 266748a02e..1832cb31bd 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-range-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png
index c56b334729..ec75d3fa19 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png
index a3ac9ab69f..3f27d8b956 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-input-text-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png
index 9777f72ee4..f6427d232d 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png
index a445de994d..547bbb8adf 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-disabled-interactive-scenario-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png
index 223ee39a8d..199845a9b5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png
index 502c8ef1d4..69bd65e727 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-combobox-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png
index d3cefa9e22..1ee2f5338c 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png
index ffc6b451b2..89d4c16e6f 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputCheckbox-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png
index 2450cd42d7..2e937bffd5 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png
index c7283474c5..2c1cf57dc7 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputEmail-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png
index 17c21ef58f..8dd2f3701a 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png
index 25135fef21..4c05e3e49b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputNumber-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png
index b15bfffc57..2f3e1b99b0 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png
index 63484ce173..0c5fb2e683 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputPassword-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png
index d7e4fa8d89..64f401e94e 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png
index 076bb2049e..3efbad28ec 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRadio-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png
index cf8987b3fe..04f6c96fc1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png
index f2967e8cd9..cde90440bd 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputRange-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png
index 3121dc7b56..7d5aa2dd87 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png
index 240cec2cf1..fa02f8f121 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-inputText-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png
index df8953c294..6c9e02f79b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png
index e2ef581702..513cbc5b3b 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-focus-elements-component-singleSelect-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png
index be8e3a4d53..d8718070f4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png
index 93511eb2eb..72b10ad3a4 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-scenarios-static-form-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png
index a80eda48a8..52b86aec05 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png
index f5450104d7..f92d8fb2f1 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png
index 802a71abee..843e27f7e3 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-single-select-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png
index 8834a59869..90fa6d2bf8 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-firefox-linux.png differ
diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png
index 500fa9582e..ec13932b23 100644
Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-textarea-basic-zoom-firefox-linux.png differ
diff --git a/packages/themes/default/src/@shared/input-core.scss b/packages/themes/default/src/@shared/input-core.scss
index 6a378e858e..2a40b0910a 100644
--- a/packages/themes/default/src/@shared/input-core.scss
+++ b/packages/themes/default/src/@shared/input-core.scss
@@ -1,97 +1,15 @@
-@import '../mixins/rem';
 @import '../mixins/alert-wc';
-@import '../mixins/input-error';
-@import '../mixins/typography';
+@import '../mixins/form-field';
+@import '../mixins/form-field-order';
+@import '../mixins/input';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
 
-	.kol-input {
-		gap: rem(4);
-
-		&.disabled .input {
-			background-color: var(--color-mute);
-			border-color: var(--color-mute-variant);
-			color: var(--color-text);
-		}
-
-		&.error:not(.hidden-error) {
-			@include input-error;
-		}
-
-		.kol-alert {
-			order: 1;
-		}
-
-		label {
-			order: 2;
-		}
-
-		.input {
-			order: 3;
-
-			background-color: var(--color-light);
-			border-color: var(--color-subtle);
-			border-radius: var(--border-radius);
-			border-style: solid;
-			border-width: rem(2);
-			padding: 0 rem(8);
-			gap: rem(6);
-
-			.inputAdornment-start,
-			.inputAdornment-end {
-				display: flex;
-				align-items: center;
-				min-width: rem(8);
-
-				.kol-icon {
-					min-width: rem(16);
-					display: flex;
-					justify-content: center;
-				}
-			}
-
-			.inputAdornment-start {
-				> .kol-icon {
-					margin-left: rem(8);
-				}
-			}
-
-			.inputAdornment-end {
-				> .kol-icon {
-					margin-right: rem(8);
-				}
-			}
-
-			input {
-				border: none;
-
-				&::placeholder {
-					color: var(--color-subtle);
-				}
-
-				&:disabled {
-					cursor: not-allowed;
-				}
-			}
-		}
-
-		.hint {
-			order: 4;
-			@include kol-typography-hint;
-		}
-	}
-
-	:not(.disabled) .input:hover {
-		border-color: var(--color-primary);
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
 	@include kol-alert-theme;
+	@include kol-form-field-theme;
+	@include kol-form-field-order-theme;
+	@include kol-input-theme;
 }
diff --git a/packages/themes/default/src/@shared/input-text.scss b/packages/themes/default/src/@shared/input-text.scss
new file mode 100644
index 0000000000..fc0eecdda0
--- /dev/null
+++ b/packages/themes/default/src/@shared/input-text.scss
@@ -0,0 +1,16 @@
+@import './input-core';
+
+@layer kol-theme-component {
+	.kol-input {
+		background-color: transparent;
+		border: none;
+
+		&::placeholder {
+			color: var(--color-subtle);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+}
diff --git a/packages/themes/default/src/components/combobox.scss b/packages/themes/default/src/components/combobox.scss
index 6d704542d3..a667407133 100644
--- a/packages/themes/default/src/components/combobox.scss
+++ b/packages/themes/default/src/components/combobox.scss
@@ -83,7 +83,7 @@ $visible-options: 5;
 		gap: rem(4);
 	}
 
-	.kol-input .error:not(.hidden-error) {
+	.kol-input:not(.hidden-error) .kol-alert {
 		order: 1;
 	}
 
diff --git a/packages/themes/default/src/components/input-checkbox.scss b/packages/themes/default/src/components/input-checkbox.scss
index 3f0c70a364..7cbd78af01 100644
--- a/packages/themes/default/src/components/input-checkbox.scss
+++ b/packages/themes/default/src/components/input-checkbox.scss
@@ -1,309 +1,296 @@
 @import '../mixins/rem';
 @import '../mixins/focus-outline';
 @import '../mixins/alert-wc';
-@import '../mixins/input-error';
 @import '../mixins/typography';
+@import '../@shared/input-core';
+@import '../mixins/field-control';
 
 @layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.kol-input {
-		display: grid;
-		align-items: center;
-		justify-items: left;
-		width: 100%;
-		min-height: var(--a11y-min-size);
-		gap: rem(6.4);
-	}
+	.kol-form-field {
+		$root: &;
 
-	.checkbox-container {
-		position: relative;
-		justify-content: center;
-	}
-
-	.input,
-	.checkbox-container {
-		min-width: initial;
-		width: initial;
-	}
-
-	.kol-input.default {
-		grid-template-columns: auto 1fr;
-	}
-
-	.kol-input.default[data-label-align='left']:not(.hide-label) {
-		grid-template-columns: 1fr auto;
+		&--disabled {
+			#{$root}__input {
+				outline: none;
+				cursor: not-allowed;
+			}
 
-		.checkbox-container {
-			justify-content: center;
+			#{$root}__label {
+				cursor: not-allowed;
+			}
 		}
 	}
 
-	.kol-input.switch {
-		grid-template-columns: rem(56) auto;
-	}
-
-	.kol-input.switch[data-label-align='left']:not(.hide-label) {
-		grid-template-columns: auto rem(56);
-	}
+	@include kol-field-control-theme;
 
-	.kol-input.button {
-		gap: rem(6.4) rem(1);
-	}
-
-	.kol-input > div.input {
-		display: flex;
-		min-height: var(--a11y-min-size);
-		order: 2;
+	.kol-field-control {
+		gap: rem(6.4);
 	}
 
-	.kol-input > div.input input {
-		margin: 0;
-	}
+	.kol-checkbox {
+		.kol-input {
+			@include kol-typography-body;
+			cursor: pointer;
+			order: 1;
+			width: 100%;
+			border-color: var(--color-subtle);
+			border-width: rem(2);
+			border-style: solid;
+			border-radius: var(--border-radius);
+			appearance: none;
+			background-color: white;
+			transition: 0.5s;
+			margin: 0;
+
+			&:checked,
+			&:indeterminate {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+			}
 
-	kol-input > label {
-		order: 3;
-	}
+			&:disabled {
+				cursor: not-allowed;
+			}
 
-	.disabled .input-label,
-	.disabled .checkbox-container {
-		cursor: not-allowed;
-	}
+			&:focus {
+				@include focus-outline;
+			}
 
-	.kol-input > .kol-alert.error {
-		order: 1;
-		padding-top: calc(var(--spacing) / 2);
-		grid-column: span 2 / auto;
-	}
+			&:focus:hover {
+				box-shadow: none;
+			}
 
-	.kol-input.error:not(.hidden-error) {
-		@include input-error;
+			&:active {
+				box-shadow: none;
+			}
 
-		input:focus,
-		select:focus,
-		textarea:focus {
-			outline-color: var(--color-danger);
+			&:hover {
+				border-color: var(--color-primary);
+				box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
+			}
 		}
-	}
-
-	input {
-		cursor: pointer;
-		order: 1;
-		width: 100%;
-		border-color: var(--color-subtle);
-		border-width: rem(2);
-		border-style: solid;
-		border-radius: var(--border-radius);
-		@include kol-typography-body;
-	}
-
-	input:hover {
-		border-color: var(--color-primary);
-		box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
-	}
 
-	input:focus:hover {
-		box-shadow: none;
-	}
-
-	input:active {
-		box-shadow: none;
-	}
-
-	.kol-alert {
-		@include kol-alert;
-	}
-
-	/* CHECKBOX */
-	.kol-input label span {
-		margin-top: rem(2);
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input input[type='checkbox'] {
-		appearance: none;
-		background-color: white;
-		cursor: pointer;
-		transition: 0.5s;
-		margin: 0;
-	}
-
-	.kol-input input[type='checkbox']:checked {
-		background-color: var(--color-primary);
-		border-color: var(--color-primary);
-	}
-
-	.kol-input.default input[type='checkbox'] {
-		border-radius: var(--border-radius);
-		height: calc(6 * rem(4));
-		min-width: calc(6 * rem(4));
-		width: calc(6 * rem(4));
+		&.kol-checkbox--disabled {
+			opacity: 0.5;
+		}
 	}
 
-	.kol-input.default input[type='checkbox']:indeterminate {
-		background-color: var(--color-primary);
-	}
+	.kol-checkbox--variant-default {
+		width: initial;
+		min-width: initial;
 
-	.kol-input.default .icon {
-		color: var(--color-light);
-		display: flex;
-	}
+		.kol-input {
+			border-radius: var(--border-radius);
+			height: calc(6 * rem(4));
+			min-width: calc(6 * rem(4));
+			width: calc(6 * rem(4));
+		}
 
-	.kol-input.switch input[type='checkbox'] {
-		background-color: var(--color-subtle);
-		border-radius: 1.25em;
-		border-width: 0;
-		display: block;
-		height: 1.5em;
-		min-width: 3.5em;
-		position: relative;
-		width: 3.5em;
-		/* Visible with forced colors  */
-		outline: transparent solid rem(1);
+		.kol-icon {
+			color: var(--color-light);
+		}
 	}
 
-	.kol-input.switch input[type='checkbox']:before {
-		width: 1.25em;
-		height: 1.25em;
-		left: calc(0.25em - rem(2));
-		top: calc(0.25em - rem(2));
-		border-radius: 1.25em;
-		background-color: white;
-		position: absolute;
-	}
+	.kol-checkbox--variant-switch {
+		.kol-icon {
+			width: 1.25em;
+			height: 1.25em;
+			left: rem(2);
+		}
 
-	.kol-input.switch input[type='checkbox']:checked {
-		background-color: var(--color-primary);
-	}
+		.kol-input {
+			background-color: var(--color-subtle);
+			border-radius: 1.25em;
+			border-width: 0;
+			display: block;
+			height: 1.5em;
+			min-width: 3.5em;
+			position: relative;
+			width: 3.5em;
+			/* Visible with forced colors  */
+			outline: transparent solid rem(1);
+
+			&:focus {
+				@include switch-outline;
+			}
 
-	.kol-input.switch input[type='checkbox']:checked:before {
-		transform: translateX(2em);
-	}
+			&:before {
+				width: 1.25em;
+				height: 1.25em;
+				left: calc(0.25em - rem(2));
+				top: calc(0.25em - rem(2));
+				border-radius: 1.25em;
+				background-color: white;
+				position: absolute;
+			}
 
-	.kol-input.switch input[type='checkbox']:indeterminate:before {
-		transform: translateX(1em);
-	}
+			&:checked {
+				background-color: var(--color-primary);
+			}
 
-	.kol-input input[type='checkbox']:focus {
-		@include switch-outline;
-	}
+			&:checked::before {
+				transform: translateX(2em);
+			}
 
-	.switch {
-		& .icon {
-			width: 1.25em;
-			height: 1.25em;
-			left: rem(2);
+			&:indeterminate::before {
+				transform: translateX(1em);
+			}
 		}
 
-		&.checked .icon {
+		&.kol-checkbox--checked .kol-icon {
 			transform: translate(2em, -50%);
 		}
 
-		&.indeterminate .icon {
+		&.kol-checkbox--indeterminate .kol-icon {
 			transform: translate(1em, -50%);
 		}
 	}
 
-	.button {
-		.input {
-			border-top-width: rem(1);
-			border-left-width: rem(1);
-			border-bottom-width: rem(1);
+	.kol-input-checkbox__field-control {
+		$root: &;
 
-			border-top-style: solid;
-			border-left-style: solid;
-			border-bottom-style: solid;
-		}
+		&--variant-button {
+			gap: unset;
 
-		&.hide-label .input {
-			border-right-width: rem(1);
-			border-right-style: solid;
-		}
+			& .kol-field-control {
+				&__input,
+				&__label {
+					border-color: var(--color-primary);
+					background-color: var(--color-light);
+					color: var(--color-primary);
+				}
 
-		.input-label {
-			border-top-width: rem(1);
-			border-right-width: rem(1);
-			border-bottom-width: rem(1);
+				&__input {
+					height: 100%;
+					border-width: rem(1) 0 rem(1) rem(1);
+					border-style: solid none solid solid;
+					border-radius: var(--border-radius) 0 0 var(--border-radius);
+				}
 
-			border-top-style: solid;
-			border-right-style: solid;
-			border-bottom-style: solid;
+				&__label {
+					border-width: rem(1) rem(1) rem(1) 0;
+					border-style: solid solid solid none;
+					border-radius: 0 var(--border-radius) var(--border-radius) 0;
 
-			justify-self: stretch;
-			align-self: stretch;
-			display: flex;
+					justify-self: stretch;
+					align-self: stretch;
+					display: flex;
 
-			padding-right: rem(16);
+					padding-right: rem(16);
 
-			.input-label-span {
-				margin: auto auto;
-				font-weight: 700;
+					&-text {
+						margin: auto auto;
+						font-weight: 700;
+					}
+				}
 			}
-		}
 
-		&:focus-within {
-			@include focus-outline;
-		}
-
-		.input,
-		.input-label {
-			border-color: var(--color-primary);
-			background-color: var(--color-light);
-			color: var(--color-primary);
-		}
-
-		&.indeterminate {
-			.input,
-			.input-label {
-				border-color: var(--color-primary);
-				background-color: var(--color-mute);
-				color: var(--color-primary);
+			&.kol-input-checkbox__field-control {
+				&--indeterminate {
+					& .kol-field-control {
+						&__input,
+						&__label {
+							border-color: var(--color-primary);
+							background-color: var(--color-mute);
+							color: var(--color-primary);
+						}
+					}
+				}
+
+				&--checked {
+					& .kol-field-control {
+						&__input,
+						&__label {
+							border-color: var(--color-primary);
+							background-color: var(--color-primary);
+							color: var(--color-light);
+						}
+					}
+				}
 			}
-		}
 
-		&.checked {
-			.input,
-			.input-label {
-				border-color: var(--color-primary);
-				background-color: var(--color-primary);
-				color: var(--color-light);
+			&:is(:active, :hover):not(.kol-field-control--disabled) {
+				.kol-field-control {
+					&__input,
+					&__label {
+						background-color: var(--color-primary-variant);
+						border-color: var(--color-primary-variant);
+						color: var(--color-light);
+						box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
+					}
+				}
+
+				&:not(.kol-field-control--hide-label) {
+					.kol-field-control {
+						&__label {
+							clip-path: inset(rem(-10) rem(-10) rem(-10) 0);
+						}
+
+						&__input {
+							clip-path: inset(rem(-10) 0 rem(-10) rem(-10));
+						}
+					}
+				}
 			}
-		}
 
-		&:is(:active, :hover):not(.disabled) {
-			.input,
-			.input-label {
-				background-color: var(--color-primary-variant);
-				border-color: var(--color-primary-variant);
-				color: var(--color-light);
+			&:focus-within {
+				@include focus-outline;
 			}
-		}
-
-		&.disabled .input {
-			opacity: 0.5;
-			outline: none;
-		}
-	}
-
-	.button[data-label-align='left']:not(.hide-label) {
-		column-gap: 0;
 
-		.input {
-			border-style: solid;
-			border-width: rem(1) rem(1) rem(1) 0;
-		}
-
-		.input-label {
-			border-style: solid;
-			border-width: rem(1) 0 rem(1) rem(1);
+			&.kol-field-control {
+				&--label-align-left {
+					.kol-field-control {
+						&__input {
+							border-width: rem(1) rem(1) rem(1) 0;
+							border-style: solid solid solid none;
+							border-radius: 0 var(--border-radius) var(--border-radius) 0;
+						}
+
+						&__label {
+							border-width: rem(1) 0 rem(1) rem(1);
+							border-style: solid none solid solid;
+							border-radius: var(--border-radius) 0 0 var(--border-radius);
+						}
+					}
+
+					&:is(:active, :hover):not(.kol-field-control--disabled) {
+						&:not(.kol-field-control--hide-label) {
+							.kol-field-control {
+								&__label {
+									clip-path: inset(rem(-10) 0 rem(-10) rem(-10));
+								}
+
+								&__input {
+									clip-path: inset(rem(-10) rem(-10) rem(-10) 0);
+								}
+							}
+						}
+					}
+				}
+
+				&--hide-label {
+					.kol-field-control {
+						&__input {
+							border-width: rem(1);
+							border-style: solid;
+							border-radius: var(--border-radius);
+						}
+					}
+				}
+
+				&--disabled {
+					.kol-field-control {
+						&__input {
+							opacity: 0.5;
+							outline: none;
+							cursor: not-allowed;
+						}
+						&__label {
+							cursor: not-allowed;
+						}
+					}
+				}
+			}
 		}
 	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/default/src/components/input-color.scss b/packages/themes/default/src/components/input-color.scss
index 6e4ad65795..9d35948393 100644
--- a/packages/themes/default/src/components/input-color.scss
+++ b/packages/themes/default/src/components/input-color.scss
@@ -1,13 +1 @@
-@import '../@shared/input-core';
-@import '../mixins/rem';
-
-@layer kol-theme-component {
-	input[type='color'] {
-		border: none;
-		min-height: rem(40);
-	}
-
-	input[type='color'] {
-		background-color: transparent;
-	}
-}
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/input-date.scss b/packages/themes/default/src/components/input-date.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/default/src/components/input-date.scss
+++ b/packages/themes/default/src/components/input-date.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/input-email.scss b/packages/themes/default/src/components/input-email.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/default/src/components/input-email.scss
+++ b/packages/themes/default/src/components/input-email.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/input-file.scss b/packages/themes/default/src/components/input-file.scss
index 41bbc0e129..542024cc7a 100644
--- a/packages/themes/default/src/components/input-file.scss
+++ b/packages/themes/default/src/components/input-file.scss
@@ -1,16 +1,13 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.kol-input .input input[type='file'] {
-		padding-top: calc(0.5em + rem(2));
-	}
-
-	.kol-input-file .input {
+	.kol-input-container {
 		gap: initial;
 	}
 
-	input[type='file'] {
+	.kol-input {
+		padding-top: calc(0.5em + rem(2));
 		background-color: transparent;
 	}
 }
diff --git a/packages/themes/default/src/components/input-number.scss b/packages/themes/default/src/components/input-number.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/default/src/components/input-number.scss
+++ b/packages/themes/default/src/components/input-number.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/input-password.scss b/packages/themes/default/src/components/input-password.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/default/src/components/input-password.scss
+++ b/packages/themes/default/src/components/input-password.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/input-radio.scss b/packages/themes/default/src/components/input-radio.scss
index b29781300b..4b89cde08a 100644
--- a/packages/themes/default/src/components/input-radio.scss
+++ b/packages/themes/default/src/components/input-radio.scss
@@ -1,169 +1,98 @@
 @import '../mixins/rem';
 @import '../mixins/alert-wc';
-@import '../mixins/input-error';
 @import '../mixins/typography';
+@import '../mixins/form-field';
+@import '../mixins/field-control';
+@import '../mixins/focus-outline';
 
 @layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	label {
-		cursor: pointer;
-		display: grid;
-		line-height: 1.25;
-		gap: calc(var(--spacing) * 2);
-		width: 100%;
-	}
-
-	input {
-		cursor: pointer;
-		width: 100%;
-		border-color: var(--color-subtle);
-		border-width: rem(2);
-		border-style: solid;
-		border-radius: rem(5);
-		line-height: 1.5;
-	}
-
-	input:hover {
-		border-color: var(--color-primary);
-		box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
-	}
-
-	input:focus:hover {
-		box-shadow: none;
-	}
-
-	input:hover {
-		border-color: var(--color-primary);
-	}
-
-	.kol-alert {
-		@include kol-alert;
-	}
-
-	.required legend > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
+	@include kol-alert-theme;
+	@include kol-form-field-theme;
+	@include kol-field-control-theme;
 
-	/* RADIO */
-	fieldset {
+	.kol-form-field {
 		border: 0;
-		margin: 0;
-		padding: 0;
 		display: grid;
-		gap: 0.25em;
-	}
-
-	.radio-input-wrapper {
-		align-items: center;
-		cursor: pointer;
-		display: flex;
-		flex-direction: row;
-		gap: rem(8);
+		font-family: var(--font-family);
 		margin: 0;
-		min-height: var(--a11y-min-size);
-		position: relative;
-	}
-
-	.radio-input-wrapper label {
-		cursor: pointer;
-		display: flex;
-		padding-left: calc(var(--spacing) / 2);
-		width: 100%;
-	}
-
-	.radio-input-wrapper label span {
-		margin-top: 0.125em;
-	}
-
-	.radio-input-wrapper input[type='radio'] {
-		appearance: none;
-		transition: 0.5s;
-		border-radius: 100%;
-		height: calc(6 * rem(4));
-		min-width: calc(6 * rem(4));
-		width: calc(6 * rem(4));
-	}
-
-	.radio-input-wrapper input[type='radio']:before {
-		content: '';
-		cursor: pointer;
-		border-radius: 100%;
-		display: block;
-	}
+		padding: 0;
 
-	.radio-input-wrapper input[type='radio']:checked:before {
-		background-color: var(--color-primary);
-	}
+		&--error {
+			color: var(--color-danger);
+			font-weight: 700;
+		}
 
-	.radio-input-wrapper input[type='radio']:disabled {
-		cursor: not-allowed;
-		background-color: var(--color-mute-variant);
-	}
+		&__label {
+			display: inline-block;
+			padding: 0;
+		}
 
-	.kol-alert.error {
-		order: 3;
-	}
+		&__input {
+			gap: rem(4);
 
-	.hint {
-		order: 4;
-		@include kol-typography-hint;
+			&--orientation-horizontal {
+				margin-top: calc(var(--spacing) / 2);
+				gap: var(--spacing) calc(var(--spacing) * 2);
+			}
+		}
 	}
 
-	fieldset legend {
-		order: 2;
-		display: contents;
-	}
+	.kol-field-control {
+		&__wrapper {
+			gap: rem(8);
+		}
 
-	fieldset .kol-input {
-		display: grid;
-		order: 2;
+		&__label {
+			padding-top: 0.1em;
+		}
 	}
 
-	.kol-input .hint {
-		order: 3;
-		@include kol-typography-hint;
-	}
+	.kol-input-radio {
+		cursor: pointer;
+		width: 100%;
+		border-color: var(--color-subtle);
+		border-width: rem(2);
+		border-style: solid;
+		border-radius: 50%;
+		line-height: 1.5;
 
-	fieldset.error:not(.hidden-error) {
-		@include input-error;
+		&:hover {
+			border-color: var(--color-primary);
+			box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24);
+		}
 
-		color: var(--color-danger);
-		font-weight: 700;
+		&:focus {
+			outline-offset: rem(2);
+			outline: var(--color-primary-variant) solid rem(3);
+			transition: 200ms outline-offset linear;
 
-		input:focus,
-		select:focus,
-		textarea:focus {
-			outline-color: var(--color-danger);
+			&:hover {
+				box-shadow: none;
+			}
 		}
 
-		.kol-alert.error {
-			margin-left: -0.25em;
+		&:checked {
+			&:before {
+				background-color: var(--color-primary);
+			}
 		}
-	}
 
-	fieldset.horizontal {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--spacing) calc(var(--spacing) * 2);
-		align-items: flex-start;
+		&:disabled {
+			cursor: not-allowed;
+			background-color: var(--color-mute-variant);
+		}
 	}
 
-	fieldset.horizontal legend {
-		display: inline-block;
-		margin-bottom: calc(var(--spacing) / 2);
+	.kol-input--error:focus {
+		outline-color: var(--color-danger);
 	}
 
-	fieldset .input-slot {
-		gap: var(--spacing);
+	.kol-field-control__hint,
+	.kol-form-field__hint {
+		@include kol-typography-hint;
 	}
 
-	.radio-input-wrapper label {
-		padding-left: 0;
+	.kol-alert--error {
+		margin-left: -0.25em;
 	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/default/src/components/input-range.scss b/packages/themes/default/src/components/input-range.scss
index 8cb6243661..189a2663c6 100644
--- a/packages/themes/default/src/components/input-range.scss
+++ b/packages/themes/default/src/components/input-range.scss
@@ -1,118 +1,9 @@
-@import '../mixins/rem';
-@import '../mixins/alert-wc';
-@import '../mixins/input-error';
-@import '../mixins/typography';
+@import '../@shared/input-core';
 
 @layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-	}
-
-	.inputs-wrapper {
-		gap: rem(16);
-	}
-
-	.kol-input {
-		gap: rem(4);
-	}
-
-	.kol-input .input {
-		gap: rem(8);
-
-		.inputAdornment-start,
-		.inputAdornment-end {
-			display: flex;
-			align-items: center;
-			gap: rem(8);
-			.kol-icon {
-				min-width: rem(16);
-				display: flex;
-				justify-content: center;
-			}
-		}
-
-		.inputAdornment-start {
-			.kol-icon:first-child {
-				margin-left: rem(8);
-			}
-		}
-
-		.inputAdornment-end {
-			.kol-icon:last-child {
-				margin-right: rem(8);
-			}
+	.kol-input-range {
+		&__inputs-wrapper {
+			gap: rem(16);
 		}
 	}
-
-	.kol-input .error:not(.hidden-error) {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .hint {
-		order: 4;
-		@include kol-typography-hint;
-	}
-
-	input::placeholder {
-		color: var(--color-subtle);
-	}
-
-	.input {
-		background-color: var(--color-light);
-		border-color: var(--color-subtle);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: rem(2);
-		padding: 0 rem(8);
-	}
-
-	.input > .kol-icon {
-		width: rem(16);
-	}
-
-	.input.icon-left > .kol-icon:first-child {
-		margin-right: rem(8);
-	}
-
-	.input.icon-right > .kol-icon:last-child {
-		margin-left: rem(8);
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: rem(16);
-		padding-right: rem(16);
-	}
-
-	:not(.disabled) .input:hover {
-		border-color: var(--color-primary);
-	}
-
-	input:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		@include input-error;
-	}
-
-	.kol-input.disabled .input {
-		background-color: var(--color-mute);
-		border-color: var(--color-mute-variant);
-		color: var(--color-text);
-	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/default/src/components/input-text.scss b/packages/themes/default/src/components/input-text.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/default/src/components/input-text.scss
+++ b/packages/themes/default/src/components/input-text.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/default/src/components/select.scss b/packages/themes/default/src/components/select.scss
index 5ffb1a1dd1..a8eddfef58 100644
--- a/packages/themes/default/src/components/select.scss
+++ b/packages/themes/default/src/components/select.scss
@@ -2,18 +2,14 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	.input > .kol-icon {
-		width: rem(32);
-	}
-
-	select {
+	.kol-select {
 		border: none;
 
 		&[multiple] {
 			overflow: auto;
 		}
 
-		option {
+		&__option {
 			margin: rem(1) 0;
 			border-radius: var(--border-radius);
 			cursor: pointer;
@@ -31,7 +27,7 @@
 			}
 		}
 
-		&:not([multiple]) option {
+		&:not([multiple]) &__option {
 			padding: 0.5em;
 		}
 	}
diff --git a/packages/themes/default/src/components/single-select.scss b/packages/themes/default/src/components/single-select.scss
index e2569b7e3a..11a8ec0c2e 100644
--- a/packages/themes/default/src/components/single-select.scss
+++ b/packages/themes/default/src/components/single-select.scss
@@ -84,7 +84,7 @@ $visible-options: 5;
 		gap: rem(4);
 	}
 
-	.kol-input .error:not(.hidden-error) {
+	.kol-input:not(.hidden-error) .kol-alert {
 		order: 1;
 	}
 
diff --git a/packages/themes/default/src/components/textarea.scss b/packages/themes/default/src/components/textarea.scss
index 8c71f69a0b..a0dfebf242 100644
--- a/packages/themes/default/src/components/textarea.scss
+++ b/packages/themes/default/src/components/textarea.scss
@@ -1,112 +1,24 @@
-@import '../mixins/rem';
-@import '../mixins/alert-wc';
-@import '../mixins/input-error';
-@import '../mixins/typography';
+@import '../@shared/input-text';
+@import '../mixins/form-field-order.textarea';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
 	}
 
-	.kol-input {
-		gap: rem(4);
-	}
-
-	.kol-input .error:not(.hidden-error) {
-		order: 1;
-	}
-
-	.kol-input label {
-		order: 2;
-	}
-
-	.kol-input .input {
-		order: 3;
-	}
-
-	.kol-input .counter {
-		order: 4;
-	}
-
-	.kol-input .hint {
-		order: 5;
-		@include kol-typography-hint;
-	}
+	@include kol-form-field-order-textarea-theme;
 
-	textarea {
+	.kol-textarea {
 		border: none;
-	}
-
-	input::placeholder {
-		color: var(--color-subtle);
-	}
-
-	.input {
-		background-color: var(--color-light);
-		border-color: var(--color-subtle);
-		border-radius: var(--border-radius);
-		border-style: solid;
-		border-width: rem(2);
-		padding: 0 rem(8);
-	}
-
-	.input > .kol-icon {
-		width: rem(16);
-	}
-
-	.input:is(.icon-left, .icon-right) {
-		padding-left: rem(16);
-		padding-right: rem(16);
-	}
-
-	.input:is(.icon-left, .icon-right) input {
-		padding-left: rem(8);
-		padding-right: rem(8);
-	}
-
-	.input > input:first-child {
-		padding-left: var(--spacing);
-	}
-
-	.input > input:last-child {
-		padding-right: var(--spacing);
-	}
-
-	:not(.disabled) .input:hover {
-		border-color: var(--color-primary);
-	}
-
-	textarea:disabled {
-		cursor: not-allowed;
-	}
-
-	.required label > span::after {
-		content: '*';
-		padding-left: 0.125em;
-	}
-
-	.kol-input.error:not(.hidden-error) {
-		@include input-error;
-	}
-
-	select[multiple],
-	textarea {
-		overflow: auto;
-	}
-
-	textarea {
 		display: block;
-	}
+		overflow: auto;
 
-	.input {
-		position: relative;
-	}
+		&:disabled {
+			cursor: not-allowed;
+		}
 
-	.kol-input.disabled .input {
-		background-color: var(--color-mute);
-		border-color: var(--color-mute-variant);
-		color: var(--color-text);
+		&::placeholder {
+			color: var(--color-subtle);
+		}
 	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/default/src/mixins/field-control.scss b/packages/themes/default/src/mixins/field-control.scss
new file mode 100644
index 0000000000..d6e328a732
--- /dev/null
+++ b/packages/themes/default/src/mixins/field-control.scss
@@ -0,0 +1,21 @@
+@import './rem';
+
+@mixin kol-field-control-theme {
+	.kol-field-control {
+		column-gap: rem(8);
+
+		&--required & {
+			&__label-text {
+				&::after {
+					padding-left: 0.125em;
+				}
+			}
+
+			&__tooltip {
+				.span-label::after {
+					padding-left: 0.125em;
+				}
+			}
+		}
+	}
+}
diff --git a/packages/themes/default/src/mixins/form-field-order.scss b/packages/themes/default/src/mixins/form-field-order.scss
new file mode 100644
index 0000000000..501e9ef4d7
--- /dev/null
+++ b/packages/themes/default/src/mixins/form-field-order.scss
@@ -0,0 +1,21 @@
+@mixin kol-form-field-order-theme {
+	.kol-form-field {
+		$root: &;
+
+		@at-root #{$root}__msg {
+			order: 1;
+		}
+
+		@at-root #{$root}__label {
+			order: 2;
+		}
+
+		@at-root #{$root}__input {
+			order: 3;
+		}
+
+		@at-root #{$root}__hint {
+			order: 4;
+		}
+	}
+}
diff --git a/packages/themes/default/src/mixins/form-field-order.textarea.scss b/packages/themes/default/src/mixins/form-field-order.textarea.scss
new file mode 100644
index 0000000000..ae1de32486
--- /dev/null
+++ b/packages/themes/default/src/mixins/form-field-order.textarea.scss
@@ -0,0 +1,25 @@
+@mixin kol-form-field-order-textarea-theme {
+	.kol-form-field {
+		$root: &;
+
+		@at-root #{$root}__msg {
+			order: 1;
+		}
+
+		@at-root #{$root}__label {
+			order: 2;
+		}
+
+		@at-root #{$root}__input {
+			order: 3;
+		}
+
+		@at-root #{$root}__counter {
+			order: 4;
+		}
+
+		@at-root #{$root}__hint {
+			order: 5;
+		}
+	}
+}
diff --git a/packages/themes/default/src/mixins/form-field.scss b/packages/themes/default/src/mixins/form-field.scss
new file mode 100644
index 0000000000..21c8c7765d
--- /dev/null
+++ b/packages/themes/default/src/mixins/form-field.scss
@@ -0,0 +1,40 @@
+@import './rem';
+@import './alert-wc';
+@import './typography';
+
+@mixin kol-form-field-theme {
+	.kol-form-field {
+		$root: &;
+
+		gap: rem(4);
+
+		&__hint {
+			@include kol-typography-hint;
+		}
+
+		&--error:not(&--hidden-error) {
+			border-left: rem(3) solid var(--color-danger);
+			padding-left: rem(16);
+
+			.kol-form-field__msg {
+				&.kol-alert--error {
+					@include kol-input-error-with-kol-alert-wc-error(--color-danger);
+				}
+			}
+		}
+
+		&--required & {
+			&__label-text {
+				&::after {
+					padding-left: 0.125em;
+				}
+			}
+
+			&__tooltip {
+				.span-label::after {
+					padding-left: 0.125em;
+				}
+			}
+		}
+	}
+}
diff --git a/packages/themes/default/src/mixins/input-error.scss b/packages/themes/default/src/mixins/input-error.scss
index a17a1c3572..b5dd3f9eb5 100644
--- a/packages/themes/default/src/mixins/input-error.scss
+++ b/packages/themes/default/src/mixins/input-error.scss
@@ -9,7 +9,7 @@
 		outline-color: var(--color-danger);
 	}
 
-	.kol-alert.error {
+	.kol-alert--error {
 		@include kol-input-error-with-kol-alert-wc-error(--color-danger);
 	}
 }
diff --git a/packages/themes/default/src/mixins/input.scss b/packages/themes/default/src/mixins/input.scss
new file mode 100644
index 0000000000..88881230e0
--- /dev/null
+++ b/packages/themes/default/src/mixins/input.scss
@@ -0,0 +1,54 @@
+@import './rem';
+@import './focus-outline';
+
+@mixin kol-input-theme {
+	.kol-input-container {
+		$root: &;
+
+		background-color: var(--color-light);
+		border-color: var(--color-subtle);
+		border-radius: var(--border-radius);
+		border-style: solid;
+		border-width: rem(2);
+		padding: 0 rem(8);
+		gap: rem(6);
+
+		@at-root #{$root}__adornment {
+			min-width: rem(8);
+
+			&--start {
+				> .kol-icon {
+					margin-left: rem(8);
+				}
+			}
+
+			&--end {
+				> .kol-icon {
+					margin-right: rem(8);
+				}
+			}
+		}
+
+		@at-root #{$root}--disabled {
+			background-color: var(--color-mute);
+			border-color: var(--color-mute-variant);
+			color: var(--color-text);
+		}
+
+		&:not(&--disabled) {
+			&:hover {
+				border-color: var(--color-primary);
+			}
+		}
+
+		&:focus-within {
+			@include focus-outline;
+		}
+
+		&--error {
+			&:focus-within {
+				outline-color: var(--color-danger);
+			}
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss
index 9ffff0d0fe..e459930e99 100644
--- a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss
+++ b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss
@@ -1,80 +1,16 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
+@import '../mixins/form-field-order';
+@import '../mixins/form-field';
+@import '../mixins/input-container';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	.kol-input {
-		color: var(--color-grey);
-		gap: var(--spacing-xs);
-	}
-
-	input,
-	select,
-	textarea {
-		border: none;
-		margin: rem(1);
-		outline: none;
-	}
-
-	input,
-	select:not([multiple]) {
-		height: rem(44);
-		min-height: rem(44);
-	}
-
-	input:not([type='range']):focus,
-	select:focus,
-	textarea:focus {
-		border-top: rem(1) solid var(--color-blue);
-		border-bottom: rem(1) solid var(--color-blue);
-	}
-
-	label {
-		font-weight: var(--font-weight-bold);
-		order: 1;
-	}
-
-	.hint {
-		font-size: rem(14);
-		order: 2;
-	}
-
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-		order: 3;
-	}
-
-	.input {
-		min-height: rem(44);
-		border: rem(1) solid var(--color-grey-75);
-		color: var(--color-grey);
-		order: 4;
-		align-items: center;
-		padding: rem(1) 0.5em;
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--color-grey-50);
-	}
-
-	.input:focus-within {
-		box-shadow:
-			inset rem(1) rem(1) var(--color-blue),
-			inset rem(-1) rem(-1) var(--color-blue);
-		outline: none;
-	}
-
-	.input:focus-within,
-	.input:hover {
-		border-color: var(--color-blue);
-	}
-
-	.error .input {
-		border-color: var(--color-red);
-	}
+	@include kol-alert-theme;
+	@include kol-form-field-order-theme;
+	@include kol-form-field-theme;
+	@include kol-input-container-theme;
 }
diff --git a/packages/themes/ecl/src/ecl-ec/@shared/input-text.scss b/packages/themes/ecl/src/ecl-ec/@shared/input-text.scss
new file mode 100644
index 0000000000..86a2695247
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/@shared/input-text.scss
@@ -0,0 +1,6 @@
+@import './input-core';
+@import '../mixins/input-text';
+
+@layer kol-theme-component {
+	@include kol-input-text-theme;
+}
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss
index 0a54ac848c..94e608fb21 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss
@@ -1,151 +1,172 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
+@import '../mixins/required';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	.checkbox-container {
-		justify-content: flex-start;
-	}
-
-	.default[data-label-align='left']:not(.hide-label) .checkbox-container {
-		justify-content: flex-end;
-	}
+	@include kol-alert-theme;
 
-	input[type='checkbox'] {
-		background-color: var(--color-white);
-		border-width: rem(2);
-		border-style: solid;
+	.kol-form-field {
 		color: var(--color-grey);
-		line-height: 1.5;
-		font-size: rem(16);
-	}
-
-	input[type='checkbox']:focus {
-		outline-color: var(--color-blue);
-		outline-offset: rem(2);
-		outline-style: solid;
-		outline-width: rem(2);
-	}
-
-	input[type='checkbox'] {
-		border-color: var(--color-grey-75);
-	}
-
-	input[type='checkbox']:checked {
-		background-color: var(--color-blue);
-		border-color: var(--color-blue);
-	}
-
-	input[type='checkbox']:hover {
-		border-color: var(--color-blue);
-	}
-
-	input[type='checkbox']:checked:hover {
-		background-color: var(--color-blue-130);
-		border-color: var(--color-blue-130);
-	}
 
-	.error input[type='checkbox'] {
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:checked {
-		background-color: var(--color-red);
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:hover {
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:checked:hover {
-		background-color: var(--color-red-1xx);
-		border-color: var(--color-red-1xx);
-	}
-
-	.error.required label > span::after {
-		color: var(--color-red);
-	}
-
-	.default .icon {
-		margin-left: rem(3.2);
-	}
-
-	.default.checked .icon {
-		color: var(--color-white);
-	}
-
-	.switch input[type='checkbox'] {
-		display: block;
-	}
-
-	.switch input[type='checkbox']::before,
-	.switch input[type='checkbox']:indeterminate::before {
-		background-color: var(--color-grey-75);
-	}
-
-	.switch input[type='checkbox']:hover::before,
-	.switch input[type='checkbox']:indeterminate:hover::before {
-		background-color: var(--color-blue);
-	}
-
-	.switch input[type='checkbox']:checked::before,
-	.switch input[type='checkbox']:checked:hover::before {
-		background-color: var(--color-white);
-	}
-
-	.switch.error input[type='checkbox']::before {
-		background-color: var(--color-red);
-	}
-
-	.switch.error input[type='checkbox']:checked::before {
-		background-color: var(--color-white);
-	}
-
-	.switch.error input[type='checkbox']:indeterminate:hover::before {
-		background-color: var(--color-red-1xx);
-	}
-
-	.button {
+		&__hint {
+			font-size: rem(14);
+		}
+
+		&__msg {
+			@include kol-alert-wc;
+
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
+	}
+
+	.kol-field-control {
+		gap: rem(8);
+
+		&__label {
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
+	}
+
+	.kol-checkbox {
+		.kol-input {
+			background-color: var(--color-white);
+			border-width: rem(2);
+			border-style: solid;
+			border-color: var(--color-grey-75);
+			color: var(--color-grey);
+			line-height: 1.5;
+			font-size: rem(16);
+
+			&:focus {
+				outline-color: var(--color-blue);
+				outline-offset: rem(2);
+				outline-style: solid;
+				outline-width: rem(2);
+			}
+
+			&:checked {
+				background-color: var(--color-blue);
+				border-color: var(--color-blue);
+			}
+
+			&:hover {
+				border-color: var(--color-blue);
+			}
+
+			&:checked {
+				&:hover {
+					background-color: var(--color-blue-130);
+					border-color: var(--color-blue-130);
+				}
+			}
+
+			&--error {
+				border-color: var(--color-red);
+
+				&:checked {
+					background-color: var(--color-red);
+					border-color: var(--color-red);
+				}
+
+				&:hover {
+					border-color: var(--color-red);
+				}
+
+				&:checked {
+					&:hover {
+						background-color: var(--color-red-120);
+						border-color: var(--color-red-120);
+					}
+				}
+			}
+		}
+	}
+
+	.kol-checkbox--variant-default {
+		min-width: unset;
+		width: unset;
+
+		&.kol-checkbox--checked .kol-icon {
+			color: var(--color-white);
+		}
+	}
+
+	.kol-checkbox--variant-switch {
+		.kol-icon {
+			color: var(--color-white);
+		}
+
+		.kol-input {
+			display: block;
+
+			&::before {
+				background-color: var(--color-grey-75);
+			}
+		}
+
+		&.kol-checkbox--checked .kol-icon {
+			background-color: var(--color-white);
+			color: #000;
+		}
+
+		&:hover {
+			.kol-input::before {
+				background-color: var(--color-blue);
+			}
+		}
+
+		&.kol-checkbox--error {
+			.kol-icon {
+				background-color: var(--color-red);
+				color: var(--color-white);
+			}
+
+			.kol-input::before {
+				background-color: var(--color-red);
+			}
+
+			&.kol-checkbox--checked .kol-icon {
+				background-color: var(--color-white);
+				color: #000;
+			}
+
+			&:hover {
+				.kol-input::before {
+					background-color: var(--color-red);
+				}
+			}
+		}
+	}
+
+	.kol-input-checkbox--variant-button {
 		gap: var(--spacing-xs) 0;
-		grid-template-areas:
-			'input label'
-			'hint hint'
-			'error error';
-	}
-
-	.button[data-label-align='left']:not(.hide-label) {
-		grid-template-areas:
-			'label input'
-			'hint hint'
-			'error error';
-	}
-
-	.kol-input .kol-alert.error {
-		order: 3;
-	}
-
-	.kol-input .hint,
-	.kol-input.error > .kol-alert {
-		grid-column: span 2;
-	}
-
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-	}
-
-	.hint {
-		font-size: rem(14);
-	}
 
-	.button:focus-within {
-		outline-color: var(--color-blue);
-		outline-offset: rem(2);
-		outline-style: solid;
-		outline-width: rem(2);
+		& .kol-form-field {
+			&__input {
+				order: 1;
+			}
+
+			&__hint {
+				order: 2;
+			}
+
+			&__msg {
+				order: 3;
+			}
+		}
+
+		&:focus-within {
+			outline-color: var(--color-blue-130);
+			outline-style: solid;
+			outline-width: rem(2);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-color.scss b/packages/themes/ecl/src/ecl-ec/components/input-color.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-color.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-color.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-date.scss b/packages/themes/ecl/src/ecl-ec/components/input-date.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-date.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-date.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-email.scss b/packages/themes/ecl/src/ecl-ec/components/input-email.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-email.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-email.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-file.scss b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-file.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-number.scss b/packages/themes/ecl/src/ecl-ec/components/input-number.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-number.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-number.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-password.scss b/packages/themes/ecl/src/ecl-ec/components/input-password.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-password.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-password.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss
index 82dace43a9..854fffdc06 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss
@@ -1,117 +1,120 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
 @import '../mixins/typography';
+@import '../mixins/required';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	fieldset {
-		border: 0;
-		gap: rem(8);
-		flex-wrap: wrap;
-		align-items: flex-start;
-	}
-
-	.input-slot {
-		gap: rem(4);
-	}
-
-	fieldset .kol-alert {
-		order: 1;
-	}
+	@include kol-alert-theme;
 
-	fieldset .hint {
-		order: 4;
-		@include kol-typography-hint;
-	}
-
-	fieldset .kol-alert {
-		order: 3;
-	}
-
-	fieldset .kol-input {
-		display: grid;
-		order: 2;
-	}
-
-	fieldset .kol-input .hint {
-		order: 3;
-		@include kol-typography-hint;
-	}
-
-	.radio-input-wrapper {
-		display: flex;
-		align-items: center;
-		display: flex;
-		flex-direction: row;
+	/**
+	 * normalizes the layout of form elements.
+	*/
+	.kol-form-field {
+		border: 0;
 		margin: 0;
-		min-height: var(--a11y-min-size);
-		position: relative;
+		padding: 0;
+		flex-wrap: wrap;
 	}
 
-	.radio-label {
-		padding-left: rem(8);
-	}
+	/**
+	 * order the layout of form elements.
+	*/
+	.kol-form-field {
+		&__label {
+			order: 1;
+		}
 
-	input[type='radio'] {
-		border: rem(2) solid var(--color-grey-75);
-	}
+		&__input {
+			order: 2;
+		}
 
-	input[type='radio']:before {
-		display: none;
-	}
+		&__msg {
+			order: 3;
+		}
 
-	input[type='radio']:checked {
-		border-color: var(--color-blue);
-		border-width: rem(7);
+		&__hint {
+			order: 4;
+		}
 	}
 
-	input[type='radio']:focus {
-		outline: rem(2) solid var(--color-blue);
-		outline-offset: rem(2);
-	}
-
-	input[type='radio']:not(:disabled):hover {
-		border-color: var(--color-blue);
-	}
+	.kol-form-field {
+		border: 0;
+		gap: rem(8);
+		flex-wrap: wrap;
+		align-items: flex-start;
+		padding: 0 rem(14) rem(10) rem(14);
 
-	label,
-	legend {
-		color: var(--color-grey);
-	}
+		&__label {
+			color: var(--color-grey);
+			font-weight: var(--font-weight-bold);
 
-	legend {
-		font-weight: var(--font-weight-bold);
-	}
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
 
-	.error input[type='radio'] {
-		border: rem(2) solid var(--color-red);
-	}
+		&__hint {
+			@include kol-typography-hint;
+		}
 
-	.error input[type='radio']:before {
-		display: none;
-	}
+		&__input {
+			gap: rem(8);
+		}
 
-	.error input[type='radio']:checked {
-		border-color: var(--color-red);
-		border-width: rem(7);
-	}
+		&__msg {
+			@include kol-alert-wc;
 
-	.error input[type='radio']:not(:disabled):hover {
-		border-color: var(--color-red-1xx);
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
 	}
 
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-		order: 1;
-		width: 100%;
+	.kol-field-control {
+		gap: rem(8);
 	}
 
-	.hint {
-		font-size: rem(14.4);
-		order: 4;
+	.kol-input {
+		&:before {
+			display: none;
+		}
+
+		&:checked {
+			border-color: var(--color-blue);
+			border-width: rem(7);
+		}
+
+		&:focus {
+			outline-color: var(--color-blue);
+		}
+
+		&:not(:disabled) {
+			&:hover {
+				border-color: var(--color-blue);
+			}
+		}
+
+		&#{&}--error {
+			border: rem(2) solid var(--color-red);
+
+			&:before {
+				display: none;
+			}
+
+			&:checked {
+				border-color: var(--color-red);
+				border-width: rem(7);
+			}
+
+			&:not(:disabled) {
+				&:hover {
+					border-color: var(--color-red-1xx);
+				}
+			}
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/input-text.scss b/packages/themes/ecl/src/ecl-ec/components/input-text.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/input-text.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/input-text.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/select.scss b/packages/themes/ecl/src/ecl-ec/components/select.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/select.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/select.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/components/textarea.scss b/packages/themes/ecl/src/ecl-ec/components/textarea.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-ec/components/textarea.scss
+++ b/packages/themes/ecl/src/ecl-ec/components/textarea.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/form-field-order.scss b/packages/themes/ecl/src/ecl-ec/mixins/form-field-order.scss
new file mode 100644
index 0000000000..3ee47aaabb
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/mixins/form-field-order.scss
@@ -0,0 +1,16 @@
+@mixin kol-form-field-order-theme {
+	.kol-form-field {
+		&__label {
+			order: 1;
+		}
+		&__hint {
+			order: 2;
+		}
+		&__msg {
+			order: 3;
+		}
+		&__input {
+			order: 4;
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/form-field.scss b/packages/themes/ecl/src/ecl-ec/mixins/form-field.scss
new file mode 100644
index 0000000000..e7a9954b8a
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/mixins/form-field.scss
@@ -0,0 +1,28 @@
+@import './required';
+
+@mixin kol-form-field-theme {
+	.kol-form-field {
+		color: var(--color-grey);
+		gap: var(--spacing-xs);
+
+		&__label {
+			font-weight: var(--font-weight-bold);
+
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
+
+		&__hint {
+			font-size: rem(14);
+		}
+
+		&__msg {
+			@include kol-alert-wc;
+
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/input-container.scss b/packages/themes/ecl/src/ecl-ec/mixins/input-container.scss
new file mode 100644
index 0000000000..5f10ed2e7d
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/mixins/input-container.scss
@@ -0,0 +1,26 @@
+@mixin kol-input-container-theme {
+	.kol-input-container {
+		min-height: rem(44);
+		border: rem(1) solid var(--color-grey-75);
+		color: var(--color-grey);
+		order: 4;
+		align-items: center;
+		padding: rem(1) 0.5em;
+
+		&:focus-within {
+			box-shadow:
+				inset rem(1) rem(1) var(--color-blue),
+				inset rem(-1) rem(-1) var(--color-blue);
+			outline: none;
+		}
+
+		&:focus-within,
+		&:hover {
+			border-color: var(--color-blue);
+		}
+
+		&#{&}--error {
+			border-color: var(--color-red);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/input-text.scss b/packages/themes/ecl/src/ecl-ec/mixins/input-text.scss
new file mode 100644
index 0000000000..f779ab1e6f
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/mixins/input-text.scss
@@ -0,0 +1,31 @@
+@mixin kol-input-text-theme {
+	.kol-input,
+	.kol-select,
+	.kol-textarea {
+		border: none;
+		margin: rem(1);
+		outline: none;
+	}
+
+	.kol-input,
+	.kol-select:not([multiple]) {
+		height: rem(44);
+		min-height: rem(44);
+	}
+
+	.kol-input,
+	.kol-select,
+	.kol-textarea {
+		&:focus {
+			border-top: rem(1) solid var(--color-blue);
+			border-bottom: rem(1) solid var(--color-blue);
+		}
+	}
+
+	.kol-input,
+	.kol-textarea {
+		&::placeholder {
+			color: var(--color-grey-50);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-ec/mixins/required.scss b/packages/themes/ecl/src/ecl-ec/mixins/required.scss
new file mode 100644
index 0000000000..a79caad4db
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-ec/mixins/required.scss
@@ -0,0 +1,4 @@
+@mixin kol-required_info {
+	color: var(--color-red);
+	padding-left: 0.25em;
+}
diff --git a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss
index 9ffff0d0fe..e459930e99 100644
--- a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss
+++ b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss
@@ -1,80 +1,16 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
+@import '../mixins/form-field-order';
+@import '../mixins/form-field';
+@import '../mixins/input-container';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	.kol-input {
-		color: var(--color-grey);
-		gap: var(--spacing-xs);
-	}
-
-	input,
-	select,
-	textarea {
-		border: none;
-		margin: rem(1);
-		outline: none;
-	}
-
-	input,
-	select:not([multiple]) {
-		height: rem(44);
-		min-height: rem(44);
-	}
-
-	input:not([type='range']):focus,
-	select:focus,
-	textarea:focus {
-		border-top: rem(1) solid var(--color-blue);
-		border-bottom: rem(1) solid var(--color-blue);
-	}
-
-	label {
-		font-weight: var(--font-weight-bold);
-		order: 1;
-	}
-
-	.hint {
-		font-size: rem(14);
-		order: 2;
-	}
-
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-		order: 3;
-	}
-
-	.input {
-		min-height: rem(44);
-		border: rem(1) solid var(--color-grey-75);
-		color: var(--color-grey);
-		order: 4;
-		align-items: center;
-		padding: rem(1) 0.5em;
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		color: var(--color-grey-50);
-	}
-
-	.input:focus-within {
-		box-shadow:
-			inset rem(1) rem(1) var(--color-blue),
-			inset rem(-1) rem(-1) var(--color-blue);
-		outline: none;
-	}
-
-	.input:focus-within,
-	.input:hover {
-		border-color: var(--color-blue);
-	}
-
-	.error .input {
-		border-color: var(--color-red);
-	}
+	@include kol-alert-theme;
+	@include kol-form-field-order-theme;
+	@include kol-form-field-theme;
+	@include kol-input-container-theme;
 }
diff --git a/packages/themes/ecl/src/ecl-eu/@shared/input-text.scss b/packages/themes/ecl/src/ecl-eu/@shared/input-text.scss
new file mode 100644
index 0000000000..86a2695247
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/@shared/input-text.scss
@@ -0,0 +1,6 @@
+@import './input-core';
+@import '../mixins/input-text';
+
+@layer kol-theme-component {
+	@include kol-input-text-theme;
+}
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss
index c5557ad595..4b67d8a4c0 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss
@@ -1,150 +1,167 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
+@import '../mixins/required';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	.checkbox-container {
-		justify-content: flex-start;
-	}
-
-	.default[data-label-align='left']:not(.hide-label) .checkbox-container {
-		justify-content: flex-end;
-	}
+	@include kol-alert-theme;
 
-	input[type='checkbox'] {
-		background-color: var(--color-white);
-		border-width: rem(2);
-		border-style: solid;
+	.kol-form-field {
 		color: var(--color-grey);
-		line-height: 1.5;
-		font-size: rem(16);
-	}
-
-	input[type='checkbox']:focus {
-		outline-color: var(--color-blue);
-		outline-offset: rem(2);
-		outline-style: solid;
-		outline-width: rem(2);
-	}
-
-	input[type='checkbox'] {
-		border-color: var(--color-grey-75);
-	}
-
-	input[type='checkbox']:checked {
-		background-color: var(--color-blue);
-		border-color: var(--color-blue);
-	}
-
-	input[type='checkbox']:hover {
-		border-color: var(--color-blue);
-	}
-
-	input[type='checkbox']:checked:hover {
-		background-color: var(--color-blue-130);
-		border-color: var(--color-blue-130);
-	}
 
-	.error input[type='checkbox'] {
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:checked {
-		background-color: var(--color-red);
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:hover {
-		border-color: var(--color-red);
-	}
-
-	.error input[type='checkbox']:checked:hover {
-		background-color: var(--color-red-1xx);
-		border-color: var(--color-red-1xx);
-	}
-
-	.error.required label > span::after {
-		color: var(--color-red);
-	}
-
-	.default .icon {
-		margin-left: rem(3.2);
-	}
-
-	.default.checked .icon {
-		color: var(--color-white);
-	}
-
-	.switch input[type='checkbox'] {
-		display: block;
-	}
-
-	.switch input[type='checkbox']::before,
-	.switch input[type='checkbox']:indeterminate::before {
-		background-color: var(--color-grey-75);
-	}
-
-	.switch input[type='checkbox']:hover::before,
-	.switch input[type='checkbox']:indeterminate:hover::before {
-		background-color: var(--color-blue);
-	}
-
-	.switch input[type='checkbox']:checked::before,
-	.switch input[type='checkbox']:checked:hover::before {
-		background-color: var(--color-white);
-	}
-
-	.switch.error input[type='checkbox']::before {
-		background-color: var(--color-red);
-	}
-
-	.switch.error input[type='checkbox']:checked::before {
-		background-color: var(--color-white);
-	}
-
-	.switch.error input[type='checkbox']:indeterminate:hover::before {
-		background-color: var(--color-red-1xx);
-	}
-
-	.button {
+		&__hint {
+			font-size: rem(14);
+		}
+
+		&__msg {
+			@include kol-alert-wc;
+
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
+	}
+
+	.kol-field-control {
+		gap: rem(8);
+
+		&__label {
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
+	}
+
+	.kol-checkbox {
+		.kol-input {
+			background-color: var(--color-white);
+			border-width: rem(2);
+			border-style: solid;
+			border-color: var(--color-grey-75);
+			color: var(--color-grey);
+			line-height: 1.5;
+			font-size: rem(16);
+
+			&:focus {
+				outline-color: var(--color-blue);
+				outline-offset: rem(2);
+				outline-style: solid;
+				outline-width: rem(2);
+			}
+
+			&:checked {
+				background-color: var(--color-blue);
+				border-color: var(--color-blue);
+			}
+
+			&:hover {
+				border-color: var(--color-blue);
+			}
+
+			&:checked {
+				&:hover {
+					background-color: var(--color-blue-130);
+					border-color: var(--color-blue-130);
+				}
+			}
+
+			&--error {
+				border-color: var(--color-red);
+
+				&:checked {
+					background-color: var(--color-red);
+					border-color: var(--color-red);
+				}
+
+				&:hover {
+					border-color: var(--color-red);
+				}
+
+				&:checked {
+					&:hover {
+						background-color: var(--color-red-120);
+						border-color: var(--color-red-120);
+					}
+				}
+			}
+		}
+	}
+
+	.kol-checkbox--variant-default {
+		min-width: unset;
+		width: unset;
+
+		&.kol-checkbox--checked .kol-icon {
+			color: var(--color-white);
+		}
+	}
+
+	.kol-checkbox--variant-switch {
+		.kol-icon {
+			color: var(--color-white);
+		}
+
+		.kol-input {
+			display: block;
+
+			&::before {
+				background-color: var(--color-grey-75);
+			}
+		}
+
+		&:hover {
+			.kol-input::before {
+				background-color: var(--color-blue);
+			}
+		}
+
+		&.kol-checkbox--error {
+			.kol-icon {
+				background-color: var(--color-red);
+				color: var(--color-white);
+			}
+
+			.kol-input::before {
+				background-color: var(--color-red);
+			}
+
+			&.kol-checkbox--checked .kol-icon {
+				background-color: var(--color-white);
+				color: #000;
+			}
+
+			&:hover {
+				.kol-input::before {
+					background-color: var(--color-red);
+				}
+			}
+		}
+	}
+
+	.kol-input-checkbox--variant-button {
 		gap: var(--spacing-xs) 0;
-		grid-template-areas:
-			'input label'
-			'hint hint'
-			'error error';
-	}
-
-	.button[data-label-align='left']:not(.hide-label) {
-		grid-template-areas:
-			'label input'
-			'hint hint'
-			'error error';
-	}
-
-	.kol-input .kol-alert.error {
-		order: 3;
-	}
-
-	.kol-input .hint,
-	.kol-input.error > .kol-alert {
-		grid-column: span 2;
-	}
-
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-	}
-
-	.hint {
-		font-size: rem(14);
-	}
 
-	.button:focus-within {
-		outline-color: var(--color-blue-130);
-		outline-style: solid;
-		outline-width: rem(2);
+		& .kol-form-field {
+			&__input {
+				order: 1;
+			}
+
+			&__hint {
+				order: 2;
+			}
+
+			&__msg {
+				order: 3;
+			}
+		}
+
+		&:focus-within {
+			outline-color: var(--color-blue-130);
+			outline-style: solid;
+			outline-width: rem(2);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-color.scss b/packages/themes/ecl/src/ecl-eu/components/input-color.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-color.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-color.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-date.scss b/packages/themes/ecl/src/ecl-eu/components/input-date.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-date.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-date.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-email.scss b/packages/themes/ecl/src/ecl-eu/components/input-email.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-email.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-email.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-file.scss b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-file.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-file.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-number.scss b/packages/themes/ecl/src/ecl-eu/components/input-number.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-number.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-number.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-password.scss b/packages/themes/ecl/src/ecl-eu/components/input-password.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-password.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-password.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss
index 40873d2245..060d31d0be 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss
@@ -1,114 +1,224 @@
 @import '../../mixins/rem';
 @import '../mixins/alert-wc';
 @import '../mixins/typography';
+@import '../mixins/required';
 
 @layer kol-theme-component {
 	:host {
 		font-family: var(--font-family);
-		@include kol-alert-theme;
 	}
 
-	fieldset {
-		border: 0;
-		gap: rem(8);
-		flex-wrap: wrap;
-		align-items: flex-start;
-	}
+	@include kol-alert-theme;
 
-	fieldset .kol-alert {
-		order: 1;
-	}
-
-	fieldset .hint {
-		order: 4;
-		@include kol-typography-hint;
-	}
-
-	fieldset .kol-alert {
-		order: 3;
-	}
-
-	fieldset .kol-input {
-		display: grid;
-		order: 2;
-	}
-
-	fieldset .kol-input .hint {
-		order: 3;
-		@include kol-typography-hint;
-	}
-
-	.radio-input-wrapper {
-		display: flex;
-		align-items: center;
-		display: flex;
-		flex-direction: row;
+	/**
+	 * normalizes the layout of form elements.
+	*/
+	.kol-form-field {
+		border: 0;
 		margin: 0;
-		min-height: var(--a11y-min-size);
-		position: relative;
+		padding: 0;
+		flex-wrap: wrap;
 	}
 
-	.radio-label {
-		padding-left: rem(8);
-	}
+	/**
+	 * order the layout of form elements.
+	*/
+	.kol-form-field {
+		&__label {
+			order: 1;
+		}
 
-	input[type='radio'] {
-		outline: rem(2) solid var(--color-grey-75);
-		outline-offset: rem(2);
-	}
+		&__input {
+			order: 2;
+		}
 
-	input[type='radio']:before {
-		display: none;
-	}
+		&__msg {
+			order: 3;
+		}
 
-	input[type='radio']:checked {
-		border-color: var(--color-blue);
-		border-width: rem(7);
+		&__hint {
+			order: 4;
+		}
 	}
 
-	input[type='radio']:focus {
-		outline-color: var(--color-blue);
-	}
+	.kol-form-field {
+		border: 0;
+		gap: rem(8);
+		flex-wrap: wrap;
+		align-items: flex-start;
+		padding: 0 rem(14) rem(10) rem(14);
 
-	input[type='radio']:not(:disabled):hover {
-		border-color: var(--color-blue);
-	}
+		&__label {
+			color: var(--color-grey);
+			font-weight: var(--font-weight-bold);
 
-	label,
-	legend {
-		color: var(--color-grey);
-	}
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
 
-	legend {
-		font-weight: var(--font-weight-bold);
-	}
+		&__hint {
+			@include kol-typography-hint;
+		}
 
-	.error input[type='radio'] {
-		border: rem(2) solid var(--color-red);
-	}
+		&__input {
+			gap: rem(8);
+		}
 
-	.error input[type='radio']:before {
-		display: none;
-	}
+		&__msg {
+			@include kol-alert-wc;
 
-	.error input[type='radio']:checked {
-		border-color: var(--color-red);
-		border-width: rem(7);
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
 	}
 
-	.error input[type='radio']:not(:disabled):hover {
-		border-color: var(--color-red-1xx);
+	.kol-field-control {
+		gap: rem(8);
 	}
 
-	.kol-alert {
-		@include kol-alert-wc(--color-red);
-
-		order: 1;
-		width: 100%;
-	}
+	.kol-input {
+		outline: rem(2) solid var(--color-grey-75);
+		outline-offset: rem(2);
 
-	.hint {
-		font-size: rem(14.4);
-		order: 4;
-	}
+		&:before {
+			display: none;
+		}
+
+		&:checked {
+			border-color: var(--color-blue);
+			border-width: rem(7);
+		}
+
+		&:focus {
+			outline-color: var(--color-blue);
+		}
+
+		&:not(:disabled) {
+			&:hover {
+				border-color: var(--color-blue);
+			}
+		}
+
+		&#{&}--error {
+			border: rem(2) solid var(--color-red);
+
+			&:before {
+				display: none;
+			}
+
+			&:checked {
+				border-color: var(--color-red);
+				border-width: rem(7);
+			}
+
+			&:not(:disabled) {
+				&:hover {
+					border-color: var(--color-red-1xx);
+				}
+			}
+		}
+	}
+
+	// fieldset {
+
+	// }
+
+	// fieldset .kol-alert {
+	// 	order: 1;
+	// }
+
+	// fieldset .hint {
+	// 	order: 4;
+	// 	@include kol-typography-hint;
+	// }
+
+	// fieldset .kol-alert {
+	// 	order: 3;
+	// }
+
+	// fieldset .kol-input {
+	// 	display: grid;
+	// 	order: 2;
+	// }
+
+	// fieldset .kol-input .hint {
+	// 	order: 3;
+	// 	@include kol-typography-hint;
+	// }
+
+	// .radio-input-wrapper {
+	// 	display: flex;
+	// 	align-items: center;
+	// 	display: flex;
+	// 	flex-direction: row;
+	// 	margin: 0;
+	// 	min-height: var(--a11y-min-size);
+	// 	position: relative;
+	// }
+
+	// .radio-label {
+	// 	padding-left: rem(8);
+	// }
+
+	// input[type='radio'] {
+	// 	outline: rem(2) solid var(--color-grey-75);
+	// 	outline-offset: rem(2);
+	// }
+
+	// input[type='radio']:before {
+	// 	display: none;
+	// }
+
+	// input[type='radio']:checked {
+	// 	border-color: var(--color-blue);
+	// 	border-width: rem(7);
+	// }
+
+	// input[type='radio']:focus {
+	// 	outline-color: var(--color-blue);
+	// }
+
+	// input[type='radio']:not(:disabled):hover {
+	// 	border-color: var(--color-blue);
+	// }
+
+	// label,
+	// legend {
+	// 	color: var(--color-grey);
+	// }
+
+	// legend {
+	// 	font-weight: var(--font-weight-bold);
+	// }
+
+	// .error input[type='radio'] {
+	// 	border: rem(2) solid var(--color-red);
+	// }
+
+	// .error input[type='radio']:before {
+	// 	display: none;
+	// }
+
+	// .error input[type='radio']:checked {
+	// 	border-color: var(--color-red);
+	// 	border-width: rem(7);
+	// }
+
+	// .error input[type='radio']:not(:disabled):hover {
+	// 	border-color: var(--color-red-1xx);
+	// }
+
+	// .kol-alert {
+	// 	@include kol-alert-wc(--color-red);
+
+	// 	order: 1;
+	// 	width: 100%;
+	// }
+
+	// .hint {
+	// 	font-size: rem(14.4);
+	// 	order: 4;
+	// }
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-range.scss b/packages/themes/ecl/src/ecl-eu/components/input-range.scss
index b787945a14..7508e8c20b 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-range.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-range.scss
@@ -1,13 +1,10 @@
 @import '../../mixins/rem';
-@import '../mixins/alert-wc';
+@import '../@shared/input-core';
 
 @layer kol-theme-component {
-	:host {
-		font-family: var(--font-family);
-		@include kol-alert-theme;
-	}
-
-	.inputs-wrapper {
-		gap: rem(16);
+	.kol-input-range {
+		&__inputs-wrapper {
+			gap: rem(16);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/input-text.scss b/packages/themes/ecl/src/ecl-eu/components/input-text.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/input-text.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/input-text.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/select.scss b/packages/themes/ecl/src/ecl-eu/components/select.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/select.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/select.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/components/textarea.scss b/packages/themes/ecl/src/ecl-eu/components/textarea.scss
index 5c1a18e4a6..9d35948393 100644
--- a/packages/themes/ecl/src/ecl-eu/components/textarea.scss
+++ b/packages/themes/ecl/src/ecl-eu/components/textarea.scss
@@ -1 +1 @@
-@import '../@shared/input-core';
+@import '../@shared/input-text';
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/form-field-order.scss b/packages/themes/ecl/src/ecl-eu/mixins/form-field-order.scss
new file mode 100644
index 0000000000..3ee47aaabb
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/mixins/form-field-order.scss
@@ -0,0 +1,16 @@
+@mixin kol-form-field-order-theme {
+	.kol-form-field {
+		&__label {
+			order: 1;
+		}
+		&__hint {
+			order: 2;
+		}
+		&__msg {
+			order: 3;
+		}
+		&__input {
+			order: 4;
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/form-field.scss b/packages/themes/ecl/src/ecl-eu/mixins/form-field.scss
new file mode 100644
index 0000000000..e7a9954b8a
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/mixins/form-field.scss
@@ -0,0 +1,28 @@
+@import './required';
+
+@mixin kol-form-field-theme {
+	.kol-form-field {
+		color: var(--color-grey);
+		gap: var(--spacing-xs);
+
+		&__label {
+			font-weight: var(--font-weight-bold);
+
+			&-text::after {
+				@include kol-required-info;
+			}
+		}
+
+		&__hint {
+			font-size: rem(14);
+		}
+
+		&__msg {
+			@include kol-alert-wc;
+
+			&.kol-alert--error {
+				@include kol-alert-wc(--color-red);
+			}
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/input-container.scss b/packages/themes/ecl/src/ecl-eu/mixins/input-container.scss
new file mode 100644
index 0000000000..5f10ed2e7d
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/mixins/input-container.scss
@@ -0,0 +1,26 @@
+@mixin kol-input-container-theme {
+	.kol-input-container {
+		min-height: rem(44);
+		border: rem(1) solid var(--color-grey-75);
+		color: var(--color-grey);
+		order: 4;
+		align-items: center;
+		padding: rem(1) 0.5em;
+
+		&:focus-within {
+			box-shadow:
+				inset rem(1) rem(1) var(--color-blue),
+				inset rem(-1) rem(-1) var(--color-blue);
+			outline: none;
+		}
+
+		&:focus-within,
+		&:hover {
+			border-color: var(--color-blue);
+		}
+
+		&#{&}--error {
+			border-color: var(--color-red);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/input-text.scss b/packages/themes/ecl/src/ecl-eu/mixins/input-text.scss
new file mode 100644
index 0000000000..f779ab1e6f
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/mixins/input-text.scss
@@ -0,0 +1,31 @@
+@mixin kol-input-text-theme {
+	.kol-input,
+	.kol-select,
+	.kol-textarea {
+		border: none;
+		margin: rem(1);
+		outline: none;
+	}
+
+	.kol-input,
+	.kol-select:not([multiple]) {
+		height: rem(44);
+		min-height: rem(44);
+	}
+
+	.kol-input,
+	.kol-select,
+	.kol-textarea {
+		&:focus {
+			border-top: rem(1) solid var(--color-blue);
+			border-bottom: rem(1) solid var(--color-blue);
+		}
+	}
+
+	.kol-input,
+	.kol-textarea {
+		&::placeholder {
+			color: var(--color-grey-50);
+		}
+	}
+}
diff --git a/packages/themes/ecl/src/ecl-eu/mixins/required.scss b/packages/themes/ecl/src/ecl-eu/mixins/required.scss
new file mode 100644
index 0000000000..a79caad4db
--- /dev/null
+++ b/packages/themes/ecl/src/ecl-eu/mixins/required.scss
@@ -0,0 +1,4 @@
+@mixin kol-required_info {
+	color: var(--color-red);
+	padding-left: 0.25em;
+}