From 52a4b1d466d60d584c2abd106905977c082abadd Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 19 Jan 2026 13:56:42 +0400
Subject: [PATCH] feat: add input-group

---
 .../docs/components/base/input-group.mdx      | 154 +++++++++---------
 .../docs/components/radix/input-group.mdx     | 149 +++++++++--------
 apps/v4/examples/__index__.tsx                | 130 +++++++++++++++
 .../examples/base/input-group-block-end.tsx   |  49 ++++++
 .../examples/base/input-group-block-start.tsx |  56 +++++++
 apps/v4/examples/base/input-group-demo.tsx    | 102 +-----------
 .../v4/examples/base/input-group-dropdown.tsx |  10 +-
 .../examples/base/input-group-inline-end.tsx  |  26 +++
 .../base/input-group-inline-start.tsx         |  22 +++
 apps/v4/examples/base/input-group-kbd.tsx     |  21 +++
 apps/v4/examples/base/input-group-spinner.tsx |  16 +-
 .../examples/base/input-group-with-addons.tsx |   2 +
 .../base/input-group-with-tooltip.tsx         |   4 +-
 .../examples/radix/input-group-block-end.tsx  |  49 ++++++
 .../radix/input-group-block-start.tsx         |  56 +++++++
 apps/v4/examples/radix/input-group-demo.tsx   | 100 +-----------
 .../examples/radix/input-group-inline-end.tsx |  26 +++
 .../radix/input-group-inline-start.tsx        |  22 +++
 apps/v4/examples/radix/input-group-kbd.tsx    |  21 +++
 .../v4/examples/radix/input-group-spinner.tsx |  16 +-
 20 files changed, 668 insertions(+), 363 deletions(-)
 create mode 100644 apps/v4/examples/base/input-group-block-end.tsx
 create mode 100644 apps/v4/examples/base/input-group-block-start.tsx
 create mode 100644 apps/v4/examples/base/input-group-inline-end.tsx
 create mode 100644 apps/v4/examples/base/input-group-inline-start.tsx
 create mode 100644 apps/v4/examples/base/input-group-kbd.tsx
 create mode 100644 apps/v4/examples/radix/input-group-block-end.tsx
 create mode 100644 apps/v4/examples/radix/input-group-block-start.tsx
 create mode 100644 apps/v4/examples/radix/input-group-inline-end.tsx
 create mode 100644 apps/v4/examples/radix/input-group-inline-start.tsx
 create mode 100644 apps/v4/examples/radix/input-group-kbd.tsx

diff --git a/apps/v4/content/docs/components/base/input-group.mdx b/apps/v4/content/docs/components/base/input-group.mdx
index 61fad7c6a8..3234106697 100644
--- a/apps/v4/content/docs/components/base/input-group.mdx
+++ b/apps/v4/content/docs/components/base/input-group.mdx
@@ -1,6 +1,6 @@
 ---
 title: Input Group
-description: Display additional information or actions to an input or textarea.
+description: Add addons, buttons, and helper content to inputs.
 base: base
 component: true
 ---
@@ -10,7 +10,7 @@ import { IconInfoCircle } from "@tabler/icons-react"
 <ComponentPreview
   styleName="base-nova"
   name="input-group-demo"
-  className="[&_.preview]:p-4"
+  previewClassName="h-[26rem]"
 />
 
 ## Installation
