diff --git a/packages/form/components/Field.astro b/packages/form/components/Field.astro
index 7a8dc2d..852c3a8 100644
--- a/packages/form/components/Field.astro
+++ b/packages/form/components/Field.astro
@@ -20,16 +20,16 @@ export interface Props {
 
 const { control, showValidationHints, showErrors = false, readOnly = false } = Astro.props;
 
-const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
-const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
-const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
+const hasError: boolean = control.errors?.some((error) => error.category === 'error');
+const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
+const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
 ---
 
 <div
 	class="field"
-	data-validator-error={hasError.toString()}
-	data-validator-warn={hasWarn.toString()}
-	data-validator-info={hasInfo.toString()}
+	data-validator-error={hasError ? hasError.toString() : null}
+	data-validator-warn={hasWarn ? hasWarn.toString() : null}
+	data-validator-info={hasInfo ? hasInfo.toString() : null}
 >
 	<Label control={control} showValidationHints={showValidationHints}>
 		{
diff --git a/packages/form/components/Form.astro b/packages/form/components/Form.astro
index 6a2ac2c..0595d5d 100644
--- a/packages/form/components/Form.astro
+++ b/packages/form/components/Form.astro
@@ -72,7 +72,7 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
 	}
 	[data-validator-hints='true'][data-validator-info='true'],
 	[data-validator-hints='true'] [data-validator-info='true'] {
-		color: blue;
-		border-color: blue;
+		color: green;
+		border-color: green;
 	}
 </style>
diff --git a/packages/form/components/controls/Input.astro b/packages/form/components/controls/Input.astro
index 923c0d2..63b76dd 100644
--- a/packages/form/components/controls/Input.astro
+++ b/packages/form/components/controls/Input.astro
@@ -14,9 +14,9 @@ const { control, readOnly } = Astro.props;
 
 const { validators = [] } = control;
 
-const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
-const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
-const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
+const hasError: boolean = control.errors?.some((error) => error.category === 'error');
+const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
+const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
 
 // @ts-ignore
 const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
@@ -43,9 +43,9 @@ const validatorAttributes: Record<string, string> = validators.reduce((prev, val
 	checked={control.value === 'checked'}
 	placeholder={control.placeholder}
 	data-label={control.label}
-	data-validator-error={hasError.toString()}
-	data-validator-warn={hasWarn.toString()}
-	data-validator-info={hasInfo.toString()}
+	data-validator-error={hasError ? hasError.toString() : null}
+	data-validator-warn={hasWarn ? hasWarn.toString() : null}
+	data-validator-info={hasInfo ? hasInfo.toString() : null}
 	readonly={readOnly || null}
 	disabled={(readOnly || null) && control.type === 'checkbox'}
 	{...validatorAttributes}