From 15a448c6051178985c6738079f2a5ba15304ebb7 Mon Sep 17 00:00:00 2001
From: MGREMY <miguel.gremy72+pro@gmail.com>
Date: Sat, 6 Dec 2025 22:34:04 +0100
Subject: [PATCH] fix(form_field): add color input on helper and label (#147)

* fix(form_field): add color input on helper and label
---
 libs/flowbite-angular/form/src/helper/helper.directive.ts | 8 +++++++-
 libs/flowbite-angular/form/src/label/label.directive.ts   | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/libs/flowbite-angular/form/src/helper/helper.directive.ts b/libs/flowbite-angular/form/src/helper/helper.directive.ts
index 36049bf2..3cdd915b 100644
--- a/libs/flowbite-angular/form/src/helper/helper.directive.ts
+++ b/libs/flowbite-angular/form/src/helper/helper.directive.ts
@@ -1,5 +1,6 @@
 import { injectFlowbiteHelperConfig } from '../config/helper-config';
 import { injectFlowbiteFormFieldState } from '../form-field/form-field-state';
+import type { FlowbiteFormFieldColors } from '../form-field/theme';
 import { flowbiteHelperState, provideFlowbiteHelperState } from './helper-state';
 
 import { colorToTheme, mergeDeep } from 'flowbite-angular';
@@ -28,6 +29,11 @@ export class Helper {
   readonly config = injectFlowbiteHelperConfig();
   readonly formFieldState = injectFlowbiteFormFieldState();
 
+  /**
+   * @see {@link injectFlowbiteFormFieldState}
+   */
+  readonly color = input<keyof FlowbiteFormFieldColors>();
+
   /**
    * @see {@link injectFlowbiteHelperConfig}
    */
@@ -41,7 +47,7 @@ export class Helper {
         root: twMerge(
           mergedTheme.host.base,
           mergedTheme.host.transition,
-          colorToTheme(mergedTheme.host.color, this.formFieldState().color())
+          colorToTheme(mergedTheme.host.color, this.state.color() ?? this.formFieldState().color())
         ),
       },
     };
diff --git a/libs/flowbite-angular/form/src/label/label.directive.ts b/libs/flowbite-angular/form/src/label/label.directive.ts
index 694e6049..41f773f6 100644
--- a/libs/flowbite-angular/form/src/label/label.directive.ts
+++ b/libs/flowbite-angular/form/src/label/label.directive.ts
@@ -1,5 +1,6 @@
 import { injectFlowbiteLabelConfig } from '../config/label-config';
 import { injectFlowbiteFormFieldState } from '../form-field/form-field-state';
+import type { FlowbiteFormFieldColors } from '../form-field/theme';
 import { flowbiteLabelState, provideFlowbiteLabelState } from './label-state';
 
 import { colorToTheme, mergeDeep } from 'flowbite-angular';
@@ -28,6 +29,11 @@ export class Label {
   readonly config = injectFlowbiteLabelConfig();
   readonly formFieldState = injectFlowbiteFormFieldState();
 
+  /**
+   * @see {@link injectFlowbiteFormFieldState}
+   */
+  readonly color = input<keyof FlowbiteFormFieldColors>();
+
   /**
    * @see {@link injectFlowbiteLabelConfig}
    */
@@ -41,7 +47,7 @@ export class Label {
         root: twMerge(
           mergedTheme.host.base,
           mergedTheme.host.transition,
-          colorToTheme(mergedTheme.host.color, this.formFieldState().color()),
+          colorToTheme(mergedTheme.host.color, this.state.color() ?? this.formFieldState().color()),
           mergedTheme.host.mode[this.formFieldState().mode()]
         ),
       },