From b6c0d89d0813b2a92c804ff4965c6ba8d709a068 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Fri, 2 Oct 2026 15:36:14 +0900
Subject: [PATCH] fix(components): forward refs from the UI kit form components

Refs #691

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../changepack_log_ui_kit_forward_ref.json    |   7 +
 bindings/devup-ui-wasm/src/lib.rs             |   8 +-
 libs/css/src/theme_tokens.rs                  |   2 +-
 libs/extractor/src/lib.rs                     |   8 +-
 libs/extractor/src/tailwind.rs                |   4 +-
 .../__tests__/forward-ref.browser.test.tsx    |  26 +
 .../src/__tests__/index.browser.test.ts       |  10 +-
 .../src/components/Button/index.tsx           | 467 +++++++++---------
 .../Checkbox/__tests__/index.browser.test.tsx |   7 +
 .../src/components/Checkbox/index.tsx         | 259 +++++-----
 .../components/src/components/Input/index.tsx |  42 +-
 .../components/src/components/Radio/index.tsx |  36 +-
 .../src/components/Textarea/index.tsx         | 204 ++++----
 13 files changed, 575 insertions(+), 505 deletions(-)
 create mode 100644 .changepacks/changepack_log_ui_kit_forward_ref.json
 create mode 100644 packages/components/src/__tests__/forward-ref.browser.test.tsx

diff --git a/.changepacks/changepack_log_ui_kit_forward_ref.json b/.changepacks/changepack_log_ui_kit_forward_ref.json
new file mode 100644
index 000000000..883e0e61b
--- /dev/null
+++ b/.changepacks/changepack_log_ui_kit_forward_ref.json
@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Button, Checkbox, Input, Radio and Textarea forward their ref to the button, input or textarea they render, so a ref reaches the form element on React 18 as well as React 19",
+  "date": "2026-10-01T00:00:00.000Z"
+}
diff --git a/bindings/devup-ui-wasm/src/lib.rs b/bindings/devup-ui-wasm/src/lib.rs
index 4560410f3..0a2347ac2 100644
--- a/bindings/devup-ui-wasm/src/lib.rs
+++ b/bindings/devup-ui-wasm/src/lib.rs
@@ -1551,7 +1551,7 @@ mod tests {
         );
 
         // Test getters
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert_eq!(output.css_file(), Some("devup-ui-0.css".to_string()));
         assert_eq!(output.map(), Some("//# sourceMappingURL=test".to_string()));
         assert!(output.css().is_some());
@@ -1951,7 +1951,7 @@ mod tests {
 
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert!(output.map().is_some());
     }
 
@@ -1975,7 +1975,7 @@ mod tests {
 
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code().is_empty());
+        assert_ne!(output.code(), "");
         assert!(output.map().is_none());
     }
 
@@ -2000,7 +2000,7 @@ mod tests {
 
         assert!(result.is_err());
         if let Err(error) = result {
-            assert!(!error.is_empty());
+            assert_ne!(error, "");
         }
     }
 
diff --git a/libs/css/src/theme_tokens.rs b/libs/css/src/theme_tokens.rs
index d8d8fb021..3b2346aed 100644
--- a/libs/css/src/theme_tokens.rs
+++ b/libs/css/src/theme_tokens.rs
@@ -119,7 +119,7 @@ mod tests {
         set_typography_keys(vec!["body".to_string(), "title".to_string()]);
         assert_eq!(get_typography_keys(), vec!["body", "title"]);
         set_typography_keys(vec![]);
-        assert!(get_typography_keys().is_empty());
+        assert_eq!(get_typography_keys(), Vec::<String>::new());
     }
 
     #[test]
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 68981f36c..96c6ca430 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -836,8 +836,8 @@ mod tests {
             alternate: None,
         };
 
-        assert!(empty.extract().is_empty());
-        assert!(empty.into_extract().is_empty());
+        assert_eq!(empty.extract(), vec![]);
+        assert_eq!(empty.into_extract(), vec![]);
     }
 
     #[test]
@@ -13598,7 +13598,7 @@ globalCss({
         );
         assert!(result.is_ok());
         let output = result.unwrap();
-        assert!(!output.code.is_empty());
+        assert_ne!(output.code, "");
     }
 
     #[test]
@@ -18778,7 +18778,7 @@ export const k = styled('div')({ color: SIZE });",
             &memory_resolver(CONSTANT_MODULES),
         )
         .unwrap();
