Color Picker Input | Fix warning and clear value

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- `ColorPicker` controlled/uncontrolled state warning by ensuring value prop is always defined.
+- `ColorPicker` clear value when field value is already set.
+
 ## [4.1.0] - 2026-03-16
 
 ### Added

src/lib/components/ColorPicker/ColorPicker.tsx

@@ -47,6 +47,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
     disabled: formDisabled,
     getFieldState,
     setValue,
+    watch,
     requiredFields,
     formState: { errors },
     hideValidationMessages,
@@ -65,7 +66,8 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
   });
 
   const isDisabled = formDisabled || disabled;
-  const color = useMemo(() => new TinyColor(field.value), [field.value]);
+  const fieldValue = watch(name) as string | undefined;
+  const color = useMemo(() => new TinyColor(fieldValue), [fieldValue]);
   const fieldError = get(errors, name) as FieldError | undefined;
   const hideErrorMessage = useMemo(() => hideValidationMessages || hideValidationMessage, [hideValidationMessages, hideValidationMessage]);
   const hasError = useMemo(() => !!fieldError, [fieldError]);
@@ -107,7 +109,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
 
               field.onBlur();
             }}
-            value={field.value}
+            value={fieldValue ?? ""}
             slotProps={{
               input: {
                 startAdornment: (