@@ -68,12 +68,59 @@ import {
   <InputGroupAddon>
     <SearchIcon />
   </InputGroupAddon>
-  <InputGroupAddon align="inline-end">
-    <InputGroupButton>Search</InputGroupButton>
-  </InputGroupAddon>
 </InputGroup>
 ```
 
+## Align
+
+Use the `align` prop on `InputGroupAddon` to position the addon relative to the input.
+
+<Callout>
+  For proper focus management, `InputGroupAddon` should always be placed after
+  `InputGroupInput` or `InputGroupTextarea` in the DOM. Use the `align` prop to
+  visually position the addon.
+</Callout>
+
+### inline-start
+
+Use `align="inline-start"` to position the addon at the start of the input. This is the default.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-inline-start"
+  previewClassName="h-48"
+/>
+
+### inline-end
+
+Use `align="inline-end"` to position the addon at the end of the input.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-inline-end"
+  previewClassName="h-48"
+/>
+
+### block-start
+
+Use `align="block-start"` to position the addon above the input.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-block-start"
+  previewClassName="h-96"
+/>
+
+### block-end
+
+Use `align="block-end"` to position the addon below the input.
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-block-end"
+  previewClassName="h-[26rem]"
+/>
+
 ## Examples
 
 ### Icon
@@ -81,119 +128,69 @@ import {
 <ComponentPreview
   styleName="base-nova"
   name="input-group-icon"
-  className="[&_.preview]:p-4"
+  previewClassName="h-80"
 />
 
 ### Text
 
-Display additional text information alongside inputs.
-
 <ComponentPreview
   styleName="base-nova"
   name="input-group-text"
-  className="[&_.preview]:p-4"
+  previewClassName="h-80"
 />
 
 ### Button
 
-Add buttons to perform actions within the input group.
-
 <ComponentPreview
   styleName="base-nova"
   name="input-group-button"
-  className="[&_.preview]:p-4"
+  previewClassName="h-72"
 />
 
-### Tooltip
-
-Add tooltips to provide additional context or help.
+### Kbd
 
 <ComponentPreview
   styleName="base-nova"
-  name="input-group-tooltip"
-  className="[&_.preview]:p-4"
-/>
-
-### Textarea
-
-Input groups also work with textarea components. Use `block-start` or `block-end` for alignment.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="input-group-textarea"
-  className="[&_.preview]:p-4"
-/>
-
-### Spinner
-
-Show loading indicators while processing input.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="input-group-spinner"
-  className="[&_.preview]:p-4"
-/>
-
-### Label
-
-Add labels within input groups to improve accessibility.
-
-<ComponentPreview
-  styleName="base-nova"
-  name="input-group-label"
-  className="[&_.preview]:p-4"
+  name="input-group-kbd"
+  previewClassName="h-40"
 />
 
 ### Dropdown
 
-Pair input groups with dropdown menus for complex interactions.
-
 <ComponentPreview
   styleName="base-nova"
   name="input-group-dropdown"
-  className="[&_.preview]:p-4"
+  previewClassName="h-56"
 />
 
-### Button Group
-
-Wrap input groups with button groups to create prefixes and suffixes.
+### Spinner
 
 <ComponentPreview
   styleName="base-nova"
-  name="input-group-button-group"
-  className="[&_.preview]:p-4"
+  name="input-group-spinner"
+  previewClassName="h-80"
+/>
+
+### Textarea
+
+<ComponentPreview
+  styleName="base-nova"
+  name="input-group-textarea"
+  previewClassName="h-96"
 />
 
 ### Custom Input
 
-Add the `data-slot="input-group-control"` attribute to your custom input for automatic behavior and focus state handling.
+Add the `data-slot="input-group-control"` attribute to your custom input for automatic focus state handling.
 
-No style is applied to the custom input. Apply your own styles using the `className` prop.
+Here's an example of a custom resizable textarea from a third-party library.
 
 <ComponentPreview
   styleName="base-nova"
   name="input-group-custom"
-  className="!mb-4 [&_.preview]:p-4"
+  previewClassName="h-56"
 />
 
-```tsx showLineNumbers
-import { InputGroup, InputGroupAddon } from "@/component/ui/input-group"
-import TextareaAutosize from "react-textarea-autosize"
-
-export function InputGroupCustom() {
-  return (
-    <InputGroup>
-      <TextareaAutosize
-        data-slot="input-group-control"
-        className="dark:bg-input/30 flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none"
-        placeholder="Autoresize textarea..."
-      />
-      <InputGroupAddon align="block-end">how</InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
 ## API Reference
 
 ### InputGroup
@@ -297,8 +294,3 @@ All other props are passed through to the underlying `<Textarea />` component.
 </InputGroup>
 ```
 
-## Changelog
-
-### 2025-10-06 `InputGroup`
-
-Add the `min-w-0` class to the `InputGroup` component. See [diff](https://github.com/shadcn-ui/ui/pull/8341/files#diff-0e2ee95d0050ca4c5d82339df86c54e14a6739dc4638fdda0eec8f73aebc2da9).
diff --git a/apps/v4/content/docs/components/radix/input-group.mdx b/apps/v4/content/docs/components/radix/input-group.mdx
index 4b06dcebc3..a495baa64c 100644
--- a/apps/v4/content/docs/components/radix/input-group.mdx
+++ b/apps/v4/content/docs/components/radix/input-group.mdx
@@ -1,6 +1,6 @@
 ---
 title: Input Group
-description: Display additional information or actions to an input or textarea.
+description: Add addons, buttons, and helper content to inputs.
 base: radix
 component: true
 ---
@@ -10,7 +10,7 @@ import { IconInfoCircle } from "@tabler/icons-react"
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-demo"
-  className="[&_.preview]:p-4"
+  previewClassName="h-[26rem]"
 />
 
 ## Installation
@@ -68,12 +68,59 @@ import {
   <InputGroupAddon>
     <SearchIcon />
   </InputGroupAddon>
-  <InputGroupAddon align="inline-end">
-    <InputGroupButton>Search</InputGroupButton>
-  </InputGroupAddon>
 </InputGroup>
 ```
 
+## Align
+
+Use the `align` prop on `InputGroupAddon` to position the addon relative to the input.
+
+<Callout>
+  For proper focus management, `InputGroupAddon` should always be placed after
+  `InputGroupInput` or `InputGroupTextarea` in the DOM. Use the `align` prop to
+  visually position the addon.
+</Callout>
+
+### inline-start
+
+Use `align="inline-start"` to position the addon at the start of the input. This is the default.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-inline-start"
+  previewClassName="h-48"
+/>
+
+### inline-end
+
+Use `align="inline-end"` to position the addon at the end of the input.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-inline-end"
+  previewClassName="h-48"
+/>
+
+### block-start
+
+Use `align="block-start"` to position the addon above the input.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-block-start"
+  previewClassName="h-96"
+/>
+
+### block-end
+
+Use `align="block-end"` to position the addon below the input.
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-block-end"
+  previewClassName="h-[26rem]"
+/>
+
 ## Examples
 
 ### Icon
@@ -81,119 +128,69 @@ import {
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-icon"
-  className="[&_.preview]:p-4"
+  previewClassName="h-80"
 />
 
 ### Text
 
-Display additional text information alongside inputs.
-
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-text"
-  className="[&_.preview]:p-4"
+  previewClassName="h-80"
 />
 
 ### Button
 
-Add buttons to perform actions within the input group.
-
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-button"
-  className="[&_.preview]:p-4"
+  previewClassName="h-72"
 />
 
-### Tooltip
-
-Add tooltips to provide additional context or help.
+### Kbd
 
 <ComponentPreview
   styleName="radix-nova"
-  name="input-group-tooltip"
-  className="[&_.preview]:p-4"
-/>
-
-### Textarea
-
-Input groups also work with textarea components. Use `block-start` or `block-end` for alignment.
-
-<ComponentPreview
-  styleName="radix-nova"
-  name="input-group-textarea"
-  className="[&_.preview]:p-4"
-/>
-
-### Spinner
-
-Show loading indicators while processing input.
-
-<ComponentPreview
-  styleName="radix-nova"
-  name="input-group-spinner"
-  className="[&_.preview]:p-4"
-/>
-
-### Label
-
-Add labels within input groups to improve accessibility.
-
-<ComponentPreview
-  styleName="radix-nova"
-  name="input-group-label"
-  className="[&_.preview]:p-4"
+  name="input-group-kbd"
+  previewClassName="h-40"
 />
 
 ### Dropdown
 
-Pair input groups with dropdown menus for complex interactions.
-
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-dropdown"
-  className="[&_.preview]:p-4"
+  previewClassName="h-56"
 />
 
-### Button Group
-
-Wrap input groups with button groups to create prefixes and suffixes.
+### Spinner
 
 <ComponentPreview
   styleName="radix-nova"
-  name="input-group-button-group"
-  className="[&_.preview]:p-4"
+  name="input-group-spinner"
+  previewClassName="h-80"
+/>
+
+### Textarea
+
+<ComponentPreview
+  styleName="radix-nova"
+  name="input-group-textarea"
+  previewClassName="h-96"
 />
 
 ### Custom Input
 
-Add the `data-slot="input-group-control"` attribute to your custom input for automatic behavior and focus state handling.
+Add the `data-slot="input-group-control"` attribute to your custom input for automatic focus state handling.
 
-No style is applied to the custom input. Apply your own styles using the `className` prop.
+Here's an example of a custom resizable textarea from a third-party library.
 
 <ComponentPreview
   styleName="radix-nova"
   name="input-group-custom"
-  className="!mb-4 [&_.preview]:p-4"
+  previewClassName="h-56"
 />
 
-```tsx showLineNumbers
-import { InputGroup, InputGroupAddon } from "@/component/ui/input-group"
-import TextareaAutosize from "react-textarea-autosize"
-
-export function InputGroupCustom() {
-  return (
-    <InputGroup>
-      <TextareaAutosize
-        data-slot="input-group-control"
-        className="dark:bg-input/30 flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none"
-        placeholder="Autoresize textarea..."
-      />
-      <InputGroupAddon align="block-end">how</InputGroupAddon>
-    </InputGroup>
-  )
-}
-```
-
 ## API Reference
 
 ### InputGroup
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index eed4c4f5ce..643bd3a36d 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -2553,6 +2553,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-block-end": {
+      name: "input-group-block-end",
+      filePath: "examples/radix/input-group-block-end.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-block-end")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-block-end"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-block-start": {
+      name: "input-group-block-start",
+      filePath: "examples/radix/input-group-block-start.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-block-start")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-block-start"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-button-group": {
       name: "input-group-button-group",
       filePath: "examples/radix/input-group-button-group.tsx",
@@ -2644,6 +2670,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-inline-end": {
+      name: "input-group-inline-end",
+      filePath: "examples/radix/input-group-inline-end.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-inline-end")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-inline-end"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-inline-start": {
+      name: "input-group-inline-start",
+      filePath: "examples/radix/input-group-inline-start.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-inline-start")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-inline-start"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-kbd": {
+      name: "input-group-kbd",
+      filePath: "examples/radix/input-group-kbd.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./radix/input-group-kbd")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-kbd"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-label": {
       name: "input-group-label",
       filePath: "examples/radix/input-group-label.tsx",
@@ -8862,6 +8927,32 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-block-end": {
+      name: "input-group-block-end",
+      filePath: "examples/base/input-group-block-end.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-block-end")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-block-end"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-block-start": {
+      name: "input-group-block-start",
+      filePath: "examples/base/input-group-block-start.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-block-start")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-block-start"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-button-group": {
       name: "input-group-button-group",
       filePath: "examples/base/input-group-button-group.tsx",
@@ -8953,6 +9044,45 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-group-inline-end": {
+      name: "input-group-inline-end",
+      filePath: "examples/base/input-group-inline-end.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-inline-end")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-inline-end"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-inline-start": {
+      name: "input-group-inline-start",
+      filePath: "examples/base/input-group-inline-start.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-inline-start")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-inline-start"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
+    "input-group-kbd": {
+      name: "input-group-kbd",
+      filePath: "examples/base/input-group-kbd.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-group-kbd")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-group-kbd"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-group-label": {
       name: "input-group-label",
       filePath: "examples/base/input-group-label.tsx",
diff --git a/apps/v4/examples/base/input-group-block-end.tsx b/apps/v4/examples/base/input-group-block-end.tsx
new file mode 100644
index 0000000000..7a2e6697fa
--- /dev/null
+++ b/apps/v4/examples/base/input-group-block-end.tsx
@@ -0,0 +1,49 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui/input-group"
+
+export function InputGroupBlockEnd() {
+  return (
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="block-end-input">Input</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="block-end-input" placeholder="Enter amount" />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>USD</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>Footer positioned below the input.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="block-end-textarea">Textarea</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="block-end-textarea"
+            placeholder="Write a comment..."
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>0/280</InputGroupText>
+            <InputGroupButton variant="default" size="sm" className="ml-auto">
+              Post
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          Footer positioned below the textarea.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-block-start.tsx b/apps/v4/examples/base/input-group-block-start.tsx
new file mode 100644
index 0000000000..cd9d71c9aa
--- /dev/null
+++ b/apps/v4/examples/base/input-group-block-start.tsx
@@ -0,0 +1,56 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui/input-group"
+import { CopyIcon, FileCodeIcon } from "lucide-react"
+
+export function InputGroupBlockStart() {
+  return (
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="block-start-input">Input</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput
+            id="block-start-input"
+            placeholder="Enter your name"
+          />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>Full Name</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>Header positioned above the input.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="block-start-textarea">Textarea</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="block-start-textarea"
+            placeholder="console.log('Hello, world!');"
+            className="font-mono text-sm"
+          />
+          <InputGroupAddon align="block-start">
+            <FileCodeIcon className="text-muted-foreground" />
+            <InputGroupText className="font-mono">script.js</InputGroupText>
+            <InputGroupButton size="icon-xs" className="ml-auto">
+              <CopyIcon />
+              <span className="sr-only">Copy</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          Header positioned above the textarea.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-demo.tsx b/apps/v4/examples/base/input-group-demo.tsx
index d00803d988..c613deb1a2 100644
--- a/apps/v4/examples/base/input-group-demo.tsx
+++ b/apps/v4/examples/base/input-group-demo.tsx
@@ -1,102 +1,18 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/base/ui/dropdown-menu"
 import {
   InputGroup,
   InputGroupAddon,
-  InputGroupButton,
   InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
 } from "@/examples/base/ui/input-group"
-import { Separator } from "@/examples/base/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui/tooltip"
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
+import { Search } from "lucide-react"
 
-export default function InputGroupDemo() {
+export function InputGroupDemo() {
   return (
-    <div className="grid w-full max-w-sm gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder="Search..." />
-        <InputGroupAddon>
-          <Search />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
-        <InputGroupAddon>
-          <InputGroupText>https://</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <InputGroupButton className="rounded-full" size="icon-xs" />
-              }
-            >
-              <IconInfoCircle />
-            </TooltipTrigger>
-            <TooltipContent>This is content in a tooltip.</TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton
-            variant="outline"
-            className="rounded-full"
-            size="icon-xs"
-          >
-            <IconPlus />
-          </InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger render={<InputGroupButton variant="ghost" />}>
-              Auto
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              side="top"
-              align="start"
-              className="[--radius:0.95rem]"
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuItem>Auto</DropdownMenuItem>
-                <DropdownMenuItem>Agent</DropdownMenuItem>
-                <DropdownMenuItem>Manual</DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
-          <InputGroupButton
-            variant="default"
-            className="rounded-full"
-            size="icon-xs"
-            disabled
-          >
-            <ArrowUpIcon />
-            <span className="sr-only">Send</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="@shadcn" />
-        <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
-            <IconCheck className="size-3" />
-          </div>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
+    <InputGroup className="max-w-xs">
+      <InputGroupInput placeholder="Search..." />
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+    </InputGroup>
   )
 }
diff --git a/apps/v4/examples/base/input-group-dropdown.tsx b/apps/v4/examples/base/input-group-dropdown.tsx
index 479bc65ff5..c0323987fe 100644
--- a/apps/v4/examples/base/input-group-dropdown.tsx
+++ b/apps/v4/examples/base/input-group-dropdown.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +15,7 @@ import {
 } from "@/examples/base/ui/input-group"
 import { ChevronDownIcon, MoreHorizontal } from "lucide-react"
 
-export default function InputGroupDropdown() {
+export function InputGroupDropdown() {
   return (
     <div className="grid w-full max-w-sm gap-4">
       <InputGroup>
@@ -31,7 +33,7 @@ export default function InputGroupDropdown() {
             >
               <MoreHorizontal />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent align="end" sideOffset={8} alignOffset={-4}>
               <DropdownMenuGroup>
                 <DropdownMenuItem>Settings</DropdownMenuItem>
                 <DropdownMenuItem>Copy path</DropdownMenuItem>
@@ -41,7 +43,7 @@ export default function InputGroupDropdown() {
           </DropdownMenu>
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup className="[--radius:1rem]">
+      <InputGroup>
         <InputGroupInput placeholder="Enter search query" />
         <InputGroupAddon align="inline-end">
           <DropdownMenu>
@@ -52,7 +54,7 @@ export default function InputGroupDropdown() {
             >
               Search In... <ChevronDownIcon className="size-3" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="[--radius:0.95rem]">
+            <DropdownMenuContent align="end" sideOffset={8} alignOffset={-4}>
               <DropdownMenuGroup>
                 <DropdownMenuItem>Documentation</DropdownMenuItem>
                 <DropdownMenuItem>Blog Posts</DropdownMenuItem>
diff --git a/apps/v4/examples/base/input-group-inline-end.tsx b/apps/v4/examples/base/input-group-inline-end.tsx
new file mode 100644
index 0000000000..1ed2f22372
--- /dev/null
+++ b/apps/v4/examples/base/input-group-inline-end.tsx
@@ -0,0 +1,26 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { EyeOffIcon } from "lucide-react"
+
+export function InputGroupInlineEnd() {
+  return (
+    <Field className="max-w-sm">
+      <FieldLabel htmlFor="inline-end-input">Input</FieldLabel>
+      <InputGroup>
+        <InputGroupInput
+          id="inline-end-input"
+          type="password"
+          placeholder="Enter password"
+        />
+        <InputGroupAddon align="inline-end">
+          <EyeOffIcon />
+        </InputGroupAddon>
+      </InputGroup>
+      <FieldDescription>Icon positioned at the end.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-inline-start.tsx b/apps/v4/examples/base/input-group-inline-start.tsx
new file mode 100644
index 0000000000..bb2eb5b4a3
--- /dev/null
+++ b/apps/v4/examples/base/input-group-inline-start.tsx
@@ -0,0 +1,22 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { SearchIcon } from "lucide-react"
+
+export function InputGroupInlineStart() {
+  return (
+    <Field className="max-w-sm">
+      <FieldLabel htmlFor="inline-start-input">Input</FieldLabel>
+      <InputGroup>
+        <InputGroupInput id="inline-start-input" placeholder="Search..." />
+        <InputGroupAddon align="inline-start">
+          <SearchIcon className="text-muted-foreground" />
+        </InputGroupAddon>
+      </InputGroup>
+      <FieldDescription>Icon positioned at the start.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-kbd.tsx b/apps/v4/examples/base/input-group-kbd.tsx
new file mode 100644
index 0000000000..cc806283b1
--- /dev/null
+++ b/apps/v4/examples/base/input-group-kbd.tsx
@@ -0,0 +1,21 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/base/ui/input-group"
+import { Kbd } from "@/examples/base/ui/kbd"
+import { SearchIcon } from "lucide-react"
+
+export function InputGroupKbd() {
+  return (
+    <InputGroup className="max-w-sm">
+      <InputGroupInput placeholder="Search..." />
+      <InputGroupAddon>
+        <SearchIcon className="text-muted-foreground" />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        <Kbd>⌘K</Kbd>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/v4/examples/base/input-group-spinner.tsx b/apps/v4/examples/base/input-group-spinner.tsx
index d847ac7503..6a0a892a59 100644
--- a/apps/v4/examples/base/input-group-spinner.tsx
+++ b/apps/v4/examples/base/input-group-spinner.tsx
@@ -10,27 +10,27 @@ import { LoaderIcon } from "lucide-react"
 export default function InputGroupSpinner() {
   return (
     <div className="grid w-full max-w-sm gap-4">
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Searching..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Searching..." />
         <InputGroupAddon align="inline-end">
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Processing..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Processing..." />
         <InputGroupAddon>
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Saving changes..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Saving changes..." />
         <InputGroupAddon align="inline-end">
           <InputGroupText>Saving...</InputGroupText>
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Refreshing data..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Refreshing data..." />
         <InputGroupAddon>
           <LoaderIcon className="animate-spin" />
         </InputGroupAddon>
diff --git a/apps/v4/examples/base/input-group-with-addons.tsx b/apps/v4/examples/base/input-group-with-addons.tsx
index 17ad2ced5a..3ea51c2d00 100644
--- a/apps/v4/examples/base/input-group-with-addons.tsx
+++ b/apps/v4/examples/base/input-group-with-addons.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import {
   Field,
   FieldDescription,
diff --git a/apps/v4/examples/base/input-group-with-tooltip.tsx b/apps/v4/examples/base/input-group-with-tooltip.tsx
index 0b67a004e6..ee3d1295a4 100644
--- a/apps/v4/examples/base/input-group-with-tooltip.tsx
+++ b/apps/v4/examples/base/input-group-with-tooltip.tsx
@@ -1,4 +1,5 @@
-import { Button } from "@/examples/base/ui/button"
+"use client"
+
 import { ButtonGroup, ButtonGroupText } from "@/examples/base/ui/button-group"
 import {
   DropdownMenu,
@@ -12,7 +13,6 @@ import {
   FieldGroup,
   FieldLabel,
 } from "@/examples/base/ui/field"
-import { Input } from "@/examples/base/ui/input"
 import {
   InputGroup,
   InputGroupAddon,
diff --git a/apps/v4/examples/radix/input-group-block-end.tsx b/apps/v4/examples/radix/input-group-block-end.tsx
new file mode 100644
index 0000000000..d25cf8601d
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-block-end.tsx
@@ -0,0 +1,49 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/radix/ui/input-group"
+
+export function InputGroupBlockEnd() {
+  return (
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="block-end-input">Input</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput id="block-end-input" placeholder="Enter amount" />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>USD</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>Footer positioned below the input.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="block-end-textarea">Textarea</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="block-end-textarea"
+            placeholder="Write a comment..."
+          />
+          <InputGroupAddon align="block-end">
+            <InputGroupText>0/280</InputGroupText>
+            <InputGroupButton variant="default" size="sm" className="ml-auto">
+              Post
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          Footer positioned below the textarea.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-block-start.tsx b/apps/v4/examples/radix/input-group-block-start.tsx
new file mode 100644
index 0000000000..803466ffd7
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-block-start.tsx
@@ -0,0 +1,56 @@
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/radix/ui/input-group"
+import { CopyIcon, FileCodeIcon } from "lucide-react"
+
+export function InputGroupBlockStart() {
+  return (
+    <FieldGroup className="max-w-sm">
+      <Field>
+        <FieldLabel htmlFor="block-start-input">Input</FieldLabel>
+        <InputGroup className="h-auto">
+          <InputGroupInput
+            id="block-start-input"
+            placeholder="Enter your name"
+          />
+          <InputGroupAddon align="block-start">
+            <InputGroupText>Full Name</InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>Header positioned above the input.</FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="block-start-textarea">Textarea</FieldLabel>
+        <InputGroup>
+          <InputGroupTextarea
+            id="block-start-textarea"
+            placeholder="console.log('Hello, world!');"
+            className="font-mono text-sm"
+          />
+          <InputGroupAddon align="block-start">
+            <FileCodeIcon className="text-muted-foreground" />
+            <InputGroupText className="font-mono">script.js</InputGroupText>
+            <InputGroupButton size="icon-xs" className="ml-auto">
+              <CopyIcon />
+              <span className="sr-only">Copy</span>
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+        <FieldDescription>
+          Header positioned above the textarea.
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-demo.tsx b/apps/v4/examples/radix/input-group-demo.tsx
index eb7e6ce5df..f2bf4ce3e9 100644
--- a/apps/v4/examples/radix/input-group-demo.tsx
+++ b/apps/v4/examples/radix/input-group-demo.tsx
@@ -1,100 +1,18 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/examples/radix/ui/dropdown-menu"
 import {
   InputGroup,
   InputGroupAddon,
-  InputGroupButton,
   InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
 } from "@/examples/radix/ui/input-group"
-import { Separator } from "@/examples/radix/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/radix/ui/tooltip"
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
+import { Search } from "lucide-react"
 
-export default function InputGroupDemo() {
+export function InputGroupDemo() {
   return (
-    <div className="grid w-full max-w-sm gap-6">
-      <InputGroup>
-        <InputGroupInput placeholder="Search..." />
-        <InputGroupAddon>
-          <Search />
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
-        <InputGroupAddon>
-          <InputGroupText>https://</InputGroupText>
-        </InputGroupAddon>
-        <InputGroupAddon align="inline-end">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <InputGroupButton className="rounded-full" size="icon-xs">
-                <IconInfoCircle />
-              </InputGroupButton>
-            </TooltipTrigger>
-            <TooltipContent>This is content in a tooltip.</TooltipContent>
-          </Tooltip>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-        <InputGroupAddon align="block-end">
-          <InputGroupButton
-            variant="outline"
-            className="rounded-full"
-            size="icon-xs"
-          >
-            <IconPlus />
-          </InputGroupButton>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <InputGroupButton variant="ghost">Auto</InputGroupButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              side="top"
-              align="start"
-              className="[--radius:0.95rem]"
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuItem>Auto</DropdownMenuItem>
-                <DropdownMenuItem>Agent</DropdownMenuItem>
-                <DropdownMenuItem>Manual</DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
-          <InputGroupButton
-            variant="default"
-            className="rounded-full"
-            size="icon-xs"
-            disabled
-          >
-            <ArrowUpIcon />
-            <span className="sr-only">Send</span>
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-      <InputGroup>
-        <InputGroupInput placeholder="@shadcn" />
-        <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
-            <IconCheck className="size-3" />
-          </div>
-        </InputGroupAddon>
-      </InputGroup>
-    </div>
+    <InputGroup className="max-w-xs">
+      <InputGroupInput placeholder="Search..." />
+      <InputGroupAddon>
+        <Search />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+    </InputGroup>
   )
 }
diff --git a/apps/v4/examples/radix/input-group-inline-end.tsx b/apps/v4/examples/radix/input-group-inline-end.tsx
new file mode 100644
index 0000000000..580a926b89
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-inline-end.tsx
@@ -0,0 +1,26 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { EyeOffIcon } from "lucide-react"
+
+export function InputGroupInlineEnd() {
+  return (
+    <Field className="max-w-sm">
+      <FieldLabel htmlFor="inline-end-input">Input</FieldLabel>
+      <InputGroup>
+        <InputGroupInput
+          id="inline-end-input"
+          type="password"
+          placeholder="Enter password"
+        />
+        <InputGroupAddon align="inline-end">
+          <EyeOffIcon />
+        </InputGroupAddon>
+      </InputGroup>
+      <FieldDescription>Icon positioned at the end.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-inline-start.tsx b/apps/v4/examples/radix/input-group-inline-start.tsx
new file mode 100644
index 0000000000..e125b8ac70
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-inline-start.tsx
@@ -0,0 +1,22 @@
+import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { SearchIcon } from "lucide-react"
+
+export function InputGroupInlineStart() {
+  return (
+    <Field className="max-w-sm">
+      <FieldLabel htmlFor="inline-start-input">Input</FieldLabel>
+      <InputGroup>
+        <InputGroupInput id="inline-start-input" placeholder="Search..." />
+        <InputGroupAddon align="inline-start">
+          <SearchIcon className="text-muted-foreground" />
+        </InputGroupAddon>
+      </InputGroup>
+      <FieldDescription>Icon positioned at the start.</FieldDescription>
+    </Field>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-kbd.tsx b/apps/v4/examples/radix/input-group-kbd.tsx
new file mode 100644
index 0000000000..0f4ba18afb
--- /dev/null
+++ b/apps/v4/examples/radix/input-group-kbd.tsx
@@ -0,0 +1,21 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/examples/radix/ui/input-group"
+import { Kbd } from "@/examples/radix/ui/kbd"
+import { SearchIcon } from "lucide-react"
+
+export function InputGroupKbd() {
+  return (
+    <InputGroup className="max-w-sm">
+      <InputGroupInput placeholder="Search..." />
+      <InputGroupAddon>
+        <SearchIcon className="text-muted-foreground" />
+      </InputGroupAddon>
+      <InputGroupAddon align="inline-end">
+        <Kbd>⌘K</Kbd>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
diff --git a/apps/v4/examples/radix/input-group-spinner.tsx b/apps/v4/examples/radix/input-group-spinner.tsx
index c47d634ae6..39ba3cb247 100644
--- a/apps/v4/examples/radix/input-group-spinner.tsx
+++ b/apps/v4/examples/radix/input-group-spinner.tsx
@@ -10,27 +10,27 @@ import { LoaderIcon } from "lucide-react"
 export default function InputGroupSpinner() {
   return (
     <div className="grid w-full max-w-sm gap-4">
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Searching..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Searching..." />
         <InputGroupAddon align="inline-end">
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Processing..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Processing..." />
         <InputGroupAddon>
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Saving changes..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Saving changes..." />
         <InputGroupAddon align="inline-end">
           <InputGroupText>Saving...</InputGroupText>
           <Spinner />
         </InputGroupAddon>
       </InputGroup>
-      <InputGroup data-disabled>
-        <InputGroupInput placeholder="Refreshing data..." disabled />
+      <InputGroup>
+        <InputGroupInput placeholder="Refreshing data..." />
         <InputGroupAddon>
           <LoaderIcon className="animate-spin" />
         </InputGroupAddon>