-        assert!(without_imports.dependencies.is_empty());
+        assert_eq!(without_imports.dependencies.len(), 0);
         let without_constants = extract_with_modules(
             "/src/Handler.tsx",
             "import { Box } from '@devup-ui/react';\nimport { handler } from './handler';\nexport const a = <Box onClick={handler} color='red' />;",
diff --git a/libs/extractor/src/tailwind.rs b/libs/extractor/src/tailwind.rs
index 87e9f5178..70643aa7c 100644
--- a/libs/extractor/src/tailwind.rs
+++ b/libs/extractor/src/tailwind.rs
@@ -284,7 +284,7 @@ pub struct TailwindClass {
 /// non-overlapping) but mutates the existing buffer instead of allocating a new
 /// `String`. `needle` must be non-empty.
 fn remove_all_substr(haystack: &mut String, needle: &str) {
-    debug_assert!(!needle.is_empty());
+    debug_assert_ne!(needle, "");
     let mut search_from = 0;
     while let Some(rel) = haystack[search_from..].find(needle) {
         let at = search_from + rel;
@@ -3934,7 +3934,7 @@ mod tests {
     #[test]
     fn test_empty_string() {
         let styles = parse_tailwind_to_styles("");
-        assert!(styles.is_empty());
+        assert_eq!(styles, vec![]);
     }
 
     #[test]
diff --git a/packages/components/src/__tests__/forward-ref.browser.test.tsx b/packages/components/src/__tests__/forward-ref.browser.test.tsx
new file mode 100644
index 000000000..59d355290
--- /dev/null
+++ b/packages/components/src/__tests__/forward-ref.browser.test.tsx
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'bun:test'
+import { render } from 'bun-test-env-dom'
+import { createRef } from 'react'
+
+import { Button, Input, Radio, Textarea } from '../index'
+
+describe('forwardRef', () => {
+  it('hands each component ref to its form element', () => {
+    const button = createRef<HTMLButtonElement>()
+    const input = createRef<HTMLInputElement>()
+    const radio = createRef<HTMLInputElement>()
+    const textarea = createRef<HTMLTextAreaElement>()
+    render(
+      <>
+        <Button ref={button}>b</Button>
+        <Input ref={input} />
+        <Radio ref={radio}>r</Radio>
+        <Textarea ref={textarea} />
+      </>,
+    )
+    expect(button.current?.tagName).toBe('BUTTON')
+    expect(input.current?.tagName).toBe('INPUT')
+    expect(radio.current?.type).toBe('radio')
+    expect(textarea.current?.tagName).toBe('TEXTAREA')
+  })
+})
diff --git a/packages/components/src/__tests__/index.browser.test.ts b/packages/components/src/__tests__/index.browser.test.ts
index fbd6e4833..01a760d3a 100644
--- a/packages/components/src/__tests__/index.browser.test.ts
+++ b/packages/components/src/__tests__/index.browser.test.ts
@@ -4,12 +4,12 @@ describe('export', () => {
   it('should export components', async () => {
     const index = await import('../index')
     expect({ ...index }).toEqual({
-      Button: expect.any(Function),
-      Input: expect.any(Function),
-      Textarea: expect.any(Function),
+      Button: expect.any(Object),
+      Input: expect.any(Object),
+      Textarea: expect.any(Object),
       Stepper: expect.any(Function),
       Select: expect.any(Function),
-      Radio: expect.any(Function),
+      Radio: expect.any(Object),
       RadioGroup: expect.any(Function),
       SelectContainer: expect.any(Function),
       SelectDivider: expect.any(Function),
@@ -23,7 +23,7 @@ describe('export', () => {
       SelectContext: expect.any(Object),
       useSelect: expect.any(Function),
       Toggle: expect.any(Function),
-      Checkbox: expect.any(Function),
+      Checkbox: expect.any(Object),
     })
   })
 })
diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
index f63b3da96..3581d3f05 100644
--- a/packages/components/src/components/Button/index.tsx
+++ b/packages/components/src/components/Button/index.tsx
@@ -5,6 +5,7 @@ import {
   css,
   type DevupThemeTypography,
 } from '@devup-ui/react'
+import { forwardRef } from 'react'
 
 import { IconSpinner } from './IconSpinner'
 
@@ -27,241 +28,247 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   loadingSpinner?: 'whole' | 'partial'
 }
 
-export function Button({
-  variant = 'default',
-  type = 'button',
-  colors,
-  danger = false,
-  children,
-  size = 'md',
-  className,
-  icon,
-  ellipsis = false,
-  typography,
-  disabled,
-  loading = false,
-  loadingSpinner = 'whole',
-  ...props
-}: ButtonProps): React.ReactElement {
-  return (
-    <DevupButton
-      _active={
-        {
-          primary: {
-            bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)`,
-          },
-          default: {
-            bg: {
-              true: 'var(--error, #D52B2E)',
-              false: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,
-            }[danger.toString()],
-            border: {
-              true: '1px solid var(--error, #D52B2E)',
-              false: '1px solid var(--primary, #8163E1)',
-            }[danger.toString()],
-            color: 'var(--text, #272727)',
-          },
-        }[variant]
-      }
-      _disabled={
-        {
-          primary: {
-            color: '#D6D7DE',
-            bgColor: '#F0F0F3',
-            cursor: 'not-allowed',
-          },
-          default: {
-            color: '#D6D7DE',
-            bgColor: '#F0F0F3',
-            cursor: 'not-allowed',
-            borderColor: 'var(--border, #E4E4E4)',
-          },
-        }[variant]
-      }
-      _focusVisible={{
-        outline: '2px solid',
-        outlineColor: {
-          primary: 'var(--primaryFocus, #9385D3)',
-          default: {
-            true: 'var(--error, #FF5B5E)',
-            false: 'var(--primaryFocus, #9385D3)',
-          }[danger.toString()],
-        }[variant],
-      }}
-      _hover={
-        {
-          primary: {
-            bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)`,
-          },
-          default: {
-            borderColor: {
-              true: 'var(--error, #D52B2E)',
-              false: 'var(--primary, #8163E1)',
-            }[danger.toString()],
-            bg:
-              !danger &&
-              `color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,
-          },
-        }[variant]
-      }
-      _themeDark={{
-        _active: {
-          primary: {
-            bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);`,
-          },
-          default: {
-            bg: {
-              true: 'var(--error, #FF5B5E)',
-              false: 'var(--primary, #8163E1)',
-            }[danger.toString()],
-            color: 'var(--text, #F6F6F6)',
-          },
-        }[variant],
-        _disabled: {
-          primary: {
-            color: '#373737',
-            bgColor: '#47474A',
-            borderColor: 'transparent',
-          },
-          default: {
-            color: '#373737',
-            bgColor: '#47474A',
-            borderColor: 'transparent',
-          },
-        }[variant],
-        _hover: {
-          primary: {
-            bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);`,
-            outlineColor: `var(--primary, #674DC7)`,
-          },
-          default: {
-            borderColor: {
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = 'default',
+      type = 'button',
+      colors,
+      danger = false,
+      children,
+      size = 'md',
+      className,
+      icon,
+      ellipsis = false,
+      typography,
+      disabled,
+      loading = false,
+      loadingSpinner = 'whole',
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <DevupButton
+        ref={ref}
+        _active={
+          {
+            primary: {
+              bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)`,
+            },
+            default: {
+              bg: {
+                true: 'var(--error, #D52B2E)',
+                false: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,
+              }[danger.toString()],
+              border: {
+                true: '1px solid var(--error, #D52B2E)',
+                false: '1px solid var(--primary, #8163E1)',
+              }[danger.toString()],
+              color: 'var(--text, #272727)',
+            },
+          }[variant]
+        }
+        _disabled={
+          {
+            primary: {
+              color: '#D6D7DE',
+              bgColor: '#F0F0F3',
+              cursor: 'not-allowed',
+            },
+            default: {
+              color: '#D6D7DE',
+              bgColor: '#F0F0F3',
+              cursor: 'not-allowed',
+              borderColor: 'var(--border, #E4E4E4)',
+            },
+          }[variant]
+        }
+        _focusVisible={{
+          outline: '2px solid',
+          outlineColor: {
+            primary: 'var(--primaryFocus, #9385D3)',
+            default: {
               true: 'var(--error, #FF5B5E)',
-              false: 'var(--primary, #8163E1)',
+              false: 'var(--primaryFocus, #9385D3)',
             }[danger.toString()],
-            bg:
-              !danger &&
-              `color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)`,
+          }[variant],
+        }}
+        _hover={
+          {
+            primary: {
+              bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)`,
+            },
+            default: {
+              borderColor: {
+                true: 'var(--error, #D52B2E)',
+                false: 'var(--primary, #8163E1)',
+              }[danger.toString()],
+              bg:
+                !danger &&
+                `color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,
+            },
+          }[variant]
+        }
+        _themeDark={{
+          _active: {
+            primary: {
+              bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);`,
+            },
+            default: {
+              bg: {
+                true: 'var(--error, #FF5B5E)',
+                false: 'var(--primary, #8163E1)',
+              }[danger.toString()],
+              color: 'var(--text, #F6F6F6)',
+            },
+          }[variant],
+          _disabled: {
+            primary: {
+              color: '#373737',
+              bgColor: '#47474A',
+              borderColor: 'transparent',
+            },
+            default: {
+              color: '#373737',
+              bgColor: '#47474A',
+              borderColor: 'transparent',
+            },
+          }[variant],
+          _hover: {
+            primary: {
+              bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);`,
+              outlineColor: `var(--primary, #674DC7)`,
+            },
+            default: {
+              borderColor: {
+                true: 'var(--error, #FF5B5E)',
+                false: 'var(--primary, #8163E1)',
+              }[danger.toString()],
+              bg:
+                !danger &&
+                `color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)`,
+            },
+          }[variant],
+          _focusVisible: {
+            outlineColor: {
+              primary: 'var(--primaryFocus, #927CE4)',
+              default: {
+                true: 'var(--error, #D52B2E)',
+                false: 'var(--primaryFocus, #927CE4)',
+              }[danger.toString()],
+            }[variant],
           },
-        }[variant],
-        _focusVisible: {
-          outlineColor: {
-            primary: 'var(--primaryFocus, #927CE4)',
+          bg: {
+            primary: 'var(--primary, #8163E1)',
+            default: 'var(--inputBackground, #2E2E2E)',
+          }[variant],
+        }}
+        aria-disabled={disabled}
+        aria-label="button"
+        bg={
+          {
+            primary: 'var(--primary, #8163E1)',
+            default: 'var(--inputBackground, #FFF)',
+          }[variant]
+        }
+        border={
+          {
+            primary: 'none',
+            default: '1px solid var(--border, #E4E4E4)',
+          }[variant]
+        }
+        borderRadius={
+          {
+            primary: '8px',
+            default: '10px',
+          }[variant]
+        }
+        boxSizing="border-box"
+        className={className}
+        color={
+          {
+            primary: '#FFF',
             default: {
               true: 'var(--error, #D52B2E)',
-              false: 'var(--primaryFocus, #927CE4)',
+              false: 'var(--text, #272727)',
             }[danger.toString()],
-          }[variant],
-        },
-        bg: {
-          primary: 'var(--primary, #8163E1)',
-          default: 'var(--inputBackground, #2E2E2E)',
-        }[variant],
-      }}
-      aria-disabled={disabled}
-      aria-label="button"
-      bg={
-        {
-          primary: 'var(--primary, #8163E1)',
-          default: 'var(--inputBackground, #FFF)',
-        }[variant]
-      }
-      border={
-        {
-          primary: 'none',
-          default: '1px solid var(--border, #E4E4E4)',
-        }[variant]
-      }
-      borderRadius={
-        {
-          primary: '8px',
-          default: '10px',
-        }[variant]
-      }
-      boxSizing="border-box"
-      className={className}
-      color={
-        {
-          primary: '#FFF',
-          default: {
-            true: 'var(--error, #D52B2E)',
-            false: 'var(--text, #272727)',
-          }[danger.toString()],
-        }[variant]
-      }
-      cursor="pointer"
-      disabled={disabled}
-      fontSize={
-        {
-          default: ['14px', null, null, null, '15px'],
-          primary: ['15px', null, null, null, '16px'],
-        }[variant]
-      }
-      fontWeight={700}
-      letterSpacing={
-        {
-          default: ['-0.02em', null, null, null, '-0.03em'],
-          primary: ['0px', null, null, null, '-0.01em'],
-        }[variant]
-      }
-      outlineOffset="2px"
-      pos="relative"
-      px={
-        {
-          false: { sm: '12px', md: '16px', lg: '20px' }[size],
-          true: { sm: '24px', md: '28px', lg: '32px' }[size],
-        }[(!!(icon || loading)).toString()]
-      }
-      py={{ sm: '8px', md: '10px', lg: '12px' }[size]}
-      styleOrder={1}
-      styleVars={{
-        primary: colors?.primary,
-        error: colors?.error,
-        text: colors?.text,
-        border: colors?.border,
-        inputBackground: colors?.inputBackground,
-        primaryFocus: colors?.primaryFocus,
-      }}
-      transition=".25s"
-      type={type}
-      typography={typography}
-      {...props}
-    >
-      <Box maxW="100%" mx="auto" pos="relative" w="fit-content">
-        {(icon || loading) && (
-          <Center
-            boxSize="24px"
-            left="4px"
-            pos="absolute"
-            role="presentation"
-            selectors={{
-              '&>svg': {
-                color: 'inherit',
-              },
-            }}
-            top="50%"
-            transform="translate(-100%, -50%)"
+          }[variant]
+        }
+        cursor="pointer"
+        disabled={disabled}
+        fontSize={
+          {
+            default: ['14px', null, null, null, '15px'],
+            primary: ['15px', null, null, null, '16px'],
+          }[variant]
+        }
+        fontWeight={700}
+        letterSpacing={
+          {
+            default: ['-0.02em', null, null, null, '-0.03em'],
+            primary: ['0px', null, null, null, '-0.01em'],
+          }[variant]
+        }
+        outlineOffset="2px"
+        pos="relative"
+        px={
+          {
+            false: { sm: '12px', md: '16px', lg: '20px' }[size],
+            true: { sm: '24px', md: '28px', lg: '32px' }[size],
+          }[(!!(icon || loading)).toString()]
+        }
+        py={{ sm: '8px', md: '10px', lg: '12px' }[size]}
+        styleOrder={1}
+        styleVars={{
+          primary: colors?.primary,
+          error: colors?.error,
+          text: colors?.text,
+          border: colors?.border,
+          inputBackground: colors?.inputBackground,
+          primaryFocus: colors?.primaryFocus,
+        }}
+        transition=".25s"
+        type={type}
+        typography={typography}
+        {...props}
+      >
+        <Box maxW="100%" mx="auto" pos="relative" w="fit-content">
+          {(icon || loading) && (
+            <Center
+              boxSize="24px"
+              left="4px"
+              pos="absolute"
+              role="presentation"
+              selectors={{
+                '&>svg': {
+                  color: 'inherit',
+                },
+              }}
+              top="50%"
+              transform="translate(-100%, -50%)"
+            >
+              {loading ? <IconSpinner type={loadingSpinner} /> : icon}
+            </Center>
+          )}
+          <Box
+            className={
+              ellipsis
+                ? css({
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  })
+                : undefined
+            }
+            lineHeight="1.2"
+            minH="1.2em"
+            transform={!!(icon || loading) && 'translateX(8px)'}
           >
-            {loading ? <IconSpinner type={loadingSpinner} /> : icon}
-          </Center>
-        )}
-        <Box
-          className={
-            ellipsis
-              ? css({
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                })
-              : undefined
-          }
-          lineHeight="1.2"
-          minH="1.2em"
-          transform={!!(icon || loading) && 'translateX(8px)'}
-        >
-          {children}
+            {children}
+          </Box>
         </Box>
-      </Box>
-    </DevupButton>
-  )
-}
+      </DevupButton>
+    )
+  },
+)
diff --git a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
index e966d3184..c428172d3 100644
--- a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
@@ -1,5 +1,6 @@
 import { describe, expect, it, mock } from 'bun:test'
 import { act, render, userEvent } from 'bun-test-env-dom'
