diff --git a/.changeset/blue-kiwis-rhyme.md b/.changeset/blue-kiwis-rhyme.md
new file mode 100644
index 0000000000..8a6fc7323f
--- /dev/null
+++ b/.changeset/blue-kiwis-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@uidu/field-color-picker': minor
+---
+
+Allow className to field-color-picker
diff --git a/packages/forms/field-color-picker/examples/Basic.tsx b/packages/forms/field-color-picker/examples/Basic.tsx
index 56f0529303..bd7c90a03c 100644
--- a/packages/forms/field-color-picker/examples/Basic.tsx
+++ b/packages/forms/field-color-picker/examples/Basic.tsx
@@ -53,6 +53,12 @@ export default function Basic() {
           showInput={false}
         />
       </div>
+      <FieldColorPicker
+        {...inputDefaultProps}
+        name="foo3"
+        layout="elementOnly"
+        tw="py-2"
+      />
     </Form>
   );
 }
diff --git a/packages/forms/field-color-picker/src/components/FieldColorPicker.tsx b/packages/forms/field-color-picker/src/components/FieldColorPicker.tsx
index b3b811b67f..c28e5f3efa 100644
--- a/packages/forms/field-color-picker/src/components/FieldColorPicker.tsx
+++ b/packages/forms/field-color-picker/src/components/FieldColorPicker.tsx
@@ -54,6 +54,7 @@ export default function FieldColorPicker({
   value: defaultValue,
   onChange = noop,
   trigger: Trigger = DefaulTrigger,
+  className,
   colors = [
     '#FF6900',
     '#FCB900',
@@ -160,6 +161,7 @@ export default function FieldColorPicker({
             </span>
             <StyledInput
               {...field}
+              className={className}
               type="text"
               $hasError={!!fieldState?.error}
               as={HexColorInput}