diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
index 3aa1bf8ede..d0a8ebbddc 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -42,6 +42,7 @@ $fontWeightSemiBold: 600;
 //global
 $textColor: rgb(16, 24, 40);
 $textSecondaryColor: $emphasis-medium !default;
+$smallBorderRadius: 2px !default;
 $borderRadius: 4px !default;
 $mediumBorderRadius: 6px !default;
 $bigBorderRadius: 8px !default;
@@ -868,12 +869,15 @@ $petri-inputBox: var(--surface-0);
 
 :root {
 	--editing-color: rgb(238, 238, 136);
+	--border-radius-small: #{$smallBorderRadius};
 	--border-radius: #{$borderRadius};
 	--border-radius-medium: #{$mediumBorderRadius};
 	--border-radius-big: #{$bigBorderRadius};
 	--border-radius-bigger: #{$biggerBorderRadius};
 	--chevron-hover: #1b807332;
 	--content-padding: #{$panelContentPadding};
+	--error-message-background: #{$errorMessageBg};
+	--error-message-color: #{$errorMessageTextColor};
 	--focus-ring: #{$focusShadow};
 	--font-body-large: #{$fontBodyLarge};
 	--font-body-medium: #{$fontBodyMedium};
@@ -939,6 +943,7 @@ $petri-inputBox: var(--surface-0);
 	--warning-color: #FFAB00;
 	--surface-error: #FDDDD3;
 	--error-color: #F35625;
+	--error-border-color: #F89A7C;
 	--surface-hover: var(--gray-100);
 	--surface-secondary: #f9fbfa;
 	--surface-section: #ffffff;
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-field.vue b/packages/client/hmi-client/src/components/widgets/tera-input-field.vue
new file mode 100644
index 0000000000..18bd9f74e1
--- /dev/null
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-field.vue
@@ -0,0 +1,97 @@
+<template>
+	<div :class="{ error: errorMessage }" @click.self.stop="focusInput">
+		<label @click.self.stop="focusInput">{{ label }}</label>
+		<input
+			v-bind="attrs"
+			ref="inputField"
+			:value="modelValue"
+			@input="updateValue"
+			:style="{ 'text-align': textAlign }"
+		/>
+	</div>
+	<aside v-if="errorMessage"><i class="pi pi-exclamation-circle" /> {{ errorMessage }}</aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs } from 'vue';
+
+defineProps<{
+	modelValue: string;
+	label?: string;
+	errorMessage?: string;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+const inputField = ref<HTMLInputElement | null>(null);
+const attrs = useAttrs();
+
+const textAlign = computed(() => (attrs.type === 'number' ? 'right' : 'left'));
+const focusInput = () => {
+	inputField.value?.focus();
+};
+
+const updateValue = (event: Event) => {
+	const value = (event.target as HTMLInputElement).value;
+	emit('update:modelValue', value);
+};
+</script>
+
+<style scoped>
+div {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	padding: var(--gap-xsmall) var(--gap-small);
+	background-color: var(--surface-section);
+	border: 1px solid var(--surface-border-alt);
+	border-radius: var(--border-radius-small);
+	cursor: text;
+	margin-bottom: var(--gap-small);
+	transition: border-color 0.3s ease-in-out;
+	font-family: var(--font-family);
+
+	&:has(*:disabled) {
+		opacity: 0.5;
+	}
+
+	&:has(*:focus) {
+		border-color: var(--primary-color);
+	}
+	&.error {
+		border-color: var(--error-border-color);
+	}
+	input {
+		min-width: 0;
+	}
+}
+
+label {
+	background-color: none;
+	color: var(--text-color-secondary);
+	cursor: text;
+	padding-right: var(--gap-small);
+}
+
+input {
+	flex-grow: 1;
+	border: none;
+	background-color: none;
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+}
+
+aside {
+	color: var(--error-message-color);
+	font-size: var(--font-caption);
+	word-wrap: break-word;
+	display: flex;
+	align-items: center;
+	i {
+		margin-right: var(--gap-small);
+	}
+}
+</style>
diff --git a/packages/client/hmi-client/src/router/index.ts b/packages/client/hmi-client/src/router/index.ts
index f181229feb..fa615780eb 100644
--- a/packages/client/hmi-client/src/router/index.ts
+++ b/packages/client/hmi-client/src/router/index.ts
@@ -16,6 +16,7 @@ import AMRPetriTest from '@/temp/AMRPetriTest.vue';
 import PyodideTest from '@/temp/PyodideTest.vue';
 import JupyterTest from '@/temp/JupyterTest.vue';
 import ModelTemplateTest from '@/temp/model-template-test.vue';
+import CustomInputTest from '@/temp/custom-input-test.vue';
 import { RouteName } from './routes';
 
 export enum RoutePath {
@@ -67,7 +68,8 @@ const routes = [
 	{ path: '/amr-petri-test', component: AMRPetriTest },
 	{ path: '/pyodide-test', component: PyodideTest },
 	{ path: '/jupyter-test', component: JupyterTest },
-	{ path: '/model-template-test', component: ModelTemplateTest }
+	{ path: '/model-template-test', component: ModelTemplateTest },
+	{ path: '/custom-input-test', component: CustomInputTest }
 ];
 
 const router = createRouter({
diff --git a/packages/client/hmi-client/src/temp/custom-input-test.vue b/packages/client/hmi-client/src/temp/custom-input-test.vue
new file mode 100644
index 0000000000..477ca1f755
--- /dev/null
+++ b/packages/client/hmi-client/src/temp/custom-input-test.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="flex flex-column pl-8 gap-5">
+		<div class="w-2">
+			<label>normal input</label>
+			<tera-input-field v-model="teststring" label="Label" />
+		</div>
+
+		<div class="w-2">
+			<label>Error input</label>
+			<tera-input-field
+				label="Label"
+				:error-message="errormessage"
+				v-model="errorstring"
+				@update:model-value="onUpdate"
+			/>
+		</div>
+
+		<div class="w-2">
+			<label>Disabled input</label>
+			<tera-input-field label="Label" model-value="Disabled" disabled />
+		</div>
+
+		<div class="w-2">
+			<label>Number input</label>
+			<tera-input-field label="Label" v-model="numberstring" type="number" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import teraInputField from '@/components/widgets/tera-input-field.vue';
+import { ref } from 'vue';
+
+const teststring = ref<string>('');
+const numberstring = ref<string>('');
+const errorstring = ref<string>('Error message error message');
+const errormessage = ref<string>('Error message error message');
+
+function onUpdate(value: string) {
+	if (value) {
+		errormessage.value = 'Error message error message';
+	} else {
+		errormessage.value = '';
+	}
+}
+</script>