diff --git a/apps/v4/content/docs/components/base/input.mdx b/apps/v4/content/docs/components/base/input.mdx
index 8e42e46a8..2ddaf2bf1 100644
--- a/apps/v4/content/docs/components/base/input.mdx
+++ b/apps/v4/content/docs/components/base/input.mdx
@@ -5,12 +5,7 @@ base: base
 component: true
 ---
 
-<ComponentPreview
-  styleName="base-nova"
-  name="input-demo"
-  className="[&_input]:max-w-xs"
-  description="A form input component."
-/>
+<ComponentPreview styleName="base-nova" name="input-demo" />
 
 ## Installation
 
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index e037cb470..5101ddf72 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -8732,6 +8732,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-button": {
+      name: "input-button",
+      filePath: "examples/base/input-button.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-button")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-button"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-demo": {
       name: "input-demo",
       filePath: "examples/base/input-demo.tsx",
@@ -8745,6 +8758,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-description": {
+      name: "input-description",
+      filePath: "examples/base/input-description.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-description")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-description"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-disabled": {
       name: "input-disabled",
       filePath: "examples/base/input-disabled.tsx",
@@ -9044,6 +9070,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
+    "input-label": {
+      name: "input-label",
+      filePath: "examples/base/input-label.tsx",
+      component: React.lazy(async () => {
+        const mod = await import("./base/input-label")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || "input-label"
+        return { default: mod.default || mod[exportName] }
+      }),
+    },
     "input-otp-alphanumeric": {
       name: "input-otp-alphanumeric",
       filePath: "examples/base/input-otp-alphanumeric.tsx",
@@ -9200,97 +9239,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "input-types": {
-      name: "input-types",
-      filePath: "examples/base/input-types.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-types")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-types"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-button": {
-      name: "input-with-button",
-      filePath: "examples/base/input-with-button.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-button")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-button"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-description": {
-      name: "input-with-description",
-      filePath: "examples/base/input-with-description.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-description")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-description"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-label": {
-      name: "input-with-label",
-      filePath: "examples/base/input-with-label.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-label")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-label"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-native-select": {
-      name: "input-with-native-select",
-      filePath: "examples/base/input-with-native-select.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-native-select")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-native-select"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-select": {
-      name: "input-with-select",
-      filePath: "examples/base/input-with-select.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-select")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-select"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "input-with-text": {
-      name: "input-with-text",
-      filePath: "examples/base/input-with-text.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/input-with-text")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "input-with-text"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
     "item-avatar": {
       name: "item-avatar",
       filePath: "examples/base/item-avatar.tsx",
diff --git a/apps/v4/examples/base/input-with-button.tsx b/apps/v4/examples/base/input-button.tsx
similarity index 100%
rename from apps/v4/examples/base/input-with-button.tsx
rename to apps/v4/examples/base/input-button.tsx
diff --git a/apps/v4/examples/base/input-with-description.tsx b/apps/v4/examples/base/input-description.tsx
similarity index 100%
rename from apps/v4/examples/base/input-with-description.tsx
rename to apps/v4/examples/base/input-description.tsx
diff --git a/apps/v4/examples/base/input-with-label.tsx b/apps/v4/examples/base/input-label.tsx
similarity index 100%
rename from apps/v4/examples/base/input-with-label.tsx
rename to apps/v4/examples/base/input-label.tsx
diff --git a/apps/v4/examples/base/input-types.tsx b/apps/v4/examples/base/input-types.tsx
deleted file mode 100644
index eb4fa91ca..000000000
--- a/apps/v4/examples/base/input-types.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Field, FieldLabel } from "@/examples/base/ui/field"
-import { Input } from "@/examples/base/ui/input"
-
-export function InputTypes() {
-  return (
-    <div className="flex w-full flex-col gap-6">
-      <Field>
-        <FieldLabel htmlFor="input-demo-password">Password</FieldLabel>
-        <Input
-          id="input-demo-password"
-          type="password"
-          placeholder="Password"
-        />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-tel">Phone</FieldLabel>
-        <Input id="input-demo-tel" type="tel" placeholder="+1 (555) 123-4567" />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-url">URL</FieldLabel>
-        <Input
-          id="input-demo-url"
-          type="url"
-          placeholder="https://example.com"
-        />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-search">Search</FieldLabel>
-        <Input id="input-demo-search" type="search" placeholder="Search" />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-number">Number</FieldLabel>
-        <Input id="input-demo-number" type="number" placeholder="123" />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-date">Date</FieldLabel>
-        <Input id="input-demo-date" type="date" />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-time">Time</FieldLabel>
-        <Input id="input-demo-time" type="time" />
-      </Field>
-      <Field>
-        <FieldLabel htmlFor="input-demo-file">File</FieldLabel>
-        <Input id="input-demo-file" type="file" />
-      </Field>
-    </div>
-  )
-}
diff --git a/apps/v4/examples/base/input-with-native-select.tsx b/apps/v4/examples/base/input-with-native-select.tsx
deleted file mode 100644
index 703e0e3e9..000000000
--- a/apps/v4/examples/base/input-with-native-select.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Input } from "@/examples/base/ui/input"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/examples/base/ui/native-select"
-import { Select } from "@/examples/base/ui/select"
-
-export function InputWithNativeSelect() {
-  return (
-    <div className="flex w-full gap-2">
-      <Input type="tel" placeholder="(555) 123-4567" className="flex-1" />
-      <NativeSelect defaultValue="+1">
-        <NativeSelectOption value="+1">+1</NativeSelectOption>
-        <NativeSelectOption value="+44">+44</NativeSelectOption>
-        <NativeSelectOption value="+46">+46</NativeSelectOption>
-      </NativeSelect>
-    </div>
-  )
-}
diff --git a/apps/v4/examples/base/input-with-select.tsx b/apps/v4/examples/base/input-with-select.tsx
deleted file mode 100644
index a84659433..000000000
--- a/apps/v4/examples/base/input-with-select.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Input } from "@/examples/base/ui/input"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/examples/base/ui/select"
-
-export function InputWithSelect() {
-  return (
-    <div className="flex w-full gap-2">
-      <Input type="text" placeholder="Enter amount" className="flex-1" />
-      <Select defaultValue="usd">
-        <SelectTrigger className="w-32">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="usd">USD</SelectItem>
-          <SelectItem value="eur">EUR</SelectItem>
-          <SelectItem value="gbp">GBP</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
diff --git a/apps/v4/examples/base/input-with-text.tsx b/apps/v4/examples/base/input-with-text.tsx
deleted file mode 100644
index 9fb53e495..000000000
--- a/apps/v4/examples/base/input-with-text.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Input } from "@/examples/base/ui/input"
-import { Label } from "@/examples/base/ui/label"
-
-export default function InputWithText() {
-  return (
-    <div className="grid w-full max-w-sm items-center gap-3">
-      <Label htmlFor="email-2">Email</Label>
-      <Input type="email" id="email-2" placeholder="Email" />
-      <p className="text-muted-foreground text-sm">Enter your email address.</p>
-    </div>
-  )
-}