From d88cfc7e98ae1eda32ffb9b882d8128b029dda53 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Thu, 30 Apr 2026 00:49:44 +0530
Subject: [PATCH] refactor(input): rename InputField to Input

Renames the InputField component to Input across the codebase, including:
- Component, type, and file/directory renames
- Updates to consumers (DatePicker, RangePicker, Search, Combobox, Command,
  ColorPicker, FilterChip)
- DatePicker.inputFieldProps -> inputProps; RangePicker.inputFieldsProps -> inputsProps
- InputFieldProps -> InputProps
- Documentation, demos, playground, and Figma Code Connect updates
- V1 migration guide updated to reflect the rename

The Base UI Input primitive (@base-ui/react/input) was already in use; no
runtime behavior changes.
---
 apps/www/src/app/examples/page.tsx            |  8 +-
 .../www/src/components/demo/demo-controls.tsx |  4 +-
 .../components/playground/field-examples.tsx  | 10 +--
 .../playground/fieldset-examples.tsx          |  8 +-
 .../components/playground/form-examples.tsx   |  8 +-
 apps/www/src/components/playground/index.ts   |  2 +-
 ...-field-examples.tsx => input-examples.tsx} | 18 ++--
 .../www/src/content/docs/(overview)/index.mdx |  2 +-
 .../content/docs/components/calendar/props.ts | 14 ++--
 .../content/docs/components/command/index.mdx |  2 +-
 .../src/content/docs/components/field/demo.ts | 16 ++--
 .../content/docs/components/field/index.mdx   | 12 +--
 .../content/docs/components/fieldset/demo.ts  | 24 +++---
 .../docs/components/fieldset/index.mdx        | 10 +--
 .../src/content/docs/components/form/demo.ts  | 20 ++---
 .../content/docs/components/form/index.mdx    |  4 +-
 .../components/{input-field => input}/demo.ts | 28 +++----
 .../{input-field => input}/index.mdx          | 28 +++----
 .../{input-field => input}/props.ts           |  6 +-
 docs/V1-migration.md                          | 44 ++++++----
 .../components/calendar/date-picker.tsx       | 38 ++++-----
 .../components/calendar/range-picker.tsx      | 16 ++--
 .../color-picker/color-picker-input.tsx       |  6 +-
 .../components/combobox/combobox-input.tsx    |  6 +-
 .../components/command/command-input.tsx      |  6 +-
 .../filter-chip/filter-chip.module.css        |  2 +-
 .../components/filter-chip/filter-chip.tsx    |  6 +-
 .../raystack/components/input-field/index.tsx |  1 -
 .../__tests__/input.test.tsx}                 | 84 +++++++++----------
 packages/raystack/components/input/index.tsx  |  1 +
 .../input.module.css}                         |  0
 .../input-field.tsx => input/input.tsx}       | 10 +--
 .../search/__tests__/search.test.tsx          |  4 +-
 .../raystack/components/search/search.tsx     |  8 +-
 packages/raystack/figma/input.figma.tsx       | 10 +--
 packages/raystack/index.tsx                   |  2 +-
 36 files changed, 239 insertions(+), 229 deletions(-)
 rename apps/www/src/components/playground/{input-field-examples.tsx => input-examples.tsx} (62%)
 rename apps/www/src/content/docs/components/{input-field => input}/demo.ts (84%)
 rename apps/www/src/content/docs/components/{input-field => input}/index.mdx (71%)
 rename apps/www/src/content/docs/components/{input-field => input}/props.ts (90%)
 delete mode 100644 packages/raystack/components/input-field/index.tsx
 rename packages/raystack/components/{input-field/__tests__/input-field.test.tsx => input/__tests__/input.test.tsx} (79%)
 create mode 100644 packages/raystack/components/input/index.tsx
 rename packages/raystack/components/{input-field/input-field.module.css => input/input.module.css} (100%)
 rename packages/raystack/components/{input-field/input-field.tsx => input/input.tsx} (94%)

diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index b65134762..86ff2dada 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -28,7 +28,7 @@ import {
   Flex,
   IconButton,
   Indicator,
-  InputField,
+  Input,
   Menu,
   Navbar,
   Popover,
@@ -516,7 +516,7 @@ const Page = () => {
                 <Button variant='outline' color='accent' size='small' loading>
                   Search
                 </Button>
-                <InputField size='small' />
+                <Input size='small' />
               </Flex>
 
               {/* Button Examples */}
@@ -1663,7 +1663,7 @@ const Page = () => {
                             </Flex>
                           </Popover.Content>
                         </Popover>
-                        <InputField
+                        <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
                           width='100%'
@@ -1832,7 +1832,7 @@ const Page = () => {
                             </Flex>
                           </Popover.Content>
                         </Popover>
-                        <InputField
+                        <Input
                           placeholder='Type to filter...'
                           leadingIcon={<MixerHorizontalIcon />}
                           width='100%'
diff --git a/apps/www/src/components/demo/demo-controls.tsx b/apps/www/src/components/demo/demo-controls.tsx
index f7978db50..0dc044732 100644
--- a/apps/www/src/components/demo/demo-controls.tsx
+++ b/apps/www/src/components/demo/demo-controls.tsx
@@ -8,7 +8,7 @@ import {
 import {
   Flex,
   IconButton,
-  InputField,
+  Input,
   Select,
   Switch,
   Text
@@ -152,7 +152,7 @@ export default function DemoControls({
         // For text and number types
         return (
           <div key={prop} className={styles.controlField}>
-            <InputField
+            <Input
               size='small'
               label={propLabel}
               value={
diff --git a/apps/www/src/components/playground/field-examples.tsx b/apps/www/src/components/playground/field-examples.tsx
index 3c7e6d8bf..dcaab73cf 100644
--- a/apps/www/src/components/playground/field-examples.tsx
+++ b/apps/www/src/components/playground/field-examples.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Field, Flex, InputField, TextArea } from '@raystack/apsara';
+import { Field, Flex, Input, TextArea } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function FieldExamples() {
@@ -9,13 +9,13 @@ export function FieldExamples() {
       <Flex gap='large' wrap='wrap'>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
           <Field label='Name' required description='Enter your full name'>
-            <InputField placeholder='John Doe' />
+            <Input placeholder='John Doe' />
           </Field>
           <Field label='Email' error='Please enter a valid email'>
-            <InputField type='email' placeholder='Enter email' />
+            <Input type='email' placeholder='Enter email' />
           </Field>
           <Field label='Phone' required={false}>
-            <InputField placeholder='Enter phone' />
+            <Input placeholder='Enter phone' />
           </Field>
         </Flex>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
@@ -27,7 +27,7 @@ export function FieldExamples() {
             <TextArea placeholder='Write something...' />
           </Field>
           <Field label='Disabled' disabled>
-            <InputField placeholder='Cannot edit' />
+            <Input placeholder='Cannot edit' />
           </Field>
         </Flex>
       </Flex>
diff --git a/apps/www/src/components/playground/fieldset-examples.tsx b/apps/www/src/components/playground/fieldset-examples.tsx
index 8266f016c..ff1bef250 100644
--- a/apps/www/src/components/playground/fieldset-examples.tsx
+++ b/apps/www/src/components/playground/fieldset-examples.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Field, Fieldset, Flex, InputField } from '@raystack/apsara';
+import { Field, Fieldset, Flex, Input } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function FieldsetExamples() {
@@ -9,15 +9,15 @@ export function FieldsetExamples() {
       <Flex gap='large' direction='column' style={{ maxWidth: 400 }}>
         <Fieldset legend='Contact Details'>
           <Field label='Phone' required>
-            <InputField type='tel' placeholder='+1 (555) 000-0000' />
+            <Input type='tel' placeholder='+1 (555) 000-0000' />
           </Field>
           <Field label='Address' required={false}>
-            <InputField placeholder='123 Main St' />
+            <Input placeholder='123 Main St' />
           </Field>
         </Fieldset>
         <Fieldset legend='Disabled Section' disabled>
           <Field label='Read Only'>
-            <InputField placeholder='Cannot edit' />
+            <Input placeholder='Cannot edit' />
           </Field>
         </Fieldset>
       </Flex>
diff --git a/apps/www/src/components/playground/form-examples.tsx b/apps/www/src/components/playground/form-examples.tsx
index b02ea86c5..466a8e228 100644
--- a/apps/www/src/components/playground/form-examples.tsx
+++ b/apps/www/src/components/playground/form-examples.tsx
@@ -5,7 +5,7 @@ import {
   Field,
   Fieldset,
   Form,
-  InputField,
+  Input,
   TextArea
 } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
@@ -22,14 +22,14 @@ export function FormExamples() {
       >
         <Fieldset legend='Personal Information'>
           <Field label='First Name' required>
-            <InputField placeholder='John' />
+            <Input placeholder='John' />
           </Field>
           <Field label='Last Name' required>
-            <InputField placeholder='Doe' />
+            <Input placeholder='Doe' />
           </Field>
         </Fieldset>
         <Field label='Email' required description="We'll send a confirmation">
-          <InputField type='email' placeholder='john@example.com' />
+          <Input type='email' placeholder='john@example.com' />
         </Field>
         <Field label='Message' required={false}>
           <TextArea placeholder='Tell us more...' />
diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index 22d903501..3f1241e24 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -29,7 +29,7 @@ export * from './headline-examples';
 export * from './icon-button-examples';
 export * from './image-examples';
 export * from './indicator-examples';
-export * from './input-field-examples';
+export * from './input-examples';
 export * from './label-examples';
 export * from './link-examples';
 export * from './list-examples';
diff --git a/apps/www/src/components/playground/input-field-examples.tsx b/apps/www/src/components/playground/input-examples.tsx
similarity index 62%
rename from apps/www/src/components/playground/input-field-examples.tsx
rename to apps/www/src/components/playground/input-examples.tsx
index f03f4f477..994fb3fe6 100644
--- a/apps/www/src/components/playground/input-field-examples.tsx
+++ b/apps/www/src/components/playground/input-examples.tsx
@@ -1,32 +1,32 @@
 'use client';
 
-import { Field, Flex, InputField } from '@raystack/apsara';
+import { Field, Flex, Input } from '@raystack/apsara';
 import { Home, Info } from 'lucide-react';
 import PlaygroundLayout from './playground-layout';
 
-export function InputFieldExamples() {
+export function InputExamples() {
   return (
-    <PlaygroundLayout title='InputField'>
+    <PlaygroundLayout title='Input'>
       <Flex gap='large' wrap='wrap'>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
           <Field label='Default'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
           <Field label='With Description' description='This is a description'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
           <Field label='With Error' error='This field is required'>
-            <InputField placeholder='Enter text' />
+            <Input placeholder='Enter text' />
           </Field>
         </Flex>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
-          <InputField placeholder='0.00' prefix='$' suffix='USD' />
-          <InputField
+          <Input placeholder='0.00' prefix='$' suffix='USD' />
+          <Input
             placeholder='Enter text'
             leadingIcon={<Home size={16} />}
             trailingIcon={<Info size={16} />}
           />
-          <InputField placeholder='Enter text' disabled />
+          <Input placeholder='Enter text' disabled />
         </Flex>
       </Flex>
     </PlaygroundLayout>
diff --git a/apps/www/src/content/docs/(overview)/index.mdx b/apps/www/src/content/docs/(overview)/index.mdx
index f0ee28b2d..9982ba243 100644
--- a/apps/www/src/content/docs/(overview)/index.mdx
+++ b/apps/www/src/content/docs/(overview)/index.mdx
@@ -24,7 +24,7 @@ Apsara provides over 50 components organized by function:
 | **Layout** | Flex, Grid, Container, Separator |
 | **Navigation** | Navbar, Sidebar, Breadcrumb, Tabs, Link |
 | **Data Display** | DataTable, Table, List, Avatar, Badge, Chip, Indicator |
-| **Forms** | Button, InputField, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar |
+| **Forms** | Button, Input, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar |
 | **Feedback** | Dialog, Drawer, Popover, Tooltip, Toast, Callout, EmptyState, Skeleton, Spinner |
 | **Utilities** | Command, Search, CopyButton, CodeBlock, ScrollArea |
 
diff --git a/apps/www/src/content/docs/components/calendar/props.ts b/apps/www/src/content/docs/components/calendar/props.ts
index 53c38428b..504a087f6 100644
--- a/apps/www/src/content/docs/components/calendar/props.ts
+++ b/apps/www/src/content/docs/components/calendar/props.ts
@@ -1,4 +1,4 @@
-import { InputFieldProps } from '../input-field/props';
+import { InputProps } from '../input/props';
 import { PopoverContentProps } from '../popover/props';
 
 export interface CalendarProps {
@@ -68,10 +68,10 @@ export interface RangePickerProps {
   /** Props for customizing the calendar */
   calendarProps?: CalendarProps;
 
-  /** Props for customizing the input fields */
-  inputFieldsProps?: {
-    startDate?: InputFieldProps;
-    endDate?: InputFieldProps;
+  /** Props for customizing the inputs */
+  inputsProps?: {
+    startDate?: InputProps;
+    endDate?: InputProps;
   };
 
   /** Render prop for custom trigger */
@@ -108,8 +108,8 @@ export interface DatePickerProps {
    */
   dateFormat?: string;
 
-  /** Props for customizing the input field */
-  inputFieldProps?: InputFieldProps;
+  /** Props for customizing the input */
+  inputProps?: InputProps;
 
   /** Initial date value */
   value?: Date;
diff --git a/apps/www/src/content/docs/components/command/index.mdx b/apps/www/src/content/docs/components/command/index.mdx
index 7928b2ed2..f360c0718 100644
--- a/apps/www/src/content/docs/components/command/index.mdx
+++ b/apps/www/src/content/docs/components/command/index.mdx
@@ -55,7 +55,7 @@ The root element owns the input value, the list of items, and the context used b
 
 ### Input
 
-Text input that drives the search. Accepts the same props as `InputField` and defaults to a magnifying-glass leading icon.
+Text input that drives the search. Accepts the same props as `Input` and defaults to a magnifying-glass leading icon.
 
 <auto-type-table path="./props.ts" name="CommandInputProps" />
 
diff --git a/apps/www/src/content/docs/components/field/demo.ts b/apps/www/src/content/docs/components/field/demo.ts
index 813903d09..bdbf807c1 100644
--- a/apps/www/src/content/docs/components/field/demo.ts
+++ b/apps/www/src/content/docs/components/field/demo.ts
@@ -10,7 +10,7 @@ export const getCode = (props: any) => {
   if (error) fieldProps.error = error;
   if (required !== undefined) fieldProps.required = required;
   return `<Field${getPropsString(fieldProps)}>
-  <InputField${getPropsString(rest)} placeholder="Enter text" />
+  <Input${getPropsString(rest)} placeholder="Enter text" />
 </Field>`;
 };
 
@@ -29,35 +29,35 @@ export const playground = {
 export const simpleDemo = {
   type: 'code',
   code: `<Field label="Name" description="Enter your full name">
-  <InputField placeholder="John Doe" />
+  <Input placeholder="John Doe" />
 </Field>`
 };
 
 export const errorDemo = {
   type: 'code',
   code: `<Field label="Email" error="Please enter a valid email address">
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>`
 };
 
 export const descriptionDemo = {
   type: 'code',
   code: `<Field label="Password" description="Must be at least 8 characters">
-  <InputField type="password" placeholder="Enter password" />
+  <Input type="password" placeholder="Enter password" />
 </Field>`
 };
 
 export const requiredDemo = {
   type: 'code',
   code: `<Field label="Username" required>
-  <InputField placeholder="Enter username" />
+  <Input placeholder="Enter username" />
 </Field>`
 };
 
 export const optionalDemo = {
   type: 'code',
   code: `<Field label="Phone Number" required={false} description="We may use this for verification">
-  <InputField placeholder="Enter phone number" />
+  <Input placeholder="Enter phone number" />
 </Field>`
 };
 
@@ -99,10 +99,10 @@ export const customValidateDemo = {
 </Field>`
 };
 
-export const withInputFieldDemo = {
+export const withInputDemo = {
   type: 'code',
   code: `<Field label="Full Name" required description="As it appears on your ID">
-  <InputField placeholder="John Doe" />
+  <Input placeholder="John Doe" />
 </Field>`
 };
 
diff --git a/apps/www/src/content/docs/components/field/index.mdx b/apps/www/src/content/docs/components/field/index.mdx
index f9710d2e7..145348644 100644
--- a/apps/www/src/content/docs/components/field/index.mdx
+++ b/apps/www/src/content/docs/components/field/index.mdx
@@ -15,7 +15,7 @@ import {
   subComponentDemo,
   constraintErrorsDemo,
   customValidateDemo,
-  withInputFieldDemo,
+  withInputDemo,
   withTextAreaDemo,
   withSelectDemo,
 } from "./demo.ts";
@@ -31,10 +31,10 @@ Field supports two APIs: a **simple props API** for common use cases and a **sub
 Use `label`, `description`, and `error` props for quick forms or when validation is handled externally (e.g., React Hook Form).
 
 ```tsx
-import { Field, InputField } from "@raystack/apsara";
+import { Field, Input } from "@raystack/apsara";
 
 <Field label="Email" description="We won't share it" error={errors.email?.message}>
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>
 ```
 
@@ -101,11 +101,11 @@ Provides field validity state to a render function. Use for custom validity-base
 
 ## Examples
 
-### With InputField
+### With Input
 
-Use Field to add label, description, and error to an InputField.
+Use Field to add label, description, and error to an Input.
 
-<Demo data={withInputFieldDemo} />
+<Demo data={withInputDemo} />
 
 ### With TextArea
 
diff --git a/apps/www/src/content/docs/components/fieldset/demo.ts b/apps/www/src/content/docs/components/fieldset/demo.ts
index 82704882c..4579d4007 100644
--- a/apps/www/src/content/docs/components/fieldset/demo.ts
+++ b/apps/www/src/content/docs/components/fieldset/demo.ts
@@ -4,13 +4,13 @@ export const playground = {
   type: 'code',
   code: `<Fieldset legend="Personal Information">
   <Field label="First Name" required>
-    <InputField placeholder="John" />
+    <Input placeholder="John" />
   </Field>
   <Field label="Last Name" required>
-    <InputField placeholder="Doe" />
+    <Input placeholder="Doe" />
   </Field>
   <Field label="Email" required>
-    <InputField type="email" placeholder="john@example.com" />
+    <Input type="email" placeholder="john@example.com" />
   </Field>
 </Fieldset>`
 };
@@ -19,10 +19,10 @@ export const basicDemo = {
   type: 'code',
   code: `<Fieldset legend="Contact Details">
   <Field label="Phone" required>
-    <InputField type="tel" placeholder="+1 (555) 000-0000" />
+    <Input type="tel" placeholder="+1 (555) 000-0000" />
   </Field>
   <Field label="Address" required={false}>
-    <InputField placeholder="123 Main St" />
+    <Input placeholder="123 Main St" />
   </Field>
 </Fieldset>`
 };
@@ -32,10 +32,10 @@ export const subComponentDemo = {
   code: `<Fieldset>
   <Fieldset.Legend>Account Settings</Fieldset.Legend>
   <Field label="Username" required>
-    <InputField placeholder="Enter username" />
+    <Input placeholder="Enter username" />
   </Field>
   <Field label="Password" required>
-    <InputField type="password" placeholder="Enter password" />
+    <Input type="password" placeholder="Enter password" />
   </Field>
 </Fieldset>`
 };
@@ -44,10 +44,10 @@ export const disabledDemo = {
   type: 'code',
   code: `<Fieldset legend="Disabled Section" disabled>
   <Field label="Read Only Field">
-    <InputField placeholder="Cannot edit" />
+    <Input placeholder="Cannot edit" />
   </Field>
   <Field label="Another Field">
-    <InputField placeholder="Also disabled" />
+    <Input placeholder="Also disabled" />
   </Field>
 </Fieldset>`
 };
@@ -57,15 +57,15 @@ export const nestedDemo = {
   code: `<Form>
   <Fieldset legend="Personal Info">
     <Field label="Full Name" required>
-      <InputField placeholder="John Doe" />
+      <Input placeholder="John Doe" />
     </Field>
   </Fieldset>
   <Fieldset legend="Work Info">
     <Field label="Company" required>
-      <InputField placeholder="Acme Inc." />
+      <Input placeholder="Acme Inc." />
     </Field>
     <Field label="Role" required={false}>
-      <InputField placeholder="Software Engineer" />
+      <Input placeholder="Software Engineer" />
     </Field>
   </Fieldset>
   <Button type="submit">Save</Button>
diff --git a/apps/www/src/content/docs/components/fieldset/index.mdx b/apps/www/src/content/docs/components/fieldset/index.mdx
index 9601683d8..aec487a4e 100644
--- a/apps/www/src/content/docs/components/fieldset/index.mdx
+++ b/apps/www/src/content/docs/components/fieldset/index.mdx
@@ -22,14 +22,14 @@ Fieldset supports a **simple props API** and a **sub-component API**.
 ### Simple API
 
 ```tsx
-import { Fieldset, Field, InputField } from "@raystack/apsara";
+import { Fieldset, Field, Input } from "@raystack/apsara";
 
 <Fieldset legend="Personal Information">
   <Field label="First Name">
-    <InputField placeholder="John" />
+    <Input placeholder="John" />
   </Field>
   <Field label="Last Name">
-    <InputField placeholder="Doe" />
+    <Input placeholder="Doe" />
   </Field>
 </Fieldset>
 ```
@@ -37,12 +37,12 @@ import { Fieldset, Field, InputField } from "@raystack/apsara";
 ### Sub-component API
 
 ```tsx
-import { Fieldset, Field, InputField } from "@raystack/apsara";
+import { Fieldset, Field, Input } from "@raystack/apsara";
 
 <Fieldset>
   <Fieldset.Legend>Personal Information</Fieldset.Legend>
   <Field label="First Name">
-    <InputField placeholder="John" />
+    <Input placeholder="John" />
   </Field>
 </Fieldset>
 ```
diff --git a/apps/www/src/content/docs/components/form/demo.ts b/apps/www/src/content/docs/components/form/demo.ts
index a85d61339..3650dbc9f 100644
--- a/apps/www/src/content/docs/components/form/demo.ts
+++ b/apps/www/src/content/docs/components/form/demo.ts
@@ -4,7 +4,7 @@ export const playground = {
   type: 'code',
   code: `<Form onSubmit={(e) => { e.preventDefault(); alert('Submitted!'); }}>
   <Field label="Email" required>
-    <InputField type="email" placeholder="Enter email" />
+    <Input type="email" placeholder="Enter email" />
   </Field>
   <Field label="Message" required={false}>
     <TextArea placeholder="Enter message" />
@@ -17,7 +17,7 @@ export const basicDemo = {
   type: 'code',
   code: `<Form onSubmit={(e) => { e.preventDefault(); alert('Submitted!'); }}>
   <Field label="Name" required>
-    <InputField placeholder="Enter your name" />
+    <Input placeholder="Enter your name" />
   </Field>
   <Button type="submit">Submit</Button>
 </Form>`
@@ -27,13 +27,13 @@ export const withFieldsDemo = {
   type: 'code',
   code: `<Form onSubmit={(e) => { e.preventDefault(); }}>
   <Field label="First Name" required>
-    <InputField placeholder="John" />
+    <Input placeholder="John" />
   </Field>
   <Field label="Last Name" required>
-    <InputField placeholder="Doe" />
+    <Input placeholder="Doe" />
   </Field>
   <Field label="Email" required description="We'll send a confirmation email">
-    <InputField type="email" placeholder="john@example.com" />
+    <Input type="email" placeholder="john@example.com" />
   </Field>
   <Field label="Bio" required={false}>
     <TextArea placeholder="Tell us about yourself" />
@@ -106,7 +106,7 @@ export const serverErrorsDemo = {
   return (
     <Form onSubmit={handleSubmit} errors={errors}>
       <Field name="email" label="Email" required>
-        <InputField type="email" placeholder="Enter email" />
+        <Input type="email" placeholder="Enter email" />
       </Field>
       <Button type="submit">Submit</Button>
     </Form>
@@ -131,10 +131,10 @@ export const propsApiErrorDemo = {
   return (
     <Form onSubmit={handleSubmit}>
       <Field label="Name" required error={errors.name}>
-        <InputField name="name" placeholder="Enter name" />
+        <Input name="name" placeholder="Enter name" />
       </Field>
       <Field label="Email" required error={errors.email}>
-        <InputField name="email" type="email" placeholder="Enter email" />
+        <Input name="email" type="email" placeholder="Enter email" />
       </Field>
       <Button type="submit">Submit</Button>
     </Form>
@@ -190,11 +190,11 @@ export const rhfDemo = {
   return (
     <Form onSubmit={handleSubmit((data) => alert(JSON.stringify(data)))}>
       <Field label="Name" required error={errors.name?.message}>
-        <InputField {...register('name', { required: 'Name is required' })} placeholder="Your name" />
+        <Input {...register('name', { required: 'Name is required' })} placeholder="Your name" />
       </Field>
 
       <Field label="Email" required error={errors.email?.message}>
-        <InputField {...register('email', { required: 'Email is required' })} placeholder="Email" />
+        <Input {...register('email', { required: 'Email is required' })} placeholder="Email" />
       </Field>
 
       <Field label="Role" required error={errors.role?.message}>
diff --git a/apps/www/src/content/docs/components/form/index.mdx b/apps/www/src/content/docs/components/form/index.mdx
index 54f9226e5..e576eed3c 100644
--- a/apps/www/src/content/docs/components/form/index.mdx
+++ b/apps/www/src/content/docs/components/form/index.mdx
@@ -24,11 +24,11 @@ import {
 Import and assemble the component:
 
 ```tsx
-import { Form, Field, InputField, Button } from "@raystack/apsara";
+import { Form, Field, Input, Button } from "@raystack/apsara";
 
 <Form onSubmit={handleSubmit}>
   <Field label="Email">
-    <InputField placeholder="Enter email" />
+    <Input placeholder="Enter email" />
   </Field>
   <Button type="submit">Submit</Button>
 </Form>
diff --git a/apps/www/src/content/docs/components/input-field/demo.ts b/apps/www/src/content/docs/components/input/demo.ts
similarity index 84%
rename from apps/www/src/content/docs/components/input-field/demo.ts
rename to apps/www/src/content/docs/components/input/demo.ts
index 65d89a6b7..1f34ccb5d 100644
--- a/apps/www/src/content/docs/components/input-field/demo.ts
+++ b/apps/www/src/content/docs/components/input/demo.ts
@@ -3,7 +3,7 @@
 import { getPropsString } from '@/lib/utils';
 
 export const getCode = (props: any) => {
-  return `<InputField${getPropsString(props)} placeholder="Enter text" />`;
+  return `<Input${getPropsString(props)} placeholder="Enter text" />`;
 };
 
 export const playground = {
@@ -26,27 +26,27 @@ export const playground = {
 
 export const basicDemo = {
   type: 'code',
-  code: `<InputField placeholder="Enter text" width="560px" />`
+  code: `<Input placeholder="Enter text" width="560px" />`
 };
 
 export const withFieldDemo = {
   type: 'code',
   code: `<Flex direction="column" gap="medium" style={{ width: 560 }}>
   <Field label="Email" required description="We won't share your email">
-    <InputField type="email" placeholder="Enter email" />
+    <Input type="email" placeholder="Enter email" />
   </Field>
   <Field label="Name" error="This field is required">
-    <InputField placeholder="Enter name" />
+    <Input placeholder="Enter name" />
   </Field>
   <Field label="Phone" required={false}>
-    <InputField type="tel" placeholder="Enter phone" />
+    <Input type="tel" placeholder="Enter phone" />
   </Field>
 </Flex>`
 };
 
 export const prefixDemo = {
   type: 'code',
-  code: `<InputField
+  code: `<Input
   placeholder="0.00"
   prefix="$"
   suffix="USD"
@@ -56,7 +56,7 @@ export const prefixDemo = {
 
 export const iconDemo = {
   type: 'code',
-  code: `<InputField
+  code: `<Input
   placeholder="Enter text"
   leadingIcon={<Home size={16}/>}
   trailingIcon={<Info size={16}/>}
@@ -66,7 +66,7 @@ export const iconDemo = {
 
 export const disabledDemo = {
   type: 'code',
-  code: `<InputField
+  code: `<Input
   placeholder="Enter text"
   disabled
   width="560px"
@@ -75,7 +75,7 @@ export const disabledDemo = {
 
 export const disabledChipsDemo = {
   type: 'code',
-  code: `<InputField
+  code: `<Input
   placeholder="Type and press Enter..."
   disabled
   width="560px"
@@ -88,7 +88,7 @@ export const disabledChipsDemo = {
 
 export const widthDemo = {
   type: 'code',
-  code: `<InputField
+  code: `<Input
   placeholder="Enter text"
   width="300px"
 />`
@@ -97,10 +97,10 @@ export const widthDemo = {
 export const sizeDemo = {
   type: 'code',
   code: `<Flex direction="column" gap="medium">
-  <InputField
+  <Input
     placeholder="32px height (default)"
   />
-  <InputField
+  <Input
     placeholder="24px height"
     size="small"
   />
@@ -110,14 +110,14 @@ export const sizeDemo = {
 export const sizeChipDemo = {
   type: 'code',
   code: `<Flex direction="column" gap="medium">
-  <InputField
+  <Input
     placeholder="Type and press Enter..."
     chips={[
       { label: "A", onRemove: () => console.log("Remove A") },
       { label: "B", onRemove: () => console.log("Remove B") }
     ]}
   />
-  <InputField
+  <Input
     placeholder="Type and press Enter..."
     size="small"
     chips={[
diff --git a/apps/www/src/content/docs/components/input-field/index.mdx b/apps/www/src/content/docs/components/input/index.mdx
similarity index 71%
rename from apps/www/src/content/docs/components/input-field/index.mdx
rename to apps/www/src/content/docs/components/input/index.mdx
index 09df2b316..dd4d6977c 100644
--- a/apps/www/src/content/docs/components/input-field/index.mdx
+++ b/apps/www/src/content/docs/components/input/index.mdx
@@ -1,7 +1,7 @@
 ---
-title: Input Field
+title: Input
 description: A text input component with support for icons, prefix/suffix, chips, and size variants.
-source: packages/raystack/components/input-field
+source: packages/raystack/components/input
 ---
 
 import {
@@ -24,18 +24,18 @@ import {
 Import and assemble the component:
 
 ```tsx
-import { InputField } from "@raystack/apsara";
+import { Input } from "@raystack/apsara";
 
-<InputField placeholder="Enter text" />
+<Input placeholder="Enter text" />
 ```
 
 For labels, description, and error messages, wrap with [Field](/docs/components/field):
 
 ```tsx
-import { Field, InputField } from "@raystack/apsara";
+import { Field, Input } from "@raystack/apsara";
 
 <Field label="Email" description="We won't share it" error={errors.email?.message}>
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>
 ```
 
@@ -43,13 +43,13 @@ import { Field, InputField } from "@raystack/apsara";
 
 Renders a text input control. For label, description, and error support, use with [Field](/docs/components/field).
 
-<auto-type-table path="./props.ts" name="InputFieldProps" />
+<auto-type-table path="./props.ts" name="InputProps" />
 
 ## Examples
 
 ### Basic Input
 
-A basic input field with a placeholder.
+A basic input with a placeholder.
 
 <Demo data={basicDemo} />
 
@@ -61,19 +61,19 @@ Use Field to add label, description, and error handling.
 
 ### With Prefix/Suffix
 
-Input field with prefix and suffix text.
+Input with prefix and suffix text.
 
 <Demo data={prefixDemo} />
 
 ### With Icons
 
-Input field with leading and trailing icons.
+Input with leading and trailing icons.
 
 <Demo data={iconDemo} />
 
 ### Disabled State
 
-Input field in disabled state.
+Input in disabled state.
 
 <Demo data={disabledDemo} />
 
@@ -85,19 +85,19 @@ When disabled, chips become non-interactive and their dismiss buttons are hidden
 
 ### Custom Width
 
-Input field with custom width.
+Input with custom width.
 
 <Demo data={widthDemo} />
 
 ### Size Variants
 
-InputField comes in two sizes: small (24px) and large (32px).
+Input comes in two sizes: small (24px) and large (32px).
 
 <Demo data={sizeDemo} />
 
 ### With Chips
 
-Input field that can display and manage chips/tags.
+Input that can display and manage chips/tags.
 
 <Demo data={sizeChipDemo} />
 
diff --git a/apps/www/src/content/docs/components/input-field/props.ts b/apps/www/src/content/docs/components/input/props.ts
similarity index 90%
rename from apps/www/src/content/docs/components/input-field/props.ts
rename to apps/www/src/content/docs/components/input/props.ts
index ed5a14eaf..01dab7581 100644
--- a/apps/www/src/content/docs/components/input-field/props.ts
+++ b/apps/www/src/content/docs/components/input/props.ts
@@ -1,6 +1,6 @@
-export interface InputFieldProps {
+export interface InputProps {
   /**
-   * Size variant of the input field.
+   * Size variant of the input.
    * @defaultValue "large"
    */
   size?: 'small' | 'large';
@@ -20,7 +20,7 @@ export interface InputFieldProps {
   /** Text or symbol to show after input value. */
   suffix?: string;
 
-  /** Custom width for the input field. */
+  /** Custom width for the input. */
   width?: string | number;
 
   /**
diff --git a/docs/V1-migration.md b/docs/V1-migration.md
index 40996ba86..65a6b84fc 100644
--- a/docs/V1-migration.md
+++ b/docs/V1-migration.md
@@ -36,7 +36,7 @@ This guide covers all breaking changes when upgrading from the last stable Radix
     - [Flex](#flex)
     - [Grid](#grid)
     - [Headline](#headline)
-    - [InputField](#inputfield)
+    - [Input (formerly InputField)](#input-formerly-inputfield)
     - [Popover](#popover)
       - [New Features](#new-features-5)
     - [Radio](#radio)
@@ -210,7 +210,7 @@ If you reference these CSS variables in custom styles:
 
 ### Form Field Pattern
 
-Labels, descriptions, errors, and optional indicators have been extracted from individual form controls into a new `Field` wrapper component. This is a **breaking change** for `InputField` and `TextArea`.
+Labels, descriptions, errors, and optional indicators have been extracted from individual form controls into a new `Field` wrapper component. This is a **breaking change** for `InputField` (now `Input`) and `TextArea`.
 
 **Before:** Each control rendered its own label, helper text, and error.
 
@@ -219,20 +219,20 @@ Labels, descriptions, errors, and optional indicators have been extracted from i
 <TextArea label="Bio" helperText="Tell us about yourself" />
 ```
 
-**After:** Wrap controls with `<Field>` for labels, descriptions, and errors. Controls are now pure inputs.
+**After:** Wrap controls with `<Field>` for labels, descriptions, and errors. Controls are now pure inputs. Note: `InputField` has also been renamed to `Input`.
 
 ```tsx
 <Field label="Email" description="We won't share it" error="Required" required={false}>
-  <InputField />
+  <Input />
 </Field>
 <Field label="Bio" description="Tell us about yourself">
   <TextArea />
 </Field>
 ```
 
-The `Field` component also provides context so that child controls (InputField, TextArea, Select, Checkbox, Switch, Radio, NumberField, Combobox) automatically inherit `required` state without passing it explicitly.
+The `Field` component also provides context so that child controls (Input, TextArea, Select, Checkbox, Switch, Radio, NumberField, Combobox) automatically inherit `required` state without passing it explicitly.
 
-See [InputField](#inputfield) and [TextArea](#textarea) for full migration details.
+See [Input (formerly InputField)](#input-formerly-inputfield) and [TextArea](#textarea) for full migration details.
 
 ---
 
@@ -719,7 +719,7 @@ Without `items`, `Command` uses its built-in auto-filter over `Command.Item` chi
 
 8. **`onValueChange` receives 2 args** on both the root and `Command.Input` — `(value: string, eventDetails)`.
 
-9. **`Command.Input` props changed.** It now accepts the same props as `InputField` (e.g. `size`, `leadingIcon`, `placeholder`, `autoFocus`). Defaults: `size="large"`, `autoFocus={true}`, leading icon is a magnifying glass. `trailingIcon`, `chips`, `maxChipsVisible`, and `variant` are not accepted.
+9. **`Command.Input` props changed.** It now accepts the same props as `Input` (e.g. `size`, `leadingIcon`, `placeholder`, `autoFocus`). Defaults: `size="large"`, `autoFocus={true}`, leading icon is a magnifying glass. `trailingIcon`, `chips`, `maxChipsVisible`, and `variant` are not accepted.
 
 **Full before/after example:**
 
@@ -1039,9 +1039,11 @@ The `render` prop also supports render functions for full control:
 
 ---
 
-### InputField
+### Input (formerly InputField)
 
-**Label, helper text, error, and optional indicator moved to `Field` wrapper.** InputField is now a pure input control — wrap it with the new `Field` component for labels, descriptions, and error messages.
+**`InputField` has been renamed to `Input`.** Update all imports and usages: `import { InputField } from "@raystack/apsara"` → `import { Input } from "@raystack/apsara"`.
+
+**Label, helper text, error, and optional indicator moved to `Field` wrapper.** Input is now a pure input control — wrap it with the new `Field` component for labels, descriptions, and error messages.
 
 1. **`label` prop removed** — use `<Field label="...">`:
 
@@ -1051,7 +1053,7 @@ The `render` prop also supports render functions for full control:
 
 // After
 <Field label="Email">
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>
 ```
 
@@ -1063,7 +1065,7 @@ The `render` prop also supports render functions for full control:
 
 // After
 <Field label="Password" description="Must be at least 8 characters">
-  <InputField placeholder="Enter password" />
+  <Input placeholder="Enter password" />
 </Field>
 ```
 
@@ -1075,7 +1077,7 @@ The `render` prop also supports render functions for full control:
 
 // After
 <Field label="Email" error="Please enter a valid email">
-  <InputField placeholder="Enter email" />
+  <Input placeholder="Enter email" />
 </Field>
 ```
 
@@ -1087,13 +1089,15 @@ The `render` prop also supports render functions for full control:
 
 // After
 <Field label="Phone" required={false}>
-  <InputField placeholder="Enter phone" />
+  <Input placeholder="Enter phone" />
 </Field>
 ```
 
 5. **`infoTooltip` prop removed** — no direct replacement. Compose manually if needed.
 
-6. **`required` now inherited from Field context.** When inside a `<Field>`, the InputField automatically inherits the `required` state. You can still pass `required` directly to override.
+6. **`required` now inherited from Field context.** When inside a `<Field>`, the Input automatically inherits the `required` state. You can still pass `required` directly to override.
+
+7. **`InputFieldProps` type renamed to `InputProps`.** Update any explicit type imports.
 
 **Full before/after example:**
 
@@ -1111,12 +1115,17 @@ The `render` prop also supports render functions for full control:
 
 // After
 <Field label="Email" description="We won't share your email" error={errors.email} required={false}>
-  <InputField placeholder="Enter email" leadingIcon={<MailIcon size={16} />} />
+  <Input placeholder="Enter email" leadingIcon={<MailIcon size={16} />} />
 </Field>
 ```
 
 Unchanged props: `size`, `variant`, `disabled`, `leadingIcon`, `trailingIcon`, `prefix`, `suffix`, `width`, `chips`, `maxChipsVisible`, `containerRef`, and all native `<input>` attributes.
 
+**Related API changes:**
+
+- `DatePicker.inputFieldProps` → `DatePicker.inputProps`
+- `RangePicker.inputFieldsProps` → `RangePicker.inputsProps`
+
 ---
 
 ### Popover
@@ -1967,9 +1976,10 @@ These are purely additive -- no migration needed.
 - [ ] Rewrite all Tooltip usages to compound component pattern
 - [ ] Update Accordion: `type` -> `multiple`, remove `collapsible`, `forceMount` -> `keepMounted`
 - [ ] Update Command: `Command.List` -> `Command.Content`, `Group heading` -> `<Command.Label>`, `onSelect` -> `onClick`, inline icons -> `leadingIcon`/`trailingIcon`, wrap dialog usages with `Command.DialogTrigger` + `Command.DialogContent` (see [Command](#command))
-- [ ] Wrap InputField usages with `<Field>` — move `label`, `helperText`, `error`, `optional` to Field props (see [InputField](#inputfield))
+- [ ] Rename `InputField` imports/usages to `Input` (see [Input (formerly InputField)](#input-formerly-inputfield))
+- [ ] Wrap Input usages with `<Field>` — move `label`, `helperText`, `error`, `optional` to Field props (see [Input (formerly InputField)](#input-formerly-inputfield))
 - [ ] Wrap TextArea usages with `<Field>` — move `label`, `helperText`, `error`, `required` to Field props (see [TextArea](#textarea))
-- [ ] Remove `infoTooltip` from InputField and TextArea (no longer supported)
+- [ ] Remove `infoTooltip` from Input and TextArea (no longer supported)
 - [ ] Review TextArea usages for overflow behavior change (`hidden` -> `auto`) and removed `min-height` (see [TextArea](#textarea))
 - [ ] Update custom CSS targeting `data-state` attributes (see [Data Attributes](#data-attributes))
 - [ ] Update custom CSS referencing `--radix-*` variables (see [CSS Variables](#css-variables))
diff --git a/packages/raystack/components/calendar/date-picker.tsx b/packages/raystack/components/calendar/date-picker.tsx
index af2ed0932..607a811a2 100644
--- a/packages/raystack/components/calendar/date-picker.tsx
+++ b/packages/raystack/components/calendar/date-picker.tsx
@@ -12,8 +12,8 @@ import {
   useState
 } from 'react';
 import { PropsBase, PropsSingleRequired } from 'react-day-picker';
-import { InputField } from '../input-field';
-import { InputFieldProps } from '../input-field/input-field';
+import { Input } from '../input';
+import { InputProps } from '../input/input';
 import { Popover } from '../popover';
 import { PopoverContentProps } from '../popover/popover';
 import { Calendar } from './calendar';
@@ -23,7 +23,7 @@ dayjs.extend(customParseFormat);
 
 interface DatePickerProps {
   dateFormat?: string;
-  inputFieldProps?: InputFieldProps;
+  inputProps?: InputProps;
   calendarProps?: PropsSingleRequired & PropsBase;
   onSelect?: (date: Date) => void;
   value?: Date;
@@ -37,7 +37,7 @@ interface DatePickerProps {
 
 export function DatePicker({
   dateFormat = 'DD/MM/YYYY',
-  inputFieldProps,
+  inputProps,
   calendarProps,
   value = new Date(),
   onSelect = () => {},
@@ -53,9 +53,9 @@ export function DatePicker({
   const formattedDate = dayjs(selectedDate).format(dateFormat);
 
   const isDropdownOpenRef = useRef(false);
-  const inputFieldRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
-  const isInputFieldFocused = useRef(false);
+  const isInputFocused = useRef(false);
   const selectedDateRef = useRef(selectedDate);
 
   useEffect(() => {
@@ -65,7 +65,7 @@ export function DatePicker({
   const isElementOutside = useCallback((el: HTMLElement) => {
     return (
       !isDropdownOpenRef.current && // Month and Year dropdown from Date picker
-      !inputFieldRef.current?.contains(el) && // InputField
+      !inputRef.current?.contains(el) && // Input
       !contentRef.current?.contains(el)
     );
   }, []);
@@ -79,17 +79,17 @@ export function DatePicker({
   );
 
   function registerEventListeners() {
-    isInputFieldFocused.current = true;
+    isInputFocused.current = true;
     document.addEventListener('mouseup', handleMouseDown);
   }
 
   function removeEventListeners(skipUpdate = false) {
-    isInputFieldFocused.current = false;
+    isInputFocused.current = false;
     setShowCalendar(false);
 
     const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);
 
-    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;
+    if (inputRef.current) inputRef.current.value = updatedVal;
     if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());
 
     document.removeEventListener('mouseup', handleMouseDown);
@@ -109,7 +109,7 @@ export function DatePicker({
   function onOpenChange(open?: boolean) {
     if (
       !isDropdownOpenRef.current &&
-      !(isInputFieldFocused.current && showCalendar)
+      !(isInputFocused.current && showCalendar)
     ) {
       setShowCalendar(Boolean(open));
     }
@@ -118,23 +118,23 @@ export function DatePicker({
   }
 
   function handleInputFocus() {
-    if (isInputFieldFocused.current) return;
+    if (isInputFocused.current) return;
     if (!showCalendar) setShowCalendar(true);
   }
 
   function handleInputBlur(event: React.FocusEvent) {
-    if (isInputFieldFocused.current) {
+    if (isInputFocused.current) {
       const el = event.relatedTarget as HTMLElement | null;
       if (el && isElementOutside(el)) removeEventListeners();
     } else {
       registerEventListeners();
-      setTimeout(() => inputFieldRef.current?.select());
+      setTimeout(() => inputRef.current?.select());
     }
   }
 
   function handleKeyUp(event: React.KeyboardEvent) {
-    if (event.code === 'Enter' && inputFieldRef.current) {
-      inputFieldRef.current.blur();
+    if (event.code === 'Enter' && inputRef.current) {
+      inputRef.current.blur();
       removeEventListeners();
     }
   }
@@ -172,14 +172,14 @@ export function DatePicker({
   }
 
   const defaultTrigger = (
-    <InputField
+    <Input
       size='small'
       placeholder='Select date'
       aria-invalid={!!error}
       className={styles.datePickerInput}
       trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
-      {...inputFieldProps}
-      ref={inputFieldRef}
+      {...inputProps}
+      ref={inputRef}
       value={formattedDate}
       onChange={handleInputChange}
       onFocus={handleInputFocus}
diff --git a/packages/raystack/components/calendar/range-picker.tsx b/packages/raystack/components/calendar/range-picker.tsx
index d249909bc..76e3d17d0 100644
--- a/packages/raystack/components/calendar/range-picker.tsx
+++ b/packages/raystack/components/calendar/range-picker.tsx
@@ -6,8 +6,8 @@ import dayjs from 'dayjs';
 import { isValidElement, useCallback, useMemo, useState } from 'react';
 import { DateRange, PropsBase, PropsRangeRequired } from 'react-day-picker';
 import { Flex } from '../flex';
-import { InputField } from '../input-field';
-import { InputFieldProps } from '../input-field/input-field';
+import { Input } from '../input';
+import { InputProps } from '../input/input';
 import { Popover } from '../popover';
 import { PopoverContentProps } from '../popover/popover';
 import { Calendar } from './calendar';
@@ -15,7 +15,7 @@ import styles from './calendar.module.css';
 
 interface RangePickerProps {
   dateFormat?: string;
-  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };
+  inputsProps?: { startDate?: InputProps; endDate?: InputProps };
   calendarProps?: PropsRangeRequired & PropsBase;
   onSelect?: (date: DateRange) => void;
   pickerGroupClassName?: string;
@@ -34,7 +34,7 @@ type RangeFields = keyof DateRange;
 
 export function RangePicker({
   dateFormat = 'DD/MM/YYYY',
-  inputFieldsProps = {},
+  inputsProps = {},
   calendarProps,
   onSelect = () => {},
   value,
@@ -132,12 +132,12 @@ export function RangePicker({
 
   const defaultTrigger = (
     <Flex gap='medium' className={pickerGroupClassName}>
-      <InputField
+      <Input
         size='small'
         placeholder='Select start date'
         trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
         className={styles.datePickerInput}
-        {...(inputFieldsProps.startDate ?? {})}
+        {...(inputsProps.startDate ?? {})}
         value={startDate}
         readOnly
         data-range-field='start'
@@ -145,12 +145,12 @@ export function RangePicker({
         onClick={onTriggerClick}
       />
 
-      <InputField
+      <Input
         size='small'
         placeholder='Select end date'
         trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
         className={styles.datePickerInput}
-        {...(inputFieldsProps.endDate ?? {})}
+        {...(inputsProps.endDate ?? {})}
         value={endDate}
         readOnly
         data-range-field='end'
diff --git a/packages/raystack/components/color-picker/color-picker-input.tsx b/packages/raystack/components/color-picker/color-picker-input.tsx
index f29a8e59b..79ba97e21 100644
--- a/packages/raystack/components/color-picker/color-picker-input.tsx
+++ b/packages/raystack/components/color-picker/color-picker-input.tsx
@@ -2,15 +2,15 @@
 
 import Color from 'color';
 import { ComponentProps } from 'react';
-import { InputField } from '../input-field';
+import { Input } from '../input';
 import { useColorPicker } from './color-picker-root';
 import { getColorString } from './utils';
 
-export const ColorPickerInput = (props: ComponentProps<typeof InputField>) => {
+export const ColorPickerInput = (props: ComponentProps<typeof Input>) => {
   const { hue, saturation, lightness, alpha, mode } = useColorPicker();
   const color = Color.hsl(hue, saturation, lightness, alpha ?? 1);
 
-  return <InputField value={getColorString(color, mode)} readOnly {...props} />;
+  return <Input value={getColorString(color, mode)} readOnly {...props} />;
 };
 
 ColorPickerInput.displayName = 'ColorPicker.Input';
diff --git a/packages/raystack/components/combobox/combobox-input.tsx b/packages/raystack/components/combobox/combobox-input.tsx
index bca19aaeb..53b8056e8 100644
--- a/packages/raystack/components/combobox/combobox-input.tsx
+++ b/packages/raystack/components/combobox/combobox-input.tsx
@@ -3,13 +3,13 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { type ComponentProps } from 'react';
-import { InputField } from '../input-field';
+import { Input } from '../input';
 import styles from './combobox.module.css';
 import { useComboboxContext } from './combobox-root';
 
 export interface ComboboxInputProps
   extends Omit<
-    ComponentProps<typeof InputField>,
+    ComponentProps<typeof Input>,
     'trailingIcon' | 'suffix' | 'chips' | 'maxChipsVisible'
   > {}
 
@@ -20,7 +20,7 @@ export const ComboboxInput = ({ ref, ...props }: ComboboxInputProps) => {
     <ComboboxPrimitive.Input
       ref={ref}
       render={
-        <InputField
+        <Input
           containerRef={inputContainerRef}
           chips={
             multiple && Array.isArray(value)
diff --git a/packages/raystack/components/command/command-input.tsx b/packages/raystack/components/command/command-input.tsx
index 6e8404926..10a9ce3d8 100644
--- a/packages/raystack/components/command/command-input.tsx
+++ b/packages/raystack/components/command/command-input.tsx
@@ -2,13 +2,13 @@
 
 import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
 import { type ComponentProps, type ReactNode } from 'react';
-import { InputField } from '../input-field';
+import { Input } from '../input';
 import styles from './command.module.css';
 import { useCommandContext } from './command-root';
 
 export interface CommandInputProps
   extends Omit<
-    ComponentProps<typeof InputField>,
+    ComponentProps<typeof Input>,
     'trailingIcon' | 'chips' | 'maxChipsVisible' | 'variant'
   > {
   /** Icon rendered at the start of the input. */
@@ -29,7 +29,7 @@ export const CommandInput = ({
       <AutocompletePrimitive.Input
         ref={ref}
         render={
-          <InputField
+          <Input
             containerRef={inputContainerRef}
             leadingIcon={leadingIcon}
             variant='borderless'
diff --git a/packages/raystack/components/filter-chip/filter-chip.module.css b/packages/raystack/components/filter-chip/filter-chip.module.css
index b83dba957..6716b8152 100644
--- a/packages/raystack/components/filter-chip/filter-chip.module.css
+++ b/packages/raystack/components/filter-chip/filter-chip.module.css
@@ -144,7 +144,7 @@ button.selectValue:hover {
   box-shadow: none;
 }
 
-/* Match height of InputField when FilterChip variant is text */
+/* Match height of Input when FilterChip variant is text */
 .chip[data-variant="text"] .inputField {
   height: var(--rs-space-7);
   min-height: var(--rs-space-7);
diff --git a/packages/raystack/components/filter-chip/filter-chip.tsx b/packages/raystack/components/filter-chip/filter-chip.tsx
index 1ab910194..74004251c 100644
--- a/packages/raystack/components/filter-chip/filter-chip.tsx
+++ b/packages/raystack/components/filter-chip/filter-chip.tsx
@@ -13,7 +13,7 @@ import {
 } from '~/types/filters';
 import { DatePicker } from '../calendar';
 import { Flex } from '../flex';
-import { InputField } from '../input-field';
+import { Input } from '../input';
 import { Select } from '../select';
 import { BaseSelectProps } from '../select/select-root';
 import { Text } from '../text';
@@ -140,14 +140,14 @@ export const FilterChip = ({
               value={filterValue}
               onSelect={date => handleFilterValueChange(date)}
               showCalendarIcon={false}
-              inputFieldProps={{ className: styles.dateField }}
+              inputProps={{ className: styles.dateField }}
             />
           </div>
         );
       default:
         return (
           <div className={styles.inputFieldWrapper}>
-            <InputField
+            <Input
               variant={variant === 'text' ? 'borderless' : 'default'}
               className={styles.inputField}
               value={filterValue}
diff --git a/packages/raystack/components/input-field/index.tsx b/packages/raystack/components/input-field/index.tsx
deleted file mode 100644
index ad7292e10..000000000
--- a/packages/raystack/components/input-field/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { InputField } from "./input-field";
diff --git a/packages/raystack/components/input-field/__tests__/input-field.test.tsx b/packages/raystack/components/input/__tests__/input.test.tsx
similarity index 79%
rename from packages/raystack/components/input-field/__tests__/input-field.test.tsx
rename to packages/raystack/components/input/__tests__/input.test.tsx
index 393e1137e..ea8f171d6 100644
--- a/packages/raystack/components/input-field/__tests__/input-field.test.tsx
+++ b/packages/raystack/components/input/__tests__/input.test.tsx
@@ -1,18 +1,18 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { InputField } from '../input-field';
-import styles from '../input-field.module.css';
+import { Input } from '../input';
+import styles from '../input.module.css';
 
-describe('InputField', () => {
+describe('Input', () => {
   describe('Basic Rendering', () => {
     it('renders input element', () => {
-      render(<InputField />);
+      render(<Input />);
       const input = screen.getByRole('textbox');
       expect(input).toBeInTheDocument();
     });
 
     it('applies custom className', () => {
-      render(<InputField className='custom-input' />);
+      render(<Input className='custom-input' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveClass('custom-input');
       expect(input).toHaveClass(styles['input-field']);
@@ -20,36 +20,36 @@ describe('InputField', () => {
 
     it('forwards ref correctly', () => {
       const ref = vi.fn();
-      render(<InputField ref={ref} />);
+      render(<Input ref={ref} />);
       expect(ref).toHaveBeenCalled();
     });
 
     it('renders with placeholder', () => {
-      render(<InputField placeholder='Enter text here' />);
+      render(<Input placeholder='Enter text here' />);
       const input = screen.getByPlaceholderText('Enter text here');
       expect(input).toBeInTheDocument();
     });
 
     it('sets custom width', () => {
-      const { container } = render(<InputField width='300px' />);
+      const { container } = render(<Input width='300px' />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveStyle({ width: '300px' });
     });
 
     it('sets numeric width as pixels', () => {
-      const { container } = render(<InputField width={400} />);
+      const { container } = render(<Input width={400} />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveStyle({ width: '400px' });
     });
 
     it('defaults to 100% width', () => {
-      const { container } = render(<InputField />);
+      const { container } = render(<Input />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveStyle({ width: '100%' });
     });
 
     it('disables input when disabled prop is true', () => {
-      render(<InputField disabled />);
+      render(<Input disabled />);
       const input = screen.getByRole('textbox');
       expect(input).toBeDisabled();
     });
@@ -57,13 +57,13 @@ describe('InputField', () => {
 
   describe('Sizes', () => {
     it('renders large size by default', () => {
-      const { container } = render(<InputField />);
+      const { container } = render(<Input />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveClass(styles['size-large']);
     });
 
     it('renders small size when specified', () => {
-      const { container } = render(<InputField size='small' />);
+      const { container } = render(<Input size='small' />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveClass(styles['size-small']);
     });
@@ -71,13 +71,13 @@ describe('InputField', () => {
 
   describe('Variants', () => {
     it('renders default variant by default', () => {
-      const { container } = render(<InputField />);
+      const { container } = render(<Input />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveClass(styles['variant-default']);
     });
 
     it('renders borderless variant when specified', () => {
-      const { container } = render(<InputField variant='borderless' />);
+      const { container } = render(<Input variant='borderless' />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
       expect(wrapper).toHaveClass(styles['variant-borderless']);
     });
@@ -86,7 +86,7 @@ describe('InputField', () => {
   describe('Icons', () => {
     it('renders leading icon', () => {
       const icon = <span data-testid='search-icon'>🔍</span>;
-      const { container } = render(<InputField leadingIcon={icon} />);
+      const { container } = render(<Input leadingIcon={icon} />);
       expect(screen.getByTestId('search-icon')).toBeInTheDocument();
       const iconContainer = container.querySelector(
         `.${styles['leading-icon']}`
@@ -96,7 +96,7 @@ describe('InputField', () => {
 
     it('renders trailing icon', () => {
       const icon = <span data-testid='clear-icon'>✕</span>;
-      const { container } = render(<InputField trailingIcon={icon} />);
+      const { container } = render(<Input trailingIcon={icon} />);
       expect(screen.getByTestId('clear-icon')).toBeInTheDocument();
       const iconContainer = container.querySelector(
         `.${styles['trailing-icon']}`
@@ -107,17 +107,17 @@ describe('InputField', () => {
 
   describe('Prefix and Suffix', () => {
     it('renders prefix', () => {
-      render(<InputField prefix='$' />);
+      render(<Input prefix='$' />);
       expect(screen.getByText('$')).toBeInTheDocument();
     });
 
     it('renders suffix', () => {
-      render(<InputField suffix='USD' />);
+      render(<Input suffix='USD' />);
       expect(screen.getByText('USD')).toBeInTheDocument();
     });
 
     it('renders both prefix and suffix', () => {
-      render(<InputField prefix='$' suffix='USD' />);
+      render(<Input prefix='$' suffix='USD' />);
       expect(screen.getByText('$')).toBeInTheDocument();
       expect(screen.getByText('USD')).toBeInTheDocument();
     });
@@ -126,7 +126,7 @@ describe('InputField', () => {
   describe('Chips', () => {
     it('renders chips', () => {
       const chips = [{ label: 'Tag1' }, { label: 'Tag2' }];
-      render(<InputField chips={chips} />);
+      render(<Input chips={chips} />);
       expect(screen.getByText('Tag1')).toBeInTheDocument();
       expect(screen.getByText('Tag2')).toBeInTheDocument();
     });
@@ -138,7 +138,7 @@ describe('InputField', () => {
         { label: 'Tag3' },
         { label: 'Tag4' }
       ];
-      render(<InputField chips={chips} maxChipsVisible={2} />);
+      render(<Input chips={chips} maxChipsVisible={2} />);
       expect(screen.getByText('Tag1')).toBeInTheDocument();
       expect(screen.getByText('Tag2')).toBeInTheDocument();
       expect(screen.queryByText('Tag3')).not.toBeInTheDocument();
@@ -149,7 +149,7 @@ describe('InputField', () => {
     it('renders dismissible chips with onRemove', () => {
       const handleRemove = vi.fn();
       const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      const { container } = render(<InputField chips={chips} />);
+      const { container } = render(<Input chips={chips} />);
       const chip = container.querySelector(`.${styles.chip}`);
       expect(chip).toBeInTheDocument();
     });
@@ -158,14 +158,14 @@ describe('InputField', () => {
       const chips = Array.from({ length: 5 }, (_, i) => ({
         label: `Tag${i + 1}`
       }));
-      render(<InputField chips={chips} maxChipsVisible={3} />);
+      render(<Input chips={chips} maxChipsVisible={3} />);
       expect(screen.getByText('+2')).toBeInTheDocument();
     });
 
     it('does not render dismiss button on chips when disabled', () => {
       const handleRemove = vi.fn();
       const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      render(<InputField chips={chips} disabled />);
+      render(<Input chips={chips} disabled />);
       const dismissButton = screen.queryByRole('button', {
         name: 'Remove Tag1'
       });
@@ -175,7 +175,7 @@ describe('InputField', () => {
     it('chips are non-interactive when disabled', () => {
       const handleRemove = vi.fn();
       const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      const { container } = render(<InputField chips={chips} disabled />);
+      const { container } = render(<Input chips={chips} disabled />);
       const chip = container.querySelector(`.${styles.chip}`);
       expect(chip).toHaveAttribute('data-disabled');
     });
@@ -183,7 +183,7 @@ describe('InputField', () => {
     it('chips remain interactive when not disabled', () => {
       const handleRemove = vi.fn();
       const chips = [{ label: 'Tag1', onRemove: handleRemove }];
-      render(<InputField chips={chips} />);
+      render(<Input chips={chips} />);
       const dismissButton = screen.getByRole('button', {
         name: 'Remove Tag1'
       });
@@ -195,7 +195,7 @@ describe('InputField', () => {
   describe('Event Handling', () => {
     it('handles onChange event', () => {
       const handleChange = vi.fn();
-      render(<InputField onChange={handleChange} />);
+      render(<Input onChange={handleChange} />);
       const input = screen.getByRole('textbox');
       fireEvent.change(input, { target: { value: 'test' } });
       expect(handleChange).toHaveBeenCalled();
@@ -203,7 +203,7 @@ describe('InputField', () => {
 
     it('handles onFocus event', () => {
       const handleFocus = vi.fn();
-      render(<InputField onFocus={handleFocus} />);
+      render(<Input onFocus={handleFocus} />);
       const input = screen.getByRole('textbox');
       fireEvent.focus(input);
       expect(handleFocus).toHaveBeenCalled();
@@ -211,7 +211,7 @@ describe('InputField', () => {
 
     it('handles onBlur event', () => {
       const handleBlur = vi.fn();
-      render(<InputField onBlur={handleBlur} />);
+      render(<Input onBlur={handleBlur} />);
       const input = screen.getByRole('textbox');
       fireEvent.blur(input);
       expect(handleBlur).toHaveBeenCalled();
@@ -219,7 +219,7 @@ describe('InputField', () => {
 
     it('handles onKeyDown event', () => {
       const handleKeyDown = vi.fn();
-      render(<InputField onKeyDown={handleKeyDown} />);
+      render(<Input onKeyDown={handleKeyDown} />);
       const input = screen.getByRole('textbox');
       fireEvent.keyDown(input, { key: 'Enter' });
       expect(handleKeyDown).toHaveBeenCalled();
@@ -229,7 +229,7 @@ describe('InputField', () => {
   describe('Input Types', () => {
     const inputTypes = ['text', 'email', 'password', 'number', 'tel', 'url'];
     it.each(inputTypes)('supports %s type', type => {
-      const { container } = render(<InputField type={type} />);
+      const { container } = render(<Input type={type} />);
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('type', type);
     });
@@ -237,19 +237,19 @@ describe('InputField', () => {
 
   describe('Accessibility', () => {
     it('supports aria-label', () => {
-      render(<InputField aria-label='Search input' />);
+      render(<Input aria-label='Search input' />);
       const input = screen.getByLabelText('Search input');
       expect(input).toBeInTheDocument();
     });
 
     it('supports aria-describedby', () => {
-      render(<InputField aria-describedby='description' />);
+      render(<Input aria-describedby='description' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-describedby', 'description');
     });
 
     it('supports aria-required', () => {
-      render(<InputField required aria-required='true' />);
+      render(<Input required aria-required='true' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('aria-required', 'true');
     });
@@ -257,43 +257,43 @@ describe('InputField', () => {
 
   describe('Form Attributes', () => {
     it('supports name attribute', () => {
-      render(<InputField name='email' />);
+      render(<Input name='email' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('name', 'email');
     });
 
     it('supports id attribute', () => {
-      render(<InputField id='email-input' />);
+      render(<Input id='email-input' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('id', 'email-input');
     });
 
     it('supports autoComplete attribute', () => {
-      render(<InputField autoComplete='email' />);
+      render(<Input autoComplete='email' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('autoComplete', 'email');
     });
 
     it('supports required attribute', () => {
-      render(<InputField required />);
+      render(<Input required />);
       const input = screen.getByRole('textbox');
       expect(input).toBeRequired();
     });
 
     it('supports readOnly attribute', () => {
-      render(<InputField readOnly value='Read only text' />);
+      render(<Input readOnly value='Read only text' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('readOnly');
     });
 
     it('supports maxLength attribute', () => {
-      render(<InputField maxLength={50} />);
+      render(<Input maxLength={50} />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('maxLength', '50');
     });
 
     it('supports pattern attribute', () => {
-      render(<InputField pattern='[0-9]*' />);
+      render(<Input pattern='[0-9]*' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveAttribute('pattern', '[0-9]*');
     });
diff --git a/packages/raystack/components/input/index.tsx b/packages/raystack/components/input/index.tsx
new file mode 100644
index 000000000..f376f8cdb
--- /dev/null
+++ b/packages/raystack/components/input/index.tsx
@@ -0,0 +1 @@
+export { Input } from './input';
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input/input.module.css
similarity index 100%
rename from packages/raystack/components/input-field/input-field.module.css
rename to packages/raystack/components/input/input.module.css
diff --git a/packages/raystack/components/input-field/input-field.tsx b/packages/raystack/components/input/input.tsx
similarity index 94%
rename from packages/raystack/components/input-field/input-field.tsx
rename to packages/raystack/components/input/input.tsx
index 5cfce4aff..edccca5b7 100644
--- a/packages/raystack/components/input-field/input-field.tsx
+++ b/packages/raystack/components/input/input.tsx
@@ -3,7 +3,7 @@ import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ReactNode, RefObject } from 'react';
 import { Chip } from '../chip';
 import { useFieldContext } from '../field';
-import styles from './input-field.module.css';
+import styles from './input.module.css';
 
 const inputWrapper = cva(styles['input-wrapper'], {
   variants: {
@@ -22,7 +22,7 @@ const inputWrapper = cva(styles['input-wrapper'], {
   }
 });
 
-export interface InputFieldProps
+export interface InputProps
   extends Omit<InputPrimitive.Props, 'size'>,
     VariantProps<typeof inputWrapper> {
   disabled?: boolean;
@@ -37,7 +37,7 @@ export interface InputFieldProps
   containerRef?: RefObject<HTMLDivElement | null>;
 }
 
-export function InputField({
+export function Input({
   className,
   disabled,
   placeholder,
@@ -53,7 +53,7 @@ export function InputField({
   containerRef,
   required,
   ...props
-}: InputFieldProps) {
+}: InputProps) {
   const fieldContext = useFieldContext();
   const resolvedRequired = required ?? fieldContext?.required;
 
@@ -114,4 +114,4 @@ export function InputField({
   );
 }
 
-InputField.displayName = 'InputField';
+Input.displayName = 'Input';
diff --git a/packages/raystack/components/search/__tests__/search.test.tsx b/packages/raystack/components/search/__tests__/search.test.tsx
index 1daffa263..ed9430f00 100644
--- a/packages/raystack/components/search/__tests__/search.test.tsx
+++ b/packages/raystack/components/search/__tests__/search.test.tsx
@@ -196,8 +196,8 @@ describe('Search', () => {
     });
   });
 
-  describe('InputField Props', () => {
-    it('passes className to input field', () => {
+  describe('Input Props', () => {
+    it('passes className to input', () => {
       render(<Search className='custom-search' />);
       const input = screen.getByRole('textbox');
       expect(input).toHaveClass('custom-search');
diff --git a/packages/raystack/components/search/search.tsx b/packages/raystack/components/search/search.tsx
index e79fcab6e..23a3ed5b2 100644
--- a/packages/raystack/components/search/search.tsx
+++ b/packages/raystack/components/search/search.tsx
@@ -2,12 +2,12 @@
 
 import { CrossCircledIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { IconButton } from '../icon-button';
-import { InputField } from '../input-field';
-import { InputFieldProps } from '../input-field/input-field';
+import { Input } from '../input';
+import { InputProps } from '../input/input';
 
 import styles from './search.module.css';
 
-export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
+export interface SearchProps extends Omit<InputProps, 'leadingIcon'> {
   showClearButton?: boolean;
   onClear?: () => void;
   variant?: 'default' | 'borderless';
@@ -48,7 +48,7 @@ export function Search({
 
   return (
     <div className={styles.container} role='search' style={{ width }}>
-      <InputField
+      <Input
         leadingIcon={<MagnifyingGlassIcon />}
         trailingIcon={trailingIconWithClear}
         placeholder={placeholder}
diff --git a/packages/raystack/figma/input.figma.tsx b/packages/raystack/figma/input.figma.tsx
index 53e63c581..b598e1187 100644
--- a/packages/raystack/figma/input.figma.tsx
+++ b/packages/raystack/figma/input.figma.tsx
@@ -1,9 +1,9 @@
 import figma from '@figma/code-connect';
 import { Field } from '../components/field';
-import { InputField } from '../components/input-field';
+import { Input } from '../components/input';
 
-figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
-  imports: ["import { Field, InputField } from '@raystack/apsara'"],
+figma.connect(Input, '<FIGMA_LINK>?node-id=1-297', {
+  imports: ["import { Field, Input } from '@raystack/apsara'"],
   props: {
     prefix: figma.enum('Variant', {
       Prefix: figma.textContent('Prefix')
@@ -46,10 +46,10 @@ figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
     if (label || description || optional) {
       return (
         <Field label={label} description={description} required={!optional}>
-          <InputField {...props} />
+          <Input {...props} />
         </Field>
       );
     }
-    return <InputField {...props} />;
+    return <Input {...props} />;
   }
 });
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index cd849b3b3..831fe2de3 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -44,7 +44,7 @@ export { Headline } from './components/headline';
 export { IconButton } from './components/icon-button';
 export { Image } from './components/image';
 export { Indicator } from './components/indicator';
-export { InputField } from './components/input-field';
+export { Input } from './components/input';
 export { Label } from './components/label';
 export { Link } from './components/link';
 export { List } from './components/list';