diff --git a/apps/design-system/content/docs/components/textarea.mdx b/apps/design-system/content/docs/components/textarea.mdx
index 07b91d58963..a1ab2438d55 100644
--- a/apps/design-system/content/docs/components/textarea.mdx
+++ b/apps/design-system/content/docs/components/textarea.mdx
@@ -72,6 +72,12 @@ import { Textarea } from '@/components/ui/textarea'
 
 <ComponentPreview name="textarea-with-button" />
 
+### With addon
+
+An addon places supporting content inside the same bordered field as the textarea. Wrap `InputGroupTextarea` and `InputGroupAddon` in `InputGroup`, and use `align="block-end"` to place the addon below the text.
+
+<ComponentPreview name="textarea-with-addon" />
+
 ### Form
 
 <ComponentPreview name="textarea-form" />
diff --git a/apps/design-system/registry/default/example/textarea-with-addon.tsx b/apps/design-system/registry/default/example/textarea-with-addon.tsx
new file mode 100644
index 00000000000..079fcd559b6
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-with-addon.tsx
@@ -0,0 +1,12 @@
+import { InputGroup, InputGroupAddon, InputGroupText, InputGroupTextarea } from 'ui'
+
+export default function TextareaWithAddon() {
+  return (
+    <InputGroup className="w-full max-w-sm">
+      <InputGroupTextarea placeholder="Type your message here." rows={4} maxLength={120} />
+      <InputGroupAddon align="block-end">
+        <InputGroupText>120 character limit</InputGroupText>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts
index e1baf7235da..13c8741b839 100644
--- a/apps/design-system/registry/examples.ts
+++ b/apps/design-system/registry/examples.ts
@@ -1021,6 +1021,12 @@ export const examples: Registry = [
     registryDependencies: ['textarea', 'form'],
     files: ['example/textarea-form.tsx'],
   },
+  {
+    name: 'textarea-with-addon',
+    type: 'components:example',
+    registryDependencies: ['textarea', 'input-group'],
+    files: ['example/textarea-with-addon.tsx'],
+  },
   {
     name: 'textarea-with-button',
     type: 'components:example',
diff --git a/packages/ui/src/components/shadcn/ui/input-group.tsx b/packages/ui/src/components/shadcn/ui/input-group.tsx
index d0506aa2216..e2b7411330d 100644
--- a/packages/ui/src/components/shadcn/ui/input-group.tsx
+++ b/packages/ui/src/components/shadcn/ui/input-group.tsx
@@ -112,7 +112,9 @@ function InputGroupAddon({
         if ((e.target as HTMLElement).closest('button')) {
           return
         }
-        e.currentTarget.parentElement?.querySelector('input')?.focus()
+        e.currentTarget.parentElement
+          ?.querySelector<HTMLElement>('[data-slot=input-group-control]')
+          ?.focus()
       }}
       {...props}
     />
@@ -191,7 +193,7 @@ const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       ref={ref}
       data-slot="input-group-control"
       className={cn(
-        'flex-1 resize-none rounded-none border border-transparent bg-transparent py-0 shadow-none',
+        'flex-1 resize-none rounded-none border border-transparent bg-transparent pt-2 pb-0 shadow-none',
         'hover:border-transparent focus:border-transparent focus-visible:border-transparent',
         'focus-visible:ring-0 focus-visible:ring-offset-0',
         'aria-[invalid=true]:border-transparent aria-[invalid=true]:bg-transparent',