diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index ac0783f45e..548042b5be 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -502,8 +502,10 @@ export default {
 
 	&__helper-text-message {
 		padding-block: 4px;
+		padding-inline: var(--border-radius-large);
 		display: flex;
 		align-items: center;
+		color: var(--color-text-maxcontrast);
 
 		&__icon {
 			margin-inline-end: 8px;
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index c5ae29e6ad..0d04525197 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -33,6 +33,11 @@ and `minlength`.
 			@trailing-button-click="clearText">
 			<Lock :size="20" />
 		</NcTextField>
+		<NcTextField :value.sync="text2"
+			label="With helper text"
+			helper-text="This is an optional message to show e.g. validation errors."
+			@trailing-button-click="clearText">
+		</NcTextField>
 		<NcTextField :value.sync="text2"
 			label="Success state"
 			placeholder="Placeholders are possible"