+import { createRef } from 'react'
 
 import { Checkbox } from '../index'
 
@@ -421,4 +422,10 @@ describe('Checkbox', () => {
     expect(onChange).toHaveBeenCalledWith(true)
     expect(onChange).toHaveBeenCalledTimes(1)
   })
+
+  it('hands its ref to the checkbox input', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<Checkbox ref={ref}>Test Checkbox</Checkbox>)
+    expect(ref.current?.type).toBe('checkbox')
+  })
 })
diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index 065fdbe4f..58bb76b31 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, css, Flex, Input, Text } from '@devup-ui/react'
-import { ComponentProps, useId, useState } from 'react'
+import { ComponentProps, forwardRef, useId, useState } from 'react'
 
 import { CheckIcon } from './CheckIcon'
 
@@ -20,137 +20,144 @@ interface CheckboxProps extends Omit<
   }
 }
 
-export function Checkbox({
-  children,
-  disabled,
-  checked,
-  defaultChecked = false,
-  colors,
-  onChange,
-  ...props
-}: CheckboxProps) {
-  const generateId = useId()
-  const [innerChecked, setInnerChecked] = useState(defaultChecked)
-  const finalChecked = checked ?? innerChecked
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(
+    {
+      children,
+      disabled,
+      checked,
+      defaultChecked = false,
+      colors,
+      onChange,
+      ...props
+    },
+    ref,
+  ) {
+    const generateId = useId()
+    const [innerChecked, setInnerChecked] = useState(defaultChecked)
+    const finalChecked = checked ?? innerChecked
 
-  const handleChange = (value: boolean) => {
-    setInnerChecked(value)
-    onChange?.(value)
-  }
+    const handleChange = (value: boolean) => {
+      setInnerChecked(value)
+      onChange?.(value)
+    }
 
-  return (
-    <Flex alignItems="center" gap="8px">
-      <label
-        className={css({
-          position: 'relative',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '16px',
-          height: '16px',
-          cursor: disabled ? 'not-allowed' : 'pointer',
-        })}
-        htmlFor={generateId}
-      >
-        <Input
-          _active={
-            !disabled && {
-              bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))',
+    return (
+      <Flex alignItems="center" gap="8px">
+        <label
+          className={css({
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '16px',
+            height: '16px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+          })}
+          htmlFor={generateId}
+        >
+          <Input
+            ref={ref}
+            _active={
+              !disabled && {
+                bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 20%, #FFF 80%), color-mix(in srgb, var(--primary, #6670F9) 30%, #000 70%))',
+              }
             }
-          }
-          _checked={{
-            bg: 'var(--primary, light-dark(#6159D4, #6670F9))',
-            border: 'none',
-            _hover: !disabled && {
-              bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
-            },
-            _disabled: {
-              bg: 'light-dark(#F0F0F3, #47474A)',
-            },
-          }}
-          _disabled={{
-            bg: 'light-dark( #F0F0F3, #47474A)',
-          }}
-          _hover={
-            !disabled && {
-              bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
-              border: '1px solid var(--primary, light-dark(#6159D4, #6670F9))',
+            _checked={{
+              bg: 'var(--primary, light-dark(#6159D4, #6670F9))',
+              border: 'none',
+              _hover: !disabled && {
+                bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
+              },
+              _disabled: {
+                bg: 'light-dark(#F0F0F3, #47474A)',
+              },
+            }}
+            _disabled={{
+              bg: 'light-dark( #F0F0F3, #47474A)',
+            }}
+            _hover={
+              !disabled && {
+                bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
+                border:
+                  '1px solid var(--primary, light-dark(#6159D4, #6670F9))',
+              }
             }
-          }
-          accentColor="var(--primary, light-dark(#6159D4, #6670F9))"
-          appearance="none"
-          bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
-          border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
-          borderRadius="2px"
-          checked={finalChecked}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          disabled={disabled}
-          display="block"
-          height="100%"
-          id={generateId}
-          left={0}
-          m="0"
-          onChange={
-            disabled ? undefined : (e) => handleChange(e.target.checked)
-          }
-          opacity={1}
-          pointerEvents="none"
-          pos="absolute"
-          styleOrder={1}
-          styleVars={{
-            primary: colors?.primary,
-            border: colors?.border,
-            inputBg: colors?.inputBg,
-          }}
-          top={0}
-          type="checkbox"
-          width="100%"
-          zIndex={0}
-          {...props}
-        />
-        {finalChecked && (
-          <Box
-            as={CheckIcon}
-            opacity="1"
+            accentColor="var(--primary, light-dark(#6159D4, #6670F9))"
+            appearance="none"
+            bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
+            border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
+            borderRadius="2px"
+            checked={finalChecked}
+            cursor={disabled ? 'not-allowed' : 'pointer'}
+            disabled={disabled}
+            display="block"
+            height="100%"
+            id={generateId}
+            left={0}
+            m="0"
+            onChange={
+              disabled ? undefined : (e) => handleChange(e.target.checked)
+            }
+            opacity={1}
             pointerEvents="none"
-            props={{
-              color: disabled
-                ? 'light-dark(#D6D7DE, #47474A)'
-                : 'var(--checkIcon, #FFF)',
-            }}
+            pos="absolute"
+            styleOrder={1}
             styleVars={{
-              checkIcon: colors?.checkIcon,
+              primary: colors?.primary,
+              border: colors?.border,
+              inputBg: colors?.inputBg,
             }}
-            zIndex="1"
+            top={0}
+            type="checkbox"
+            width="100%"
+            zIndex={0}
+            {...props}
           />
-        )}
-      </label>
+          {finalChecked && (
+            <Box
+              as={CheckIcon}
+              opacity="1"
+              pointerEvents="none"
+              props={{
+                color: disabled
+                  ? 'light-dark(#D6D7DE, #47474A)'
+                  : 'var(--checkIcon, #FFF)',
+              }}
+              styleVars={{
+                checkIcon: colors?.checkIcon,
+              }}
+              zIndex="1"
+            />
+          )}
+        </label>
 
-      <label
-        className={css({
-          cursor: disabled ? 'not-allowed' : 'pointer',
-        })}
-        htmlFor={generateId}
-      >
-        {typeof children === 'string' ? (
-          <Text
-            color={
-              disabled
-                ? 'light-dark(#D6D7DE, #6F6E6E)'
-                : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
-            }
-            fontSize="14px"
-            styleVars={{
-              text: colors?.text,
-            }}
-            userSelect="none"
-          >
-            {children}
-          </Text>
-        ) : (
-          children
-        )}
-      </label>
-    </Flex>
-  )
-}
+        <label
+          className={css({
+            cursor: disabled ? 'not-allowed' : 'pointer',
+          })}
+          htmlFor={generateId}
+        >
+          {typeof children === 'string' ? (
+            <Text
+              color={
+                disabled
+                  ? 'light-dark(#D6D7DE, #6F6E6E)'
+                  : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
+              }
+              fontSize="14px"
+              styleVars={{
+                text: colors?.text,
+              }}
+              userSelect="none"
+            >
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </label>
+      </Flex>
+    )
+  },
+)
diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx
index ceff73d7a..f86b34450 100644
--- a/packages/components/src/components/Input/index.tsx
+++ b/packages/components/src/components/Input/index.tsx
@@ -8,7 +8,7 @@ import {
   Input as DevupInput,
   Text,
 } from '@devup-ui/react'
-import { ComponentProps, useState } from 'react'
+import { ComponentProps, forwardRef, useState } from 'react'
 
 interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
   type?: Exclude<ComponentProps<'input'>['type'], 'file'>
@@ -37,23 +37,26 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
   icon?: React.ReactNode
 }
 
-export function Input({
-  defaultValue = '',
-  value: valueProp,
-  onChange: onChangeProp,
-  typography,
-  error = false,
-  errorMessage,
-  allowClear = true,
-  icon,
-  colors,
-  disabled,
-  className,
-  classNames,
-  readOnly,
-  onClear,
-  ...props
-}: InputProps) {
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    defaultValue = '',
+    value: valueProp,
+    onChange: onChangeProp,
+    typography,
+    error = false,
+    errorMessage,
+    allowClear = true,
+    icon,
+    colors,
+    disabled,
+    className,
+    classNames,
+    readOnly,
+    onClear,
+    ...props
+  },
+  ref,
+) {
   const [value, setValue] = useState(defaultValue)
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -101,6 +104,7 @@ export function Input({
         </Center>
       )}
       <DevupInput
+        ref={ref}
         _disabled={{
           _placeholder: {
             color: 'var(--inputDisabledText, light-dark(#D6D7DE, #373737))',
@@ -171,7 +175,7 @@ export function Input({
       )}
     </Box>
   )
-}
+})
 
 export function ClearButton(props: ComponentProps<'button'>) {
   return (
diff --git a/packages/components/src/components/Radio/index.tsx b/packages/components/src/components/Radio/index.tsx
index b6b5e921f..f9458fd43 100644
--- a/packages/components/src/components/Radio/index.tsx
+++ b/packages/components/src/components/Radio/index.tsx
@@ -1,4 +1,5 @@
 import { Box, Input, Text } from '@devup-ui/react'
+import { forwardRef } from 'react'
 
 type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
   checked?: boolean
@@ -38,20 +39,23 @@ type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
       }
   )
 
-export function Radio({
-  className,
-  disabled,
-  children,
-  variant = 'default',
-  checked,
-  classNames,
-  styles,
-  style,
-  firstButton,
-  lastButton,
-  colors,
-  ...props
-}: RadioProps) {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+  {
+    className,
+    disabled,
+    children,
+    variant = 'default',
+    checked,
+    classNames,
+    styles,
+    style,
+    firstButton,
+    lastButton,
+    colors,
+    ...props
+  },
+  ref,
+) {
   const isButton = variant === 'button'
   return (
     <Box
@@ -69,6 +73,7 @@ export function Radio({
     >
       {isButton ? (
         <Input
+          ref={ref}
           checked={checked}
           className={className}
           data-radio-input
@@ -81,6 +86,7 @@ export function Radio({
         />
       ) : (
         <Input
+          ref={ref}
           _focus={{
             outline: '1px sold var(--border, var(--primary))',
           }}
@@ -225,4 +231,4 @@ export function Radio({
       )}
     </Box>
   )
-}
+})
diff --git a/packages/components/src/components/Textarea/index.tsx b/packages/components/src/components/Textarea/index.tsx
index dd0dded2f..3fc9b9d2e 100644
--- a/packages/components/src/components/Textarea/index.tsx
+++ b/packages/components/src/components/Textarea/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, type DevupThemeTypography, Text } from '@devup-ui/react'
-import { type ComponentProps } from 'react'
+import { type ComponentProps, forwardRef } from 'react'
 
 interface TextareaProps extends ComponentProps<'textarea'> {
   typography?: keyof DevupThemeTypography
@@ -23,106 +23,112 @@ interface TextareaProps extends ComponentProps<'textarea'> {
   }
 }
 
-export function Textarea({
-  typography,
-  error = false,
-  errorMessage,
-  colors,
-  disabled,
-  className,
-  classNames,
-  rows = 3,
-  ...props
-}: TextareaProps) {
-  return (
-    <Box
-      className={classNames?.container}
-      display="inline-block"
-      pos="relative"
-      selectors={{ '&, & *': { boxSizing: 'border-box' } }}
-      w="100%"
-    >
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function Textarea(
+    {
+      typography,
+      error = false,
+      errorMessage,
+      colors,
+      disabled,
+      className,
+      classNames,
+      rows = 3,
+      ...props
+    },
+    ref,
+  ) {
+    return (
       <Box
-        _disabled={{
-          _placeholder: {
+        className={classNames?.container}
+        display="inline-block"
+        pos="relative"
+        selectors={{ '&, & *': { boxSizing: 'border-box' } }}
+        w="100%"
+      >
+        <Box
+          ref={ref}
+          _disabled={{
+            _placeholder: {
+              color: 'var(--disabledText, light-dark(#D6D7DE, #373737))',
+            },
+            bg: 'var(--disabledBg, light-dark(#F0F0F3, #414244))',
+            borderColor: 'var(--border, light-dark(#E4E4E4, #434343))',
             color: 'var(--disabledText, light-dark(#D6D7DE, #373737))',
-          },
-          bg: 'var(--disabledBg, light-dark(#F0F0F3, #414244))',
-          borderColor: 'var(--border, light-dark(#E4E4E4, #434343))',
-          color: 'var(--disabledText, light-dark(#D6D7DE, #373737))',
-          cursor: 'not-allowed',
-          opacity: 0.5,
-        }}
-        _focus={{
-          borderColor: 'var(--primary, light-dark(#674DC7, #8163E1))',
-          boxShadow:
-            '0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))',
-          outline: 'none',
-        }}
-        _hover={
-          !disabled && {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+          }}
+          _focus={{
             borderColor: 'var(--primary, light-dark(#674DC7, #8163E1))',
-          }
-        }
-        _placeholder={{
-          color: 'var(--placeholder, light-dark(#A9A8AB, #CBCBCB))',
-        }}
-        aria-invalid={error || undefined}
-        aria-label="textarea"
-        as="textarea"
-        bg="var(--background, light-dark(#FFFFFF, #2E2E2E))"
-        borderColor="var(--border, light-dark(#E4E4E4, #434343))"
-        borderRadius="8px"
-        borderStyle="solid"
-        borderWidth="1px"
-        className={`${className || ''} ${classNames?.textarea || ''}`.trim()}
-        color="var(--text, light-dark(#272727, #F6F6F6))"
-        disabled={disabled}
-        fontSize={['16px', null, null, null, '14px']}
-        lineHeight="1.5"
-        minH="80px"
-        p="12px"
-        rows={rows}
-        selectors={{
-          '&[aria-invalid="true"]': {
-            borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
-          },
-          '&[aria-invalid="true"]:focus': {
-            borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
             boxShadow:
-              '0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))',
-          },
-        }}
-        styleOrder={1}
-        styleVars={{
-          primary: colors?.primary,
-          error: colors?.error,
-          text: colors?.text,
-          border: colors?.border,
-          background: colors?.background,
-          placeholder: colors?.placeholder,
-          focusRing: colors?.focusRing,
-        }}
-        transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
-        typography={typography}
-        w="100%"
-        {...props}
-      />
-      {error && errorMessage && (
-        <Text
-          aria-label="error-message"
-          bottom="-8px"
-          className={classNames?.errorMessage}
-          color="var(--error, light-dark(#D52B2E, #FF5B5E))"
-          fontSize="12px"
-          left="0"
-          pos="absolute"
+              '0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))',
+            outline: 'none',
+          }}
+          _hover={
+            !disabled && {
+              borderColor: 'var(--primary, light-dark(#674DC7, #8163E1))',
+            }
+          }
+          _placeholder={{
+            color: 'var(--placeholder, light-dark(#A9A8AB, #CBCBCB))',
+          }}
+          aria-invalid={error || undefined}
+          aria-label="textarea"
+          as="textarea"
+          bg="var(--background, light-dark(#FFFFFF, #2E2E2E))"
+          borderColor="var(--border, light-dark(#E4E4E4, #434343))"
+          borderRadius="8px"
+          borderStyle="solid"
+          borderWidth="1px"
+          className={`${className || ''} ${classNames?.textarea || ''}`.trim()}
+          color="var(--text, light-dark(#272727, #F6F6F6))"
+          disabled={disabled}
+          fontSize={['16px', null, null, null, '14px']}
+          lineHeight="1.5"
+          minH="80px"
+          p="12px"
+          rows={rows}
+          selectors={{
+            '&[aria-invalid="true"]': {
+              borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
+            },
+            '&[aria-invalid="true"]:focus': {
+              borderColor: 'var(--error, light-dark(#D52B2E, #FF5B5E))',
+              boxShadow:
+                '0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))',
+            },
+          }}
           styleOrder={1}
-          transform="translateY(100%)"
-        >
-          {errorMessage}
-        </Text>
-      )}
-    </Box>
-  )
-}
+          styleVars={{
+            primary: colors?.primary,
+            error: colors?.error,
+            text: colors?.text,
+            border: colors?.border,
+            background: colors?.background,
+            placeholder: colors?.placeholder,
+            focusRing: colors?.focusRing,
+          }}
+          transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+          typography={typography}
+          w="100%"
+          {...props}
+        />
+        {error && errorMessage && (
+          <Text
+            aria-label="error-message"
+            bottom="-8px"
+            className={classNames?.errorMessage}
+            color="var(--error, light-dark(#D52B2E, #FF5B5E))"
+            fontSize="12px"
+            left="0"
+            pos="absolute"
+            styleOrder={1}
+            transform="translateY(100%)"
+          >
+            {errorMessage}
+          </Text>
+        )}
+      </Box>
+    )
+  },
+)