diff --git a/apps/www/package.json b/apps/www/package.json
index d09fbbc7e..1a3ca8d41 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -29,6 +29,7 @@
     "prettier": "^2.8.8",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "react-hook-form": "^7.72.1",
     "react-live": "^4.1.8",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx
index 2f9f94b16..dc326dc30 100644
--- a/apps/www/src/app/examples/page.tsx
+++ b/apps/www/src/app/examples/page.tsx
@@ -186,8 +186,6 @@ const Page = () => {
                 placeholder='Default large search'
                 showClearButton
                 value={search1}
-                label='Search'
-                helperText='This is a helper text'
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   setSearch1(e.target.value)
                 }
@@ -1335,7 +1333,6 @@ const Page = () => {
                 variant='borderless'
                 showClearButton
                 value={search3}
-                label='Search'
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   setSearch3(e.target.value)
                 }
@@ -1582,7 +1579,6 @@ const Page = () => {
                           </Popover.Content>
                         </Popover>
                         <InputField
-                          label='Filter Team Members'
                           placeholder='Type to filter...'
                           leadingIcon={<FilterIcon />}
                           width='100%'
@@ -1639,7 +1635,6 @@ const Page = () => {
                     </Flex>
 
                     <TextArea
-                      label='Example Text Area'
                       value={inputValue}
                       onChange={e => setInputValue(e.target.value)}
                     />
@@ -1753,7 +1748,6 @@ const Page = () => {
                           </Popover.Content>
                         </Popover>
                         <InputField
-                          label='Filter Team Members'
                           placeholder='Type to filter...'
                           leadingIcon={<FilterIcon />}
                           width='100%'
diff --git a/apps/www/src/components/playground/field-examples.tsx b/apps/www/src/components/playground/field-examples.tsx
new file mode 100644
index 000000000..3c7e6d8bf
--- /dev/null
+++ b/apps/www/src/components/playground/field-examples.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { Field, Flex, InputField, TextArea } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FieldExamples() {
+  return (
+    <PlaygroundLayout title='Field'>
+      <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' />
+          </Field>
+          <Field label='Email' error='Please enter a valid email'>
+            <InputField type='email' placeholder='Enter email' />
+          </Field>
+          <Field label='Phone' required={false}>
+            <InputField placeholder='Enter phone' />
+          </Field>
+        </Flex>
+        <Flex gap='large' direction='column' style={{ width: 300 }}>
+          <Field
+            label='Bio'
+            required={false}
+            description='Tell us about yourself'
+          >
+            <TextArea placeholder='Write something...' />
+          </Field>
+          <Field label='Disabled' disabled>
+            <InputField placeholder='Cannot edit' />
+          </Field>
+        </Flex>
+      </Flex>
+    </PlaygroundLayout>
+  );
+}
diff --git a/apps/www/src/components/playground/fieldset-examples.tsx b/apps/www/src/components/playground/fieldset-examples.tsx
new file mode 100644
index 000000000..8266f016c
--- /dev/null
+++ b/apps/www/src/components/playground/fieldset-examples.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { Field, Fieldset, Flex, InputField } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FieldsetExamples() {
+  return (
+    <PlaygroundLayout title='Fieldset'>
+      <Flex gap='large' direction='column' style={{ maxWidth: 400 }}>
+        <Fieldset legend='Contact Details'>
+          <Field label='Phone' required>
+            <InputField type='tel' placeholder='+1 (555) 000-0000' />
+          </Field>
+          <Field label='Address' required={false}>
+            <InputField placeholder='123 Main St' />
+          </Field>
+        </Fieldset>
+        <Fieldset legend='Disabled Section' disabled>
+          <Field label='Read Only'>
+            <InputField placeholder='Cannot edit' />
+          </Field>
+        </Fieldset>
+      </Flex>
+    </PlaygroundLayout>
+  );
+}
diff --git a/apps/www/src/components/playground/form-examples.tsx b/apps/www/src/components/playground/form-examples.tsx
new file mode 100644
index 000000000..b02ea86c5
--- /dev/null
+++ b/apps/www/src/components/playground/form-examples.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import {
+  Button,
+  Field,
+  Fieldset,
+  Form,
+  InputField,
+  TextArea
+} from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function FormExamples() {
+  return (
+    <PlaygroundLayout title='Form'>
+      <Form
+        onSubmit={e => {
+          e.preventDefault();
+          alert('Form submitted!');
+        }}
+        style={{ maxWidth: 400 }}
+      >
+        <Fieldset legend='Personal Information'>
+          <Field label='First Name' required>
+            <InputField placeholder='John' />
+          </Field>
+          <Field label='Last Name' required>
+            <InputField placeholder='Doe' />
+          </Field>
+        </Fieldset>
+        <Field label='Email' required description="We'll send a confirmation">
+          <InputField type='email' placeholder='john@example.com' />
+        </Field>
+        <Field label='Message' required={false}>
+          <TextArea placeholder='Tell us more...' />
+        </Field>
+        <Button type='submit'>Submit</Button>
+      </Form>
+    </PlaygroundLayout>
+  );
+}
diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index dd0d2bc11..9ec2f5237 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -19,8 +19,11 @@ export * from './data-table-examples';
 export * from './dialog-examples';
 export * from './drawer-examples';
 export * from './empty-state-examples';
+export * from './field-examples';
+export * from './fieldset-examples';
 export * from './filter-chip-examples';
 export * from './flex-examples';
+export * from './form-examples';
 export * from './headline-examples';
 export * from './icon-button-examples';
 export * from './image-examples';
diff --git a/apps/www/src/components/playground/input-field-examples.tsx b/apps/www/src/components/playground/input-field-examples.tsx
index 0dd240f7d..f03f4f477 100644
--- a/apps/www/src/components/playground/input-field-examples.tsx
+++ b/apps/www/src/components/playground/input-field-examples.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Flex, InputField } from '@raystack/apsara';
+import { Field, Flex, InputField } from '@raystack/apsara';
 import { Home, Info } from 'lucide-react';
 import PlaygroundLayout from './playground-layout';
 
@@ -9,32 +9,24 @@ export function InputFieldExamples() {
     <PlaygroundLayout title='InputField'>
       <Flex gap='large' wrap='wrap'>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
-          <InputField label='Default' placeholder='Enter text' />
-          <InputField
-            label='With label'
-            placeholder='Enter text'
-            helperText='This is a helper text'
-          />
-          <InputField
-            label='With Error'
-            placeholder='Enter text'
-            error='This field is required'
-          />
+          <Field label='Default'>
+            <InputField placeholder='Enter text' />
+          </Field>
+          <Field label='With Description' description='This is a description'>
+            <InputField placeholder='Enter text' />
+          </Field>
+          <Field label='With Error' error='This field is required'>
+            <InputField placeholder='Enter text' />
+          </Field>
         </Flex>
         <Flex gap='large' direction='column' style={{ width: 300 }}>
+          <InputField placeholder='0.00' prefix='$' suffix='USD' />
           <InputField
-            label='With Prefix/Suffix'
-            placeholder='0.00'
-            prefix='$'
-            suffix='USD'
-          />
-          <InputField
-            label='With Icons'
             placeholder='Enter text'
             leadingIcon={<Home size={16} />}
             trailingIcon={<Info size={16} />}
           />
-          <InputField label='Disabled' placeholder='Enter text' disabled />
+          <InputField placeholder='Enter text' disabled />
         </Flex>
       </Flex>
     </PlaygroundLayout>
diff --git a/apps/www/src/components/playground/text-area-examples.tsx b/apps/www/src/components/playground/text-area-examples.tsx
index f8ec4f422..22ae13e78 100644
--- a/apps/www/src/components/playground/text-area-examples.tsx
+++ b/apps/www/src/components/playground/text-area-examples.tsx
@@ -1,24 +1,19 @@
 'use client';
 
-import { Flex, TextArea } from '@raystack/apsara';
+import { Field, Flex, TextArea } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function TextAreaExamples() {
   return (
     <PlaygroundLayout title='TextArea'>
       <Flex gap='large' wrap='wrap'>
-        <TextArea label='Basic TextArea' placeholder='Enter your text here' />
-        <TextArea
-          label='Basic TextArea'
-          placeholder='Enter your text here'
-          helperText='This is a helper text'
-        />
-        <TextArea
-          label='Error TextArea'
-          error={true}
-          helperText='This field has an error'
-          placeholder='Enter your text here'
-        />
+        <Field label='Basic TextArea' description='This is a description'>
+          <TextArea placeholder='Enter your text here' />
+        </Field>
+        <Field label='Error TextArea' error='This field has an error'>
+          <TextArea placeholder='Enter your text here' />
+        </Field>
+        <TextArea placeholder='Without Field wrapper' width='300px' />
       </Flex>
     </PlaygroundLayout>
   );
diff --git a/apps/www/src/content/docs/components/combobox/demo.ts b/apps/www/src/content/docs/components/combobox/demo.ts
index 3e92bd429..c0073dec6 100644
--- a/apps/www/src/content/docs/components/combobox/demo.ts
+++ b/apps/www/src/content/docs/components/combobox/demo.ts
@@ -105,23 +105,20 @@ export const iconDemo = {
   </Combobox>`
 };
 
-export const withLabelDemo = {
+export const withFieldDemo = {
   type: 'code',
   code: `
-  <Combobox>
-    <Combobox.Input
-      placeholder="Select a fruit"
-      label="Favorite Fruit"
-      helperText="Choose your favorite fruit"
-      width={240}
-    />
-    <Combobox.Content>
-      <Combobox.Item value="apple">Apple</Combobox.Item>
-      <Combobox.Item value="banana">Banana</Combobox.Item>
-      <Combobox.Item value="blueberry">Blueberry</Combobox.Item>
-      <Combobox.Item value="grapes">Grapes</Combobox.Item>
-    </Combobox.Content>
-  </Combobox>`
+  <Field label="Favorite Fruit" description="Choose your favorite fruit">
+    <Combobox>
+      <Combobox.Input placeholder="Select a fruit" width={240} />
+      <Combobox.Content>
+        <Combobox.Item value="apple">Apple</Combobox.Item>
+        <Combobox.Item value="banana">Banana</Combobox.Item>
+        <Combobox.Item value="blueberry">Blueberry</Combobox.Item>
+        <Combobox.Item value="grapes">Grapes</Combobox.Item>
+      </Combobox.Content>
+    </Combobox>
+  </Field>`
 };
 
 export const controlledDemo = {
diff --git a/apps/www/src/content/docs/components/combobox/index.mdx b/apps/www/src/content/docs/components/combobox/index.mdx
index 9185caa76..10a71ea4f 100644
--- a/apps/www/src/content/docs/components/combobox/index.mdx
+++ b/apps/www/src/content/docs/components/combobox/index.mdx
@@ -10,7 +10,7 @@ import {
   multipleDemo,
   groupDemo,
   iconDemo,
-  withLabelDemo,
+  withFieldDemo,
   controlledDemo,
 } from "./demo.ts";
 
@@ -91,11 +91,11 @@ You can pass the `leadingIcon` prop to `Combobox.Item` to display icons before i
 
 <Demo data={iconDemo} />
 
-### With Label and Helper Text
+### With Field
 
-The input supports `label`, `helperText`, and other `InputField` props.
+Wrap the Combobox with [Field](/docs/components/field) to add a label, description, and error handling.
 
-<Demo data={withLabelDemo} />
+<Demo data={withFieldDemo} />
 
 ### Groups and Separators
 
diff --git a/apps/www/src/content/docs/components/combobox/props.ts b/apps/www/src/content/docs/components/combobox/props.ts
index 9c7db505c..6afbf1c8b 100644
--- a/apps/www/src/content/docs/components/combobox/props.ts
+++ b/apps/www/src/content/docs/components/combobox/props.ts
@@ -53,35 +53,26 @@ export interface ComboboxRootProps {
 
 export interface ComboboxInputProps {
   /**
-   * Size variant of the input field
+   * Size variant of the input field.
    * @default "large"
    */
   size?: 'small' | 'large';
 
-  /** Text label above the input */
-  label?: string;
-
-  /** Helper text below the input */
-  helperText?: string;
-
-  /** Error message to display below the input */
-  error?: string;
-
-  /** Whether the input is disabled */
+  /** Whether the input is disabled. */
   disabled?: boolean;
 
-  /** Icon element to display at the start of input */
+  /** Icon element to display at the start of input. */
   leadingIcon?: React.ReactNode;
 
-  /** Shows "(Optional)" text next to label */
-  optional?: boolean;
-
-  /** Text or symbol to show before input value */
+  /** Text or symbol to show before input value. */
   prefix?: string;
 
   /** Placeholder text for the input field. */
   placeholder?: string;
 
+  /** Custom width for the input field. */
+  width?: string | number;
+
   /** Additional CSS class names. */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/field/demo.ts b/apps/www/src/content/docs/components/field/demo.ts
new file mode 100644
index 000000000..813903d09
--- /dev/null
+++ b/apps/www/src/content/docs/components/field/demo.ts
@@ -0,0 +1,128 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+export const getCode = (props: any) => {
+  const { label, description, error, required, ...rest } = props;
+  const fieldProps: Record<string, unknown> = {};
+  if (label) fieldProps.label = label;
+  if (description) fieldProps.description = description;
+  if (error) fieldProps.error = error;
+  if (required !== undefined) fieldProps.required = required;
+  return `<Field${getPropsString(fieldProps)}>
+  <InputField${getPropsString(rest)} placeholder="Enter text" />
+</Field>`;
+};
+
+export const playground = {
+  type: 'playground',
+  controls: {
+    label: { type: 'text', initialValue: 'Email' },
+    description: { type: 'text', initialValue: "We won't share your email" },
+    error: { type: 'text', initialValue: '' },
+    required: { type: 'checkbox', initialValue: true, defaultValue: true },
+    disabled: { type: 'checkbox', initialValue: false, defaultValue: false }
+  },
+  getCode
+};
+
+export const simpleDemo = {
+  type: 'code',
+  code: `<Field label="Name" description="Enter your full name">
+  <InputField placeholder="John Doe" />
+</Field>`
+};
+
+export const errorDemo = {
+  type: 'code',
+  code: `<Field label="Email" error="Please enter a valid email address">
+  <InputField 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" />
+</Field>`
+};
+
+export const requiredDemo = {
+  type: 'code',
+  code: `<Field label="Username" required>
+  <InputField 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" />
+</Field>`
+};
+
+export const subComponentDemo = {
+  type: 'code',
+  code: `<Field name="email">
+  <Field.Label>Email</Field.Label>
+  <Field.Control required type="email" placeholder="Enter email" />
+  <Field.Error match="valueMissing">Email is required</Field.Error>
+  <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
+  <Field.Description>We'll send a verification link</Field.Description>
+</Field>`
+};
+
+export const constraintErrorsDemo = {
+  type: 'code',
+  code: `<Field name="password">
+  <Field.Label>Password</Field.Label>
+  <Field.Control type="password" required minLength={8} placeholder="Create a password" />
+  <Field.Error match="valueMissing">Password is required</Field.Error>
+  <Field.Error match="tooShort">Must be at least 8 characters</Field.Error>
+  <Field.Description>Minimum 8 characters</Field.Description>
+</Field>`
+};
+
+export const customValidateDemo = {
+  type: 'code',
+  code: `<Field
+  name="slug"
+  validate={(value) => {
+    if (!value) return 'Slug is required';
+    if (!/^[a-z0-9-]+$/.test(String(value))) return 'Only lowercase letters, numbers, and hyphens';
+    return null;
+  }}
+>
+  <Field.Label>URL Slug</Field.Label>
+  <Field.Control required placeholder="my-page-slug" />
+  <Field.Error match="customError" />
+</Field>`
+};
+
+export const withInputFieldDemo = {
+  type: 'code',
+  code: `<Field label="Full Name" required description="As it appears on your ID">
+  <InputField placeholder="John Doe" />
+</Field>`
+};
+
+export const withTextAreaDemo = {
+  type: 'code',
+  code: `<Field label="Bio" required={false} description="Tell us about yourself">
+  <TextArea placeholder="Write something..." />
+</Field>`
+};
+
+export const withSelectDemo = {
+  type: 'code',
+  code: `<Field label="Country" required>
+  <Select>
+    <Select.Trigger />
+    <Select.Content>
+      <Select.Item value="us">United States</Select.Item>
+      <Select.Item value="uk">United Kingdom</Select.Item>
+      <Select.Item value="ca">Canada</Select.Item>
+    </Select.Content>
+  </Select>
+</Field>`
+};
diff --git a/apps/www/src/content/docs/components/field/index.mdx b/apps/www/src/content/docs/components/field/index.mdx
new file mode 100644
index 000000000..f9710d2e7
--- /dev/null
+++ b/apps/www/src/content/docs/components/field/index.mdx
@@ -0,0 +1,170 @@
+---
+title: Field
+description: Provides accessible labels, descriptions, and error messages for form controls.
+source: packages/raystack/components/field
+tag: new
+---
+
+import {
+  playground,
+  simpleDemo,
+  errorDemo,
+  descriptionDemo,
+  requiredDemo,
+  optionalDemo,
+  subComponentDemo,
+  constraintErrorsDemo,
+  customValidateDemo,
+  withInputFieldDemo,
+  withTextAreaDemo,
+  withSelectDemo,
+} from "./demo.ts";
+
+<Demo data={playground} />
+
+## Anatomy
+
+Field supports two APIs: a **simple props API** for common use cases and a **sub-component API** for constraint validation.
+
+### Simple API
+
+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";
+
+<Field label="Email" description="We won't share it" error={errors.email?.message}>
+  <InputField placeholder="Enter email" />
+</Field>
+```
+
+### Sub-component API
+
+Use sub-components for built-in constraint validation with `Field.Control` and `Field.Error match="..."`. This uses native HTML validation attributes and shows targeted error messages.
+
+```tsx
+import { Field } from "@raystack/apsara";
+
+<Field name="email">
+  <Field.Label>Email</Field.Label>
+  <Field.Control required type="email" placeholder="Enter email" />
+  <Field.Error match="valueMissing">Email is required</Field.Error>
+  <Field.Error match="typeMismatch">Enter a valid email address</Field.Error>
+  <Field.Description>We'll send a verification link</Field.Description>
+</Field>
+```
+
+## API Reference
+
+### Root
+
+Groups all parts of the field. Renders a `<div>` element.
+
+<auto-type-table path="./props.ts" name="FieldProps" />
+
+### Label
+
+An accessible label automatically associated with the field control. Renders a `<label>` element.
+
+<auto-type-table path="./props.ts" name="FieldLabelProps" />
+
+### Control
+
+A native input element for use with the sub-component API. Renders an `<input>` element. Supports standard HTML validation attributes: `required`, `type`, `pattern`, `minLength`, `maxLength`, `min`, `max`, `step`.
+
+<auto-type-table path="./props.ts" name="FieldControlProps" />
+
+### Error
+
+An error message displayed when validation fails. Renders a `<div>` element.
+
+The `match` prop controls when the error is shown:
+
+- **`match="valueMissing"`** — shown when a `required` field is empty
+- **`match="typeMismatch"`** — shown when `type="email"` or `type="url"` value is invalid
+- **`match="patternMismatch"`** — shown when value doesn't match the `pattern` regex
+- **`match="tooShort"` / `match="tooLong"`** — shown for `minLength` / `maxLength` violations
+- **`match="rangeUnderflow"` / `match="rangeOverflow"`** — shown for `min` / `max` violations
+- **`match="customError"`** — shown when the Field's `validate` prop returns an error
+
+<auto-type-table path="./props.ts" name="FieldErrorProps" />
+
+### Description
+
+A paragraph with additional information about the field. Renders a `<p>` element. Hidden when an error is present (in the simple API).
+
+<auto-type-table path="./props.ts" name="FieldDescriptionProps" />
+
+### Validity
+
+Provides field validity state to a render function. Use for custom validity-based rendering.
+
+## Examples
+
+### With InputField
+
+Use Field to add label, description, and error to an InputField.
+
+<Demo data={withInputFieldDemo} />
+
+### With TextArea
+
+Field works with TextArea the same way.
+
+<Demo data={withTextAreaDemo} />
+
+### With Select
+
+Base UI-based components like Select auto-connect with Field for accessibility.
+
+<Demo data={withSelectDemo} />
+
+### Error State
+
+Pass an error string to show the error message and set the field to invalid state. The description is hidden while an error is shown.
+
+<Demo data={errorDemo} />
+
+### Constraint Validation Errors
+
+Use `Field.Control` with native attributes and multiple `Field.Error` elements to show targeted messages for each validation constraint.
+
+<Demo data={constraintErrorsDemo} />
+
+### Custom Validation
+
+Use the `validate` prop to run custom logic. Return an error string to fail, or `null` to pass. The error renders via `Field.Error match="customError"`.
+
+<Demo data={customValidateDemo} />
+
+### Description
+
+Displays additional context below the control.
+
+<Demo data={descriptionDemo} />
+
+### Required Field
+
+Shows a required indicator next to the label.
+
+<Demo data={requiredDemo} />
+
+### Optional Field
+
+Set `required={false}` to show an "(optional)" indicator next to the label.
+
+<Demo data={optionalDemo} />
+
+### Sub-component API
+
+Use sub-components for built-in constraint validation with custom error matching.
+
+<Demo data={subComponentDemo} />
+
+## Accessibility
+
+- `Field.Label` automatically associates with the field control via `aria-labelledby`
+- `Field.Description` automatically associates via `aria-describedby`
+- `Field.Error` automatically associates error messages with the control
+- Data attributes (`data-invalid`, `data-dirty`, `data-touched`, `data-filled`, `data-focused`) propagate to all sub-components
+- When used inside a `Form`, the field participates in form-level validation
diff --git a/apps/www/src/content/docs/components/field/props.ts b/apps/www/src/content/docs/components/field/props.ts
new file mode 100644
index 000000000..1391c3d31
--- /dev/null
+++ b/apps/www/src/content/docs/components/field/props.ts
@@ -0,0 +1,78 @@
+export interface FieldProps {
+  /** Text or node to render as the field label. */
+  label?: React.ReactNode;
+
+  /** Description text displayed below the control. Hidden when error is present. */
+  description?: React.ReactNode;
+
+  /** Error message displayed below the control. Sets the field to invalid state. */
+  error?: React.ReactNode;
+
+  /**
+   * Whether the field is required. When false, shows an (optional) indicator next to the label.
+   * Also sets the required attribute on child form controls via context.
+   * @defaultValue true
+   */
+  required?: boolean;
+
+  /** Identifies the field during form submission. */
+  name?: string;
+
+  /** Custom validation function. Return an error string or null. */
+  validate?: (
+    value: unknown
+  ) => string | string[] | null | Promise<string | string[] | null>;
+
+  /**
+   * When to validate the field.
+   * @defaultValue "onSubmit"
+   */
+  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+
+  /**
+   * Whether the field is in an invalid state.
+   * @defaultValue false
+   */
+  invalid?: boolean;
+
+  /**
+   * Whether the field is disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface FieldLabelProps {
+  /**
+   * Whether the field is required. When false, shows an (optional) indicator next to the label.
+   * @defaultValue true
+   */
+  required?: boolean;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface FieldControlProps {
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface FieldErrorProps {
+  /**
+   * Match a specific ValidityState property (e.g., "valueMissing", "typeMismatch", "customError")
+   * or pass `true` to match any error.
+   */
+  match?: string | boolean;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
+
+export interface FieldDescriptionProps {
+  /** Additional CSS class names. */
+  className?: string;
+}
diff --git a/apps/www/src/content/docs/components/fieldset/demo.ts b/apps/www/src/content/docs/components/fieldset/demo.ts
new file mode 100644
index 000000000..82704882c
--- /dev/null
+++ b/apps/www/src/content/docs/components/fieldset/demo.ts
@@ -0,0 +1,73 @@
+'use client';
+
+export const playground = {
+  type: 'code',
+  code: `<Fieldset legend="Personal Information">
+  <Field label="First Name" required>
+    <InputField placeholder="John" />
+  </Field>
+  <Field label="Last Name" required>
+    <InputField placeholder="Doe" />
+  </Field>
+  <Field label="Email" required>
+    <InputField type="email" placeholder="john@example.com" />
+  </Field>
+</Fieldset>`
+};
+
+export const basicDemo = {
+  type: 'code',
+  code: `<Fieldset legend="Contact Details">
+  <Field label="Phone" required>
+    <InputField type="tel" placeholder="+1 (555) 000-0000" />
+  </Field>
+  <Field label="Address" required={false}>
+    <InputField placeholder="123 Main St" />
+  </Field>
+</Fieldset>`
+};
+
+export const subComponentDemo = {
+  type: 'code',
+  code: `<Fieldset>
+  <Fieldset.Legend>Account Settings</Fieldset.Legend>
+  <Field label="Username" required>
+    <InputField placeholder="Enter username" />
+  </Field>
+  <Field label="Password" required>
+    <InputField type="password" placeholder="Enter password" />
+  </Field>
+</Fieldset>`
+};
+
+export const disabledDemo = {
+  type: 'code',
+  code: `<Fieldset legend="Disabled Section" disabled>
+  <Field label="Read Only Field">
+    <InputField placeholder="Cannot edit" />
+  </Field>
+  <Field label="Another Field">
+    <InputField placeholder="Also disabled" />
+  </Field>
+</Fieldset>`
+};
+
+export const nestedDemo = {
+  type: 'code',
+  code: `<Form>
+  <Fieldset legend="Personal Info">
+    <Field label="Full Name" required>
+      <InputField placeholder="John Doe" />
+    </Field>
+  </Fieldset>
+  <Fieldset legend="Work Info">
+    <Field label="Company" required>
+      <InputField placeholder="Acme Inc." />
+    </Field>
+    <Field label="Role" required={false}>
+      <InputField placeholder="Software Engineer" />
+    </Field>
+  </Fieldset>
+  <Button type="submit">Save</Button>
+</Form>`
+};
diff --git a/apps/www/src/content/docs/components/fieldset/index.mdx b/apps/www/src/content/docs/components/fieldset/index.mdx
new file mode 100644
index 000000000..9601683d8
--- /dev/null
+++ b/apps/www/src/content/docs/components/fieldset/index.mdx
@@ -0,0 +1,94 @@
+---
+title: Fieldset
+description: Groups related form fields with an accessible legend.
+source: packages/raystack/components/fieldset
+tag: new
+---
+
+import {
+  playground,
+  basicDemo,
+  subComponentDemo,
+  disabledDemo,
+  nestedDemo,
+} from "./demo.ts";
+
+<Demo data={playground} />
+
+## Anatomy
+
+Fieldset supports a **simple props API** and a **sub-component API**.
+
+### Simple API
+
+```tsx
+import { Fieldset, Field, InputField } from "@raystack/apsara";
+
+<Fieldset legend="Personal Information">
+  <Field label="First Name">
+    <InputField placeholder="John" />
+  </Field>
+  <Field label="Last Name">
+    <InputField placeholder="Doe" />
+  </Field>
+</Fieldset>
+```
+
+### Sub-component API
+
+```tsx
+import { Fieldset, Field, InputField } from "@raystack/apsara";
+
+<Fieldset>
+  <Fieldset.Legend>Personal Information</Fieldset.Legend>
+  <Field label="First Name">
+    <InputField placeholder="John" />
+  </Field>
+</Fieldset>
+```
+
+## API Reference
+
+### Root
+
+Groups related fields with a shared legend. Renders a `<fieldset>` element.
+
+<auto-type-table path="./props.ts" name="FieldsetProps" />
+
+### Legend
+
+An accessible legend for the fieldset. Renders a `<div>` element with `role="presentation"`.
+
+<auto-type-table path="./props.ts" name="FieldsetLegendProps" />
+
+## Examples
+
+### Basic Fieldset
+
+A fieldset grouping related fields with a legend.
+
+<Demo data={basicDemo} />
+
+### Sub-component API
+
+Using `Fieldset.Legend` for custom legend styling.
+
+<Demo data={subComponentDemo} />
+
+### Disabled Fieldset
+
+All fields within a disabled fieldset are disabled.
+
+<Demo data={disabledDemo} />
+
+### Nested Fieldsets
+
+Fieldsets can be nested to create logical groupings.
+
+<Demo data={nestedDemo} />
+
+## Accessibility
+
+- Renders a native `<fieldset>` element for semantic grouping
+- `Fieldset.Legend` provides an accessible name for the group
+- The `disabled` prop propagates to all child form controls
diff --git a/apps/www/src/content/docs/components/fieldset/props.ts b/apps/www/src/content/docs/components/fieldset/props.ts
new file mode 100644
index 000000000..737731e65
--- /dev/null
+++ b/apps/www/src/content/docs/components/fieldset/props.ts
@@ -0,0 +1,18 @@
+export interface FieldsetProps {
+  /** Text to render as the fieldset legend. */
+  legend?: string;
+
+  /**
+   * Whether the fieldset and all its child controls are disabled.
+   * @defaultValue false
+   */
+  disabled?: boolean;
+
+  /** Additional CSS class names for the fieldset. */
+  className?: string;
+}
+
+export interface FieldsetLegendProps {
+  /** Additional CSS class names. */
+  className?: string;
+}
diff --git a/apps/www/src/content/docs/components/form/demo.ts b/apps/www/src/content/docs/components/form/demo.ts
new file mode 100644
index 000000000..a85d61339
--- /dev/null
+++ b/apps/www/src/content/docs/components/form/demo.ts
@@ -0,0 +1,232 @@
+'use client';
+
+export const playground = {
+  type: 'code',
+  code: `<Form onSubmit={(e) => { e.preventDefault(); alert('Submitted!'); }}>
+  <Field label="Email" required>
+    <InputField type="email" placeholder="Enter email" />
+  </Field>
+  <Field label="Message" required={false}>
+    <TextArea placeholder="Enter message" />
+  </Field>
+  <Button type="submit">Submit</Button>
+</Form>`
+};
+
+export const basicDemo = {
+  type: 'code',
+  code: `<Form onSubmit={(e) => { e.preventDefault(); alert('Submitted!'); }}>
+  <Field label="Name" required>
+    <InputField placeholder="Enter your name" />
+  </Field>
+  <Button type="submit">Submit</Button>
+</Form>`
+};
+
+export const withFieldsDemo = {
+  type: 'code',
+  code: `<Form onSubmit={(e) => { e.preventDefault(); }}>
+  <Field label="First Name" required>
+    <InputField placeholder="John" />
+  </Field>
+  <Field label="Last Name" required>
+    <InputField placeholder="Doe" />
+  </Field>
+  <Field label="Email" required description="We'll send a confirmation email">
+    <InputField type="email" placeholder="john@example.com" />
+  </Field>
+  <Field label="Bio" required={false}>
+    <TextArea placeholder="Tell us about yourself" />
+  </Field>
+  <Button type="submit">Create Account</Button>
+</Form>`
+};
+
+export const constraintValidationDemo = {
+  type: 'code',
+  code: `<Form onSubmit={(e) => { e.preventDefault(); alert('Valid!'); }}>
+  <Field name="email">
+    <Field.Label>Email</Field.Label>
+    <Field.Control type="email" required placeholder="Enter email" />
+    <Field.Error match="valueMissing">Email is required</Field.Error>
+    <Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
+  </Field>
+  <Field name="age">
+    <Field.Label>Age</Field.Label>
+    <Field.Control type="number" required min={18} max={120} placeholder="Your age" />
+    <Field.Error match="valueMissing">Age is required</Field.Error>
+    <Field.Error match="rangeUnderflow">Must be at least 18</Field.Error>
+    <Field.Error match="rangeOverflow">Must be 120 or less</Field.Error>
+  </Field>
+  <Field name="website">
+    <Field.Label>Website</Field.Label>
+    <Field.Control type="url" placeholder="https://example.com" />
+    <Field.Error match="typeMismatch">Enter a valid URL</Field.Error>
+  </Field>
+  <Button type="submit">Submit</Button>
+</Form>`
+};
+
+export const customValidationDemo = {
+  type: 'code',
+  code: `function CustomValidationExample() {
+  return (
+    <Form onSubmit={(e) => { e.preventDefault(); alert('Valid!'); }}>
+      <Field
+        name="username"
+        validate={(value) => {
+          if (!value) return 'Username is required';
+          if (String(value).length < 3) return 'Must be at least 3 characters';
+          if (!/^[a-z0-9_]+$/.test(String(value))) return 'Only lowercase letters, numbers, and underscores';
+          return null;
+        }}
+      >
+        <Field.Label>Username</Field.Label>
+        <Field.Control required placeholder="Choose a username" />
+        <Field.Error match="customError" />
+        <Field.Description>Lowercase letters, numbers, and underscores only</Field.Description>
+      </Field>
+      <Button type="submit">Check</Button>
+    </Form>
+  );
+}`
+};
+
+export const serverErrorsDemo = {
+  type: 'code',
+  code: `function ServerErrorExample() {
+  const [errors, setErrors] = useState({});
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    // Simulate server validation
+    setErrors({ email: 'This email is already taken' });
+  }
+
+  return (
+    <Form onSubmit={handleSubmit} errors={errors}>
+      <Field name="email" label="Email" required>
+        <InputField type="email" placeholder="Enter email" />
+      </Field>
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}`
+};
+
+export const propsApiErrorDemo = {
+  type: 'code',
+  code: `function PropsApiErrorExample() {
+  const [errors, setErrors] = useState({});
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    const fd = new FormData(e.currentTarget);
+    const errs = {};
+    if (!fd.get('name')) errs.name = 'Name is required';
+    if (!fd.get('email')) errs.email = 'Email is required';
+    setErrors(errs);
+  }
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Field label="Name" required error={errors.name}>
+        <InputField name="name" placeholder="Enter name" />
+      </Field>
+      <Field label="Email" required error={errors.email}>
+        <InputField name="email" type="email" placeholder="Enter email" />
+      </Field>
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}`
+};
+
+export const validationModesDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'onSubmit',
+      code: `<Form validationMode="onSubmit">
+  <Field name="email">
+    <Field.Label>Email</Field.Label>
+    <Field.Control type="email" required placeholder="Validated on submit" />
+    <Field.Error match="valueMissing">Email is required</Field.Error>
+    <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
+  </Field>
+  <Button type="submit">Submit</Button>
+</Form>`
+    },
+    {
+      name: 'onBlur',
+      code: `<Form validationMode="onBlur">
+  <Field name="email">
+    <Field.Label>Email</Field.Label>
+    <Field.Control type="email" required placeholder="Validated on blur" />
+    <Field.Error match="valueMissing">Email is required</Field.Error>
+  </Field>
+</Form>`
+    },
+    {
+      name: 'onChange',
+      code: `<Form validationMode="onChange">
+  <Field name="email">
+    <Field.Label>Email</Field.Label>
+    <Field.Control type="email" required placeholder="Validated on change" />
+    <Field.Error match="typeMismatch">Enter a valid email</Field.Error>
+  </Field>
+</Form>`
+    }
+  ]
+};
+
+export const rhfDemo = {
+  type: 'code',
+  code: `function RHFExample() {
+  const { register, control, handleSubmit, formState: { errors } } = useForm({
+    defaultValues: { name: '', email: '', role: '', notifications: true }
+  });
+
+  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" />
+      </Field>
+
+      <Field label="Email" required error={errors.email?.message}>
+        <InputField {...register('email', { required: 'Email is required' })} placeholder="Email" />
+      </Field>
+
+      <Field label="Role" required error={errors.role?.message}>
+        <Controller
+          name="role"
+          control={control}
+          rules={{ required: 'Please select a role' }}
+          render={({ field }) => (
+            <Select value={field.value} onValueChange={field.onChange}>
+              <Select.Trigger><Select.Value placeholder="Select role" /></Select.Trigger>
+              <Select.Content>
+                <Select.Item value="dev">Developer</Select.Item>
+                <Select.Item value="design">Designer</Select.Item>
+              </Select.Content>
+            </Select>
+          )}
+        />
+      </Field>
+
+      {/* Switch, Checkbox must always be inside a Field when inside a Form */}
+      <Field label="Notifications">
+        <Controller
+          name="notifications"
+          control={control}
+          render={({ field }) => (
+            <Switch checked={field.value} onCheckedChange={field.onChange} />
+          )}
+        />
+      </Field>
+
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}`
+};
diff --git a/apps/www/src/content/docs/components/form/index.mdx b/apps/www/src/content/docs/components/form/index.mdx
new file mode 100644
index 000000000..54f9226e5
--- /dev/null
+++ b/apps/www/src/content/docs/components/form/index.mdx
@@ -0,0 +1,136 @@
+---
+title: Form
+description: A native form element with consolidated error handling and validation.
+source: packages/raystack/components/form
+tag: new
+---
+
+import {
+  playground,
+  basicDemo,
+  withFieldsDemo,
+  constraintValidationDemo,
+  customValidationDemo,
+  serverErrorsDemo,
+  propsApiErrorDemo,
+  validationModesDemo,
+  rhfDemo,
+} from "./demo.ts";
+
+<Demo data={playground} />
+
+## Anatomy
+
+Import and assemble the component:
+
+```tsx
+import { Form, Field, InputField, Button } from "@raystack/apsara";
+
+<Form onSubmit={handleSubmit}>
+  <Field label="Email">
+    <InputField placeholder="Enter email" />
+  </Field>
+  <Button type="submit">Submit</Button>
+</Form>
+```
+
+## API Reference
+
+<auto-type-table path="./props.ts" name="FormProps" />
+
+## Error Handling
+
+Form supports two approaches to displaying errors, depending on how you build your form.
+
+### Props API (Simple)
+
+Pass error strings directly to the Field `error` prop. This works well with custom validation logic or external form libraries like React Hook Form.
+
+<Demo data={propsApiErrorDemo} />
+
+### Sub-component API (Constraint Validation)
+
+Use `Field.Control` with native HTML validation attributes and `Field.Error` with `match` to show specific messages for each constraint. The Form handles validation automatically on submit.
+
+Available `match` values correspond to the browser [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) properties:
+
+| `match` value | Triggered by |
+|---|---|
+| `"valueMissing"` | `required` attribute |
+| `"typeMismatch"` | `type="email"`, `type="url"` |
+| `"patternMismatch"` | `pattern` attribute |
+| `"tooShort"` | `minLength` attribute |
+| `"tooLong"` | `maxLength` attribute |
+| `"rangeUnderflow"` | `min` attribute |
+| `"rangeOverflow"` | `max` attribute |
+| `"stepMismatch"` | `step` attribute |
+| `"customError"` | `validate` prop on Field |
+
+<Demo data={constraintValidationDemo} />
+
+### Custom Validation
+
+Use the `validate` prop on Field to run custom logic. Return an error string to fail, or `null` to pass. The error renders via `Field.Error match="customError"`.
+
+<Demo data={customValidationDemo} />
+
+### Server-Side Errors
+
+Pass server validation errors to the Form `errors` prop. Keys must match the `name` prop on each Field. Errors clear automatically when the user modifies the corresponding field.
+
+<Demo data={serverErrorsDemo} />
+
+## Examples
+
+### Basic Form
+
+A simple form with submit handling.
+
+<Demo data={basicDemo} />
+
+### With Fields
+
+Form with multiple fields using the Field component.
+
+<Demo data={withFieldsDemo} />
+
+### Validation Modes
+
+Control when validation occurs: `onSubmit` (default), `onBlur`, or `onChange`.
+
+<Demo data={validationModesDemo} />
+
+### React Hook Form
+
+Use `register()` for text inputs and `Controller` for custom controls. Pass `errors.field?.message` to Field's `error` prop.
+
+<Demo data={rhfDemo} />
+
+## Important Notes
+
+### Wrap interactive controls in Field
+
+Components like **Switch** and **Checkbox** internally register with the Form validation system. They **must** be placed inside a `<Field>` when used within a `<Form>`, even if you don't need a label or error message. Without a Field wrapper, they use a shared default context that interferes with form submission.
+
+```tsx
+{/* Correct */}
+<Field label="Notifications">
+  <Switch checked={value} onCheckedChange={onChange} />
+</Field>
+
+{/* Incorrect - breaks Form validation */}
+<Switch checked={value} onCheckedChange={onChange} />
+```
+
+### Constraint validation vs. external validation
+
+Form provides built-in constraint validation using native HTML attributes (`required`, `type`, `pattern`, etc.) with `Field.Control` and `Field.Error match="..."`. This is the simplest approach when you don't need a form library.
+
+When using React Hook Form or similar, use the **props API** instead: pass `error={errors.field?.message}` to Field and let the library handle validation. Both approaches work with `<Form>`.
+
+## Accessibility
+
+- Renders a native `<form>` element with `noValidate` (validation is handled in JavaScript, not by browser tooltips)
+- Works with native constraint validation attributes (`required`, `pattern`, `minLength`, etc.)
+- Compatible with React Hook Form, TanStack Form, and other form libraries
+- Error messages are automatically associated with controls via `aria-describedby`
diff --git a/apps/www/src/content/docs/components/form/props.ts b/apps/www/src/content/docs/components/form/props.ts
new file mode 100644
index 000000000..d576f8a35
--- /dev/null
+++ b/apps/www/src/content/docs/components/form/props.ts
@@ -0,0 +1,37 @@
+export interface FormProps {
+  /**
+   * Determines when the form should be validated.
+   * Field-level `validationMode` takes precedence over this.
+   * @defaultValue "onSubmit"
+   */
+  validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
+
+  /**
+   * Validation errors returned externally, typically from a server response.
+   * Keys correspond to field `name` attributes; values are error message(s).
+   */
+  errors?: Record<string, string | string[]>;
+
+  /**
+   * Event handler called when the form is submitted.
+   * `preventDefault()` is called on the native submit event when used.
+   */
+  onFormSubmit?: (
+    formValues: Record<string, any>,
+    eventDetails: object
+  ) => void;
+
+  /** Native form submit handler. Use this for React Hook Form integration. */
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+
+  /**
+   * A ref to imperative actions.
+   * Provides `validate()` which validates all fields, or a single field when a name is passed.
+   */
+  actionsRef?: React.RefObject<{
+    validate: (fieldName?: string) => void;
+  } | null>;
+
+  /** Additional CSS class names. */
+  className?: string;
+}
diff --git a/apps/www/src/content/docs/components/input-field/demo.ts b/apps/www/src/content/docs/components/input-field/demo.ts
index 53bf917d3..7e7916b90 100644
--- a/apps/www/src/content/docs/components/input-field/demo.ts
+++ b/apps/www/src/content/docs/components/input-field/demo.ts
@@ -3,19 +3,15 @@
 import { getPropsString } from '@/lib/utils';
 
 export const getCode = (props: any) => {
-  return `<InputField${getPropsString(props)}/>`;
+  return `<InputField${getPropsString(props)} placeholder="Enter text" />`;
 };
 
 export const playground = {
   type: 'playground',
   controls: {
-    label: { type: 'text', initialValue: 'Your Name' },
-    helperText: { type: 'text', initialValue: 'Enter your full name' },
-    error: { type: 'text', initialValue: '' },
     disabled: { type: 'checkbox', initialValue: false, defaultValue: false },
     leadingIcon: { type: 'icon', initialValue: '' },
     trailingIcon: { type: 'icon', initialValue: '' },
-    optional: { type: 'checkbox', defaultValue: false },
     prefix: { type: 'text', initialValue: '' },
     suffix: { type: 'text', initialValue: '' },
     width: { type: 'text', initialValue: '560px' },
@@ -30,105 +26,78 @@ export const playground = {
 
 export const basicDemo = {
   type: 'code',
-  code: `
-  <InputField
-  label="Default"
-  placeholder="Enter text"
-  width="560px"
-/>`
+  code: `<InputField placeholder="Enter text" width="560px" />`
 };
-export const helperTextDemo = {
-  type: 'code',
-  code: `
-  <InputField
-  label="With label"
-  placeholder="Enter text"
-  helperText="This is a helper text"
-  width="560px"
-/>`
-};
-export const errorDemo = {
+
+export const withFieldDemo = {
   type: 'code',
-  code: `
- <InputField
-  label="With Error"
-  placeholder="Enter text"
-  error="This field is required"
-  width="560px"
-/>`
+  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" />
+  </Field>
+  <Field label="Name" error="This field is required">
+    <InputField placeholder="Enter name" />
+  </Field>
+  <Field label="Phone" required={false}>
+    <InputField type="tel" placeholder="Enter phone" />
+  </Field>
+</Flex>`
 };
+
 export const prefixDemo = {
   type: 'code',
-  code: `
- <InputField
-  label="With Prefix/Suffix"
+  code: `<InputField
   placeholder="0.00"
   prefix="$"
   suffix="USD"
   width="560px"
 />`
 };
+
 export const iconDemo = {
   type: 'code',
-  code: `
- <InputField
-  label="With Icons"
+  code: `<InputField
   placeholder="Enter text"
   leadingIcon={<Home size={16}/>}
-  trailingIcon={<Info  size={16}/>}
-  width="560px"
-/>`
-};
-export const optionalDemo = {
-  type: 'code',
-  code: `
- <InputField
-  label="Optional Field"
-  placeholder="Enter text"
-  optional
+  trailingIcon={<Info size={16}/>}
   width="560px"
 />`
 };
+
 export const disabledDemo = {
   type: 'code',
-  code: `
-<InputField
-  label="Disabled"
+  code: `<InputField
   placeholder="Enter text"
   disabled
   width="560px"
 />`
 };
+
 export const widthDemo = {
   type: 'code',
-  code: `
-<InputField
-  label="Custom Width"
+  code: `<InputField
   placeholder="Enter text"
   width="300px"
 />`
 };
+
 export const sizeDemo = {
   type: 'code',
-  code: `
-<Flex direction="column" gap="medium">
+  code: `<Flex direction="column" gap="medium">
   <InputField
-    label="Large Input (Default)"
-    placeholder="32px height"
+    placeholder="32px height (default)"
   />
   <InputField
-    label="Small Input"
     placeholder="24px height"
     size="small"
   />
 </Flex>`
 };
+
 export const sizeChipDemo = {
   type: 'code',
-  code: `
-<Flex direction="column" gap="medium">
+  code: `<Flex direction="column" gap="medium">
   <InputField
-    label="Large Input with Chips"
     placeholder="Type and press Enter..."
     chips={[
       { label: "A", onRemove: () => console.log("Remove A") },
@@ -136,7 +105,6 @@ export const sizeChipDemo = {
     ]}
   />
   <InputField
-    label="Small Input with Chips"
     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-field/index.mdx
index 2992449aa..ade8b5f7d 100644
--- a/apps/www/src/content/docs/components/input-field/index.mdx
+++ b/apps/www/src/content/docs/components/input-field/index.mdx
@@ -1,21 +1,19 @@
 ---
 title: Input Field
-description: A text input component with support for labels, helper text, and various states.
+description: A text input component with support for icons, prefix/suffix, chips, and size variants.
 source: packages/raystack/components/input-field
 ---
 
 import {
   playground,
   basicDemo,
-  helperTextDemo,
-  errorDemo,
   prefixDemo,
   iconDemo,
-  optionalDemo,
   disabledDemo,
   widthDemo,
   sizeDemo,
   sizeChipDemo,
+  withFieldDemo,
 } from "./demo.ts";
 
 <Demo data={playground} />
@@ -27,12 +25,22 @@ Import and assemble the component:
 ```tsx
 import { InputField } from "@raystack/apsara";
 
-<InputField />
+<InputField placeholder="Enter text" />
+```
+
+For labels, description, and error messages, wrap with [Field](/docs/components/field):
+
+```tsx
+import { Field, InputField } from "@raystack/apsara";
+
+<Field label="Email" description="We won't share it" error={errors.email?.message}>
+  <InputField placeholder="Enter email" />
+</Field>
 ```
 
 ## API Reference
 
-Renders a text input with label, helper text, and error support.
+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" />
 
@@ -40,21 +48,15 @@ Renders a text input with label, helper text, and error support.
 
 ### Basic Input
 
-A basic input field with a label and placeholder.
+A basic input field with a placeholder.
 
 <Demo data={basicDemo} />
 
-### With Helper Text
-
-Input field with additional helper text below.
+### With Field
 
-<Demo data={helperTextDemo} />
+Use Field to add label, description, and error handling.
 
-### With Error
-
-Input field displaying an error state with error message.
-
-<Demo data={errorDemo} />
+<Demo data={withFieldDemo} />
 
 ### With Prefix/Suffix
 
@@ -68,12 +70,6 @@ Input field with leading and trailing icons.
 
 <Demo data={iconDemo} />
 
-### Optional Field
-
-Input field marked as optional.
-
-<Demo data={optionalDemo} />
-
 ### Disabled State
 
 Input field in disabled state.
@@ -100,7 +96,6 @@ Input field that can display and manage chips/tags.
 
 ## Accessibility
 
-- Associates label with input via `htmlFor` and `id` attributes
-- Error messages are linked with `aria-describedby`
+- Use with [Field](/docs/components/field) for automatic label association and error linking
 - Required state is communicated via `aria-required`
-- Invalid state is communicated via `aria-invalid`
+- Supports all native `<input>` attributes
diff --git a/apps/www/src/content/docs/components/input-field/props.ts b/apps/www/src/content/docs/components/input-field/props.ts
index 0d0d2c961..e383ab565 100644
--- a/apps/www/src/content/docs/components/input-field/props.ts
+++ b/apps/www/src/content/docs/components/input-field/props.ts
@@ -1,46 +1,45 @@
 export interface InputFieldProps {
   /**
-   * Size variant of the input field
-   * @default "large"
+   * Size variant of the input field.
+   * @defaultValue "large"
    */
   size?: 'small' | 'large';
 
-  /** Text label above the input */
-  label?: string;
-
-  /** Helper text below the input */
-  helperText?: string;
-
-  /** Error message to display below the input */
-  error?: string;
-
-  /** Whether the input is disabled */
+  /** Whether the input is disabled. */
   disabled?: boolean;
 
-  /** Icon element to display at the start of input */
+  /** Icon element to display at the start of input. */
   leadingIcon?: React.ReactNode;
 
-  /** Icon element to display at the end of input */
+  /** Icon element to display at the end of input. */
   trailingIcon?: React.ReactNode;
 
-  /** Shows "(Optional)" text next to label */
-  optional?: boolean;
-
-  /** Text or symbol to show before input value */
+  /** Text or symbol to show before input value. */
   prefix?: string;
 
-  /** Text or symbol to show after input value */
+  /** Text or symbol to show after input value. */
   suffix?: string;
 
-  /** Custom width for the input field */
+  /** Custom width for the input field. */
   width?: string | number;
 
   /**
-   * Array of chip objects with label and onRemove function
-   * Each chip should have a `label` and an `onRemove` callback.
+   * Array of chip objects with label and optional onRemove function.
+   */
+  chips?: { label: string; onRemove?: () => void }[];
+
+  /**
+   * Maximum number of chips to show before displaying overflow count.
+   * @defaultValue 2
+   */
+  maxChipsVisible?: number;
+
+  /**
+   * Visual variant of the input.
+   * @defaultValue "default"
    */
-  chips?: { label: string; onRemove: () => void }[];
+  variant?: 'default' | 'borderless';
 
-  /** Additional CSS class names */
+  /** Additional CSS class names. */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/textarea/demo.ts b/apps/www/src/content/docs/components/textarea/demo.ts
index 7eb14c2cf..9d0a9f683 100644
--- a/apps/www/src/content/docs/components/textarea/demo.ts
+++ b/apps/www/src/content/docs/components/textarea/demo.ts
@@ -3,31 +3,19 @@
 import { getPropsString } from '@/lib/utils';
 
 export const getCode = (props: any) => {
-  return `<TextArea${getPropsString(props)}/>`;
+  return `<TextArea${getPropsString(props)} placeholder="Enter text" />`;
 };
 
 export const playground = {
   type: 'playground',
   controls: {
-    label: {
-      type: 'text',
-      initialValue: 'Textarea'
-    },
-    isOptional: {
-      type: 'checkbox',
-      defaultValue: false
-    },
-    helperText: {
-      type: 'text',
-      default: 'Helper text'
-    },
-    error: {
+    disabled: {
       type: 'checkbox',
       defaultValue: false
     },
     width: {
       type: 'text',
-      defaultValue: '200px'
+      defaultValue: '400px'
     }
   },
   getCode
@@ -35,47 +23,41 @@ export const playground = {
 
 export const basicDemo = {
   type: 'code',
-  code: `
-  <TextArea
-  label="Basic TextArea"
-  placeholder="Enter your text here"
-/>`
+  code: `<TextArea placeholder="Enter your text here" />`
+};
+
+export const withFieldDemo = {
+  type: 'code',
+  code: `<Flex direction="column" gap="medium" style={{ width: 400 }}>
+  <Field label="Bio" required={false} description="Tell us about yourself">
+    <TextArea placeholder="Write something..." />
+  </Field>
+  <Field label="Comments" required error="This field is required">
+    <TextArea placeholder="Enter comments" />
+  </Field>
+</Flex>`
 };
 
 export const controlledDemo = {
   type: 'code',
-  code: `
-  function ControlledExample() {
+  code: `function ControlledExample() {
   const [value, setValue] = React.useState('');
-  
+
   return (
-    <TextArea
-      label="Controlled TextArea"
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      helperText={\`Current value: \${value.length} characters\`}
-      placeholder="Type something..."
-    />
+    <Field label="Controlled TextArea" description={\`\${value.length} characters\`}>
+      <TextArea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="Type something..."
+      />
+    </Field>
   );
 }`
 };
 
-export const errorDemo = {
-  type: 'code',
-  code: `
- <TextArea
-  label="Error TextArea"
-  error={true}
-  helperText="This field has an error"
-  placeholder="Enter your text here"
-/>`
-};
-
 export const widthDemo = {
   type: 'code',
-  code: `
-<TextArea
-  label="Custom Width"
+  code: `<TextArea
   width="300px"
   placeholder="This textarea is 300px wide"
 />`
diff --git a/apps/www/src/content/docs/components/textarea/index.mdx b/apps/www/src/content/docs/components/textarea/index.mdx
index 1688c529f..f5d0ef6cc 100644
--- a/apps/www/src/content/docs/components/textarea/index.mdx
+++ b/apps/www/src/content/docs/components/textarea/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: TextArea
-description: A multi-line text input field with support for labels and helper text.
-source: packages/raystack/components/textarea
+description: A multi-line text input field.
+source: packages/raystack/components/text-area
 ---
 
 import {
@@ -9,7 +9,7 @@ import {
   basicDemo,
   controlledDemo,
   widthDemo,
-  errorDemo,
+  withFieldDemo,
 } from "./demo.ts";
 
 <Demo data={playground} />
@@ -21,12 +21,22 @@ Import and assemble the component:
 ```tsx
 import { TextArea } from "@raystack/apsara";
 
-<TextArea />
+<TextArea placeholder="Enter text" />
+```
+
+For labels, description, and error messages, wrap with [Field](/docs/components/field):
+
+```tsx
+import { Field, TextArea } from "@raystack/apsara";
+
+<Field label="Bio" description="Tell us about yourself" error={errors.bio?.message}>
+  <TextArea placeholder="Write something..." />
+</Field>
 ```
 
 ## API Reference
 
-Renders a multi-line text input.
+Renders a multi-line text input. For label, description, and error support, use with [Field](/docs/components/field).
 
 <auto-type-table path="./props.ts" name="TextAreaProps" />
 
@@ -34,15 +44,15 @@ Renders a multi-line text input.
 
 ### Basic Usage
 
-The most basic usage of TextArea with just a label and placeholder.
+A basic TextArea with a placeholder.
 
 <Demo data={basicDemo} />
 
-### Error State
+### With Field
 
-TextArea in error state with custom styling.
+Use Field to add label, description, and error handling.
 
-<Demo data={errorDemo} />
+<Demo data={withFieldDemo} />
 
 ### Controlled Usage
 
@@ -58,7 +68,6 @@ TextArea with custom width specification.
 
 ## Accessibility
 
-- Associates label with textarea via `htmlFor` and `id` attributes
-- Error messages are linked with `aria-describedby`
+- Use with [Field](/docs/components/field) for automatic label association and error linking
 - Required state is communicated via `aria-required`
 - Invalid state is communicated via `aria-invalid`
diff --git a/apps/www/src/content/docs/components/textarea/props.ts b/apps/www/src/content/docs/components/textarea/props.ts
index 5bcf64c66..11e91a04a 100644
--- a/apps/www/src/content/docs/components/textarea/props.ts
+++ b/apps/www/src/content/docs/components/textarea/props.ts
@@ -1,43 +1,22 @@
 export interface TextAreaProps {
-  /**
-   * Text label displayed above the textarea.
-   */
-  label: string;
-
-  /**
-   * Boolean indicating if the field is optional.
-   * @default false
-   */
-  isOptional?: boolean;
-
-  /**
-   * Helper text displayed below the textarea.
-   */
-  helperText?: string;
+  /** Whether the textarea is disabled. */
+  disabled?: boolean;
 
-  /**
-   * Boolean to show error state.
-   */
-  error?: boolean;
+  /** Placeholder text. */
+  placeholder?: string;
 
   /**
-   * Custom width for the textarea container.
-   * @default "200px"
+   * Custom width for the textarea.
+   * @defaultValue "100%"
    */
   width?: string | number;
 
-  /**
-   * Controlled value for the textarea.
-   */
+  /** Controlled value for the textarea. */
   value?: string;
 
-  /**
-   * Change handler for controlled usage.
-   */
-  onChange?: (value: string) => void;
+  /** Change handler for controlled usage. */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
 
-  /**
-   * Additional CSS class names.
-   */
+  /** Additional CSS class names. */
   className?: string;
 }
diff --git a/docs/V1-migration.md b/docs/V1-migration.md
index fc012f43f..38ef61c69 100644
--- a/docs/V1-migration.md
+++ b/docs/V1-migration.md
@@ -14,6 +14,7 @@ This guide covers all breaking changes when upgrading from the last stable Radix
     - [Callback Signatures](#callback-signatures)
     - [Data Attributes](#data-attributes)
     - [CSS Variables](#css-variables)
+    - [Form Field Pattern](#form-field-pattern)
   - [Component Migration](#component-migration)
     - [Accordion](#accordion)
       - [New Props](#new-props)
@@ -31,6 +32,7 @@ This guide covers all breaking changes when upgrading from the last stable Radix
       - [New Features](#new-features-2)
     - [Flex](#flex)
     - [Grid](#grid)
+    - [InputField](#inputfield)
     - [Popover](#popover)
       - [New Features](#new-features-3)
     - [Radio](#radio)
@@ -47,6 +49,7 @@ This guide covers all breaking changes when upgrading from the last stable Radix
     - [Switch](#switch)
     - [Tabs](#tabs)
       - [New Features](#new-features-8)
+    - [TextArea](#textarea)
     - [Toast](#toast)
       - [New Features](#new-features-9)
     - [Tooltip](#tooltip)
@@ -197,6 +200,32 @@ If you reference these CSS variables in custom styles:
 .accordion-panel { height: var(--accordion-panel-height); }
 ```
 
+### 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`.
+
+**Before:** Each control rendered its own label, helper text, and error.
+
+```tsx
+<InputField label="Email" helperText="We won't share it" error="Required" optional />
+<TextArea label="Bio" helperText="Tell us about yourself" />
+```
+
+**After:** Wrap controls with `<Field>` for labels, descriptions, and errors. Controls are now pure inputs.
+
+```tsx
+<Field label="Email" description="We won't share it" error="Required" required={false}>
+  <InputField />
+</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.
+
+See [InputField](#inputfield) and [TextArea](#textarea) for full migration details.
+
 ---
 
 ## Component Migration
@@ -738,6 +767,86 @@ Type changed to `useRender.ComponentProps<'div'>` -- may cause TypeScript errors
 
 ---
 
+### 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.
+
+1. **`label` prop removed** — use `<Field label="...">`:
+
+```tsx
+// Before
+<InputField label="Email" placeholder="Enter email" />
+
+// After
+<Field label="Email">
+  <InputField placeholder="Enter email" />
+</Field>
+```
+
+2. **`helperText` prop removed** — use `<Field description="...">`:
+
+```tsx
+// Before
+<InputField label="Password" helperText="Must be at least 8 characters" placeholder="Enter password" />
+
+// After
+<Field label="Password" description="Must be at least 8 characters">
+  <InputField placeholder="Enter password" />
+</Field>
+```
+
+3. **`error` prop removed** — use `<Field error="...">`:
+
+```tsx
+// Before
+<InputField label="Email" error="Please enter a valid email" placeholder="Enter email" />
+
+// After
+<Field label="Email" error="Please enter a valid email">
+  <InputField placeholder="Enter email" />
+</Field>
+```
+
+4. **`optional` prop removed** — use `<Field required={false}>`:
+
+```tsx
+// Before
+<InputField label="Phone" optional placeholder="Enter phone" />
+
+// After
+<Field label="Phone" required={false}>
+  <InputField 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.
+
+**Full before/after example:**
+
+```tsx
+// Before
+<InputField
+  label="Email"
+  helperText="We won't share your email"
+  error={errors.email}
+  optional
+  infoTooltip="Used for account recovery"
+  placeholder="Enter email"
+  leadingIcon={<MailIcon size={16} />}
+/>
+
+// After
+<Field label="Email" description="We won't share your email" error={errors.email} required={false}>
+  <InputField 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.
+
+---
+
 ### Popover
 
 1. **`asChild` removed from Trigger** -- use `render` prop or pass children directly:
@@ -1152,6 +1261,84 @@ Key changes:
 
 ---
 
+### TextArea
+
+**Label, helper text, error, and optional indicator moved to `Field` wrapper.** TextArea is now a pure textarea control — wrap it with the new `Field` component for labels, descriptions, and error messages.
+
+1. **`label` prop removed** — use `<Field label="...">`:
+
+```tsx
+// Before
+<TextArea label="Bio" placeholder="Write something..." />
+
+// After
+<Field label="Bio">
+  <TextArea placeholder="Write something..." />
+</Field>
+```
+
+2. **`helperText` prop removed** — use `<Field description="...">`:
+
+```tsx
+// Before
+<TextArea label="Bio" helperText="Tell us about yourself" placeholder="Write something..." />
+
+// After
+<Field label="Bio" description="Tell us about yourself">
+  <TextArea placeholder="Write something..." />
+</Field>
+```
+
+3. **`error` prop changed** — was a `boolean` on TextArea, now a `string` message on Field:
+
+```tsx
+// Before
+<TextArea label="Bio" error helperText="This field is required" />
+
+// After
+<Field label="Bio" error="This field is required">
+  <TextArea />
+</Field>
+```
+
+4. **`required` now driven by Field context.** The old TextArea had `required` which also controlled the optional indicator. Now `required` defaults to `true` on Field and is inherited via context:
+
+```tsx
+// Before — required=false showed "(optional)" indicator
+<TextArea label="Bio" required={false} placeholder="Write something..." />
+
+// After
+<Field label="Bio" required={false}>
+  <TextArea placeholder="Write something..." />
+</Field>
+```
+
+5. **`infoTooltip` prop removed** — no direct replacement. Compose manually if needed.
+
+**Full before/after example:**
+
+```tsx
+// Before
+<TextArea
+  label="Bio"
+  helperText="Tell us about yourself"
+  error={hasError}
+  required={false}
+  infoTooltip="This will appear on your profile"
+  placeholder="Write something..."
+  width="400px"
+/>
+
+// After
+<Field label="Bio" description="Tell us about yourself" error={hasError ? "This field is required" : undefined} required={false}>
+  <TextArea placeholder="Write something..." width="400px" />
+</Field>
+```
+
+Unchanged props: `disabled`, `placeholder`, `width`, `value`, `onChange`, and all native `<textarea>` attributes.
+
+---
+
 ### Toast
 
 **Exports renamed: `ToastContainer`/`toast` -> `Toast`/`toastManager`**
@@ -1357,6 +1544,9 @@ These are purely additive -- no migration needed.
 | **Collapsible** | Trigger, Panel |
 | **ContextMenu** | Trigger, Content, Item, Group, Label, Separator, Submenu, SubmenuTrigger, SubmenuContent |
 | **Drawer** | Trigger, Content, Header, Title, Description, Body, Footer, Close, createHandle |
+| **Field** | Label, Control, Error, Description, Validity. Wraps form controls with accessible labels, descriptions, and error messages. Supports simple props API (`label`, `description`, `error`) and sub-component API for constraint validation. |
+| **Fieldset** | Legend. Groups related form fields with an accessible legend. |
+| **Form** | Native form element with consolidated error handling, constraint validation, custom validation, and server-side error support. |
 | **Menu** | Trigger, Content, Item, Group, Label, Separator, Submenu, SubmenuTrigger, SubmenuContent, createHandle |
 | **Menubar** | (compose with Menu children) |
 | **Meter** | Label, Value, Track (linear + circular variants) |
@@ -1395,6 +1585,9 @@ These are purely additive -- no migration needed.
 - [ ] Remove `Select.Viewport` wrapper
 - [ ] Rewrite all Tooltip usages to compound component pattern
 - [ ] Update Accordion: `type` -> `multiple`, remove `collapsible`, `forceMount` -> `keepMounted`
+- [ ] Wrap InputField usages with `<Field>` — move `label`, `helperText`, `error`, `optional` to Field props (see [InputField](#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)
 - [ ] Update custom CSS targeting `data-state` attributes (see [Data Attributes](#data-attributes))
 - [ ] Update custom CSS referencing `--radix-*` variables (see [CSS Variables](#css-variables))
 - [ ] Test all components end-to-end
diff --git a/packages/raystack/components/calendar/date-picker.tsx b/packages/raystack/components/calendar/date-picker.tsx
index aded744f8..5f434fb3f 100644
--- a/packages/raystack/components/calendar/date-picker.tsx
+++ b/packages/raystack/components/calendar/date-picker.tsx
@@ -175,7 +175,7 @@ export function DatePicker({
     <InputField
       size='small'
       placeholder='Select date'
-      error={error}
+      aria-invalid={!!error}
       className={styles.datePickerInput}
       trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
       {...inputFieldProps}
diff --git a/packages/raystack/components/checkbox/checkbox.tsx b/packages/raystack/components/checkbox/checkbox.tsx
index 47d142583..c8e7dd3d5 100644
--- a/packages/raystack/components/checkbox/checkbox.tsx
+++ b/packages/raystack/components/checkbox/checkbox.tsx
@@ -3,6 +3,7 @@
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
 import { cx } from 'class-variance-authority';
+import { useFieldContext } from '../field';
 
 import styles from './checkbox.module.css';
 
@@ -53,10 +54,18 @@ function CheckboxGroup({ className, ...props }: CheckboxGroupPrimitive.Props) {
 
 CheckboxGroup.displayName = 'Checkbox.Group';
 
-function CheckboxItem({ className, ...props }: CheckboxPrimitive.Root.Props) {
+function CheckboxItem({
+  className,
+  required,
+  ...props
+}: CheckboxPrimitive.Root.Props) {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   return (
     <CheckboxPrimitive.Root
       className={cx(styles.checkbox, className)}
+      required={resolvedRequired}
       {...props}
     >
       <CheckboxPrimitive.Indicator
diff --git a/packages/raystack/components/combobox/combobox-root.tsx b/packages/raystack/components/combobox/combobox-root.tsx
index d9b8e93b1..d031e0f40 100644
--- a/packages/raystack/components/combobox/combobox-root.tsx
+++ b/packages/raystack/components/combobox/combobox-root.tsx
@@ -10,6 +10,7 @@ import {
   useRef,
   useState
 } from 'react';
+import { useFieldContext } from '../field';
 
 interface ComboboxContextValue<Value = string> {
   multiple: boolean;
@@ -72,8 +73,12 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
   value: providedValue,
   defaultValue,
   items,
+  required,
   ...props
 }: ComboboxRootProps<Value>) => {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   const [inputValue, setInputValue] = useState('');
   const [internalValue, setInternalValue] = useState<
     Value | Value[] | null | undefined
@@ -133,6 +138,7 @@ export const ComboboxRoot = <Value extends unknown | unknown[]>({
         items={items}
         value={providedValue}
         defaultValue={defaultValue}
+        required={resolvedRequired}
         modal
         {...props}
       >
diff --git a/packages/raystack/components/field/__tests__/field.test.tsx b/packages/raystack/components/field/__tests__/field.test.tsx
new file mode 100644
index 000000000..d4cfab9ea
--- /dev/null
+++ b/packages/raystack/components/field/__tests__/field.test.tsx
@@ -0,0 +1,173 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import styles from '../field.module.css';
+import { Field } from '../index';
+
+describe('Field', () => {
+  describe('Basic Rendering', () => {
+    it('renders a div element', () => {
+      const { container } = render(<Field>content</Field>);
+      const field = container.firstElementChild;
+      expect(field).toBeInTheDocument();
+      expect(field?.tagName).toBe('DIV');
+    });
+
+    it('applies field class', () => {
+      const { container } = render(<Field>content</Field>);
+      const field = container.firstElementChild;
+      expect(field).toHaveClass(styles.field);
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <Field className='custom-field'>content</Field>
+      );
+      const field = container.firstElementChild;
+      expect(field).toHaveClass('custom-field');
+      expect(field).toHaveClass(styles.field);
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      render(<Field ref={ref}>content</Field>);
+      expect(ref).toHaveBeenCalled();
+    });
+  });
+
+  describe('Simple API - Label', () => {
+    it('renders label text', () => {
+      render(<Field label='Email'>content</Field>);
+      expect(screen.getByText('Email')).toBeInTheDocument();
+    });
+
+    it('renders label as a label element', () => {
+      render(<Field label='Email'>content</Field>);
+      const label = screen.getByText('Email');
+      expect(label.tagName).toBe('LABEL');
+    });
+
+    it('does not render label when not provided', () => {
+      const { container } = render(<Field>content</Field>);
+      expect(container.querySelector('label')).not.toBeInTheDocument();
+    });
+
+    it('renders optional indicator when required={false}', () => {
+      render(
+        <Field label='Email' required={false}>
+          content
+        </Field>
+      );
+      expect(screen.getByText('(optional)')).toBeInTheDocument();
+    });
+
+    it('does not render optional indicator by default', () => {
+      render(<Field label='Email'>content</Field>);
+      expect(screen.queryByText('(optional)')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Simple API - Description', () => {
+    it('renders description text', () => {
+      render(<Field description='Enter a valid email'>content</Field>);
+      expect(screen.getByText('Enter a valid email')).toBeInTheDocument();
+    });
+
+    it('does not render description when error is present', () => {
+      render(
+        <Field description='Enter email' error='Invalid email'>
+          content
+        </Field>
+      );
+      expect(screen.queryByText('Enter email')).not.toBeInTheDocument();
+      expect(screen.getByText('Invalid email')).toBeInTheDocument();
+    });
+  });
+
+  describe('Simple API - Error', () => {
+    it('renders error message', () => {
+      render(<Field error='Required field'>content</Field>);
+      expect(screen.getByText('Required field')).toBeInTheDocument();
+    });
+
+    it('applies error styles', () => {
+      render(<Field error='Required'>content</Field>);
+      const error = screen.getByText('Required');
+      expect(error).toHaveClass(styles.error);
+    });
+
+    it('sets invalid state when error is provided', () => {
+      const { container } = render(<Field error='Error'>content</Field>);
+      const field = container.firstElementChild;
+      expect(field).toHaveAttribute('data-invalid', '');
+    });
+  });
+
+  describe('Sub-component API', () => {
+    it('renders Field.Label', () => {
+      render(
+        <Field>
+          <Field.Label>Username</Field.Label>
+        </Field>
+      );
+      expect(screen.getByText('Username')).toBeInTheDocument();
+    });
+
+    it('renders Field.Description', () => {
+      render(
+        <Field>
+          <Field.Description>Help text</Field.Description>
+        </Field>
+      );
+      expect(screen.getByText('Help text')).toBeInTheDocument();
+    });
+
+    it('renders Field.Error', () => {
+      render(
+        <Field invalid>
+          <Field.Error match>Error message</Field.Error>
+        </Field>
+      );
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
+    it('renders Field.Control', () => {
+      render(
+        <Field>
+          <Field.Control placeholder='Type here' />
+        </Field>
+      );
+      expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
+    });
+
+    it('renders optional indicator on Field.Label via required={false}', () => {
+      render(
+        <Field>
+          <Field.Label required={false}>Username</Field.Label>
+        </Field>
+      );
+      expect(screen.getByText('(optional)')).toBeInTheDocument();
+    });
+
+    it('applies custom className to sub-components', () => {
+      render(
+        <Field>
+          <Field.Label className='custom-label'>Label</Field.Label>
+          <Field.Description className='custom-desc'>Desc</Field.Description>
+        </Field>
+      );
+      expect(screen.getByText('Label')).toHaveClass('custom-label');
+      expect(screen.getByText('Desc')).toHaveClass('custom-desc');
+    });
+  });
+
+  describe('Children rendering', () => {
+    it('renders children inside control wrapper', () => {
+      render(
+        <Field label='Name'>
+          <input data-testid='child-input' />
+        </Field>
+      );
+      expect(screen.getByTestId('child-input')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/raystack/components/field/field-misc.tsx b/packages/raystack/components/field/field-misc.tsx
new file mode 100644
index 000000000..b9112ef17
--- /dev/null
+++ b/packages/raystack/components/field/field-misc.tsx
@@ -0,0 +1,70 @@
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { cx } from 'class-variance-authority';
+import styles from './field.module.css';
+
+export interface FieldLabelProps extends FieldPrimitive.Label.Props {
+  required?: boolean;
+}
+
+export function FieldLabel({
+  className,
+  ref,
+  required,
+  children,
+  ...props
+}: FieldLabelProps) {
+  return (
+    <FieldPrimitive.Label
+      ref={ref}
+      className={cx(styles.label, className)}
+      {...props}
+    >
+      {children}
+      {required === false && (
+        <span className={styles.optional}>(optional)</span>
+      )}
+    </FieldPrimitive.Label>
+  );
+}
+
+export function FieldControl({
+  className,
+  ref,
+  ...props
+}: FieldPrimitive.Control.Props) {
+  return (
+    <FieldPrimitive.Control
+      ref={ref}
+      className={cx(styles.input, className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldError({
+  className,
+  ref,
+  ...props
+}: FieldPrimitive.Error.Props) {
+  return (
+    <FieldPrimitive.Error
+      ref={ref}
+      className={cx(styles.error, className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({
+  className,
+  ref,
+  ...props
+}: FieldPrimitive.Description.Props) {
+  return (
+    <FieldPrimitive.Description
+      ref={ref}
+      className={cx(styles.description, className)}
+      {...props}
+    />
+  );
+}
diff --git a/packages/raystack/components/field/field-root.tsx b/packages/raystack/components/field/field-root.tsx
new file mode 100644
index 000000000..cf50d97da
--- /dev/null
+++ b/packages/raystack/components/field/field-root.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { cx } from 'class-variance-authority';
+import { createContext, ReactNode } from 'react';
+import styles from './field.module.css';
+import { FieldLabel } from './field-misc';
+
+export interface FieldProps extends FieldPrimitive.Root.Props {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  required?: boolean;
+}
+
+export interface FieldContextValue {
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+}
+
+export const FieldContext = createContext<FieldContextValue | null>(null);
+
+export function FieldRoot({
+  label,
+  description,
+  error,
+  required = true,
+  className,
+  children,
+  invalid,
+  disabled,
+  ref,
+  ...props
+}: FieldProps) {
+  const isInvalid = invalid ?? !!error;
+
+  return (
+    <FieldContext.Provider value={{ invalid: isInvalid, disabled, required }}>
+      <FieldPrimitive.Root
+        ref={ref}
+        className={cx(styles.field, className)}
+        invalid={isInvalid}
+        disabled={disabled}
+        {...props}
+      >
+        {label && <FieldLabel required={required}>{label}</FieldLabel>}
+        <div className={styles.control}>{children}</div>
+        {error && (
+          <FieldPrimitive.Error className={styles.error} match>
+            {error}
+          </FieldPrimitive.Error>
+        )}
+        {!error && description && (
+          <FieldPrimitive.Description className={styles.description}>
+            {description}
+          </FieldPrimitive.Description>
+        )}
+      </FieldPrimitive.Root>
+    </FieldContext.Provider>
+  );
+}
diff --git a/packages/raystack/components/field/field.module.css b/packages/raystack/components/field/field.module.css
new file mode 100644
index 000000000..00400b431
--- /dev/null
+++ b/packages/raystack/components/field/field.module.css
@@ -0,0 +1,85 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-1);
+  width: 100%;
+}
+
+.label {
+  color: var(--rs-color-foreground-base-secondary);
+  font-weight: var(--rs-font-weight-medium);
+  font-size: var(--rs-font-size-mini);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  padding-bottom: var(--rs-space-2);
+}
+
+.label[data-disabled] {
+  color: var(--rs-color-foreground-base-tertiary);
+}
+
+.optional {
+  color: var(--rs-color-foreground-base-tertiary);
+  font-weight: var(--rs-font-weight-regular);
+  margin-left: var(--rs-space-1);
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+}
+
+.description {
+  color: var(--rs-color-foreground-base-secondary);
+  font-weight: var(--rs-font-weight-regular);
+  font-size: var(--rs-font-size-mini);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  padding-top: var(--rs-space-2);
+  margin: 0;
+}
+
+.error {
+  color: var(--rs-color-foreground-danger-primary);
+  font-weight: var(--rs-font-weight-regular);
+  font-size: var(--rs-font-size-mini);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  padding-top: var(--rs-space-2);
+  margin: 0;
+}
+
+.input {
+  width: 100%;
+  padding: 0 var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
+  border: 1px solid var(--rs-color-border-base-tertiary);
+  background: var(--rs-color-background-base-primary);
+  font-weight: var(--rs-font-weight-regular);
+  font-size: var(--rs-font-size-small);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  height: var(--rs-space-9);
+}
+
+.input:hover {
+  border-color: var(--rs-color-border-base-focus);
+  background: var(--rs-color-background-base-primary-hover);
+}
+
+.input:focus {
+  border-color: var(--rs-color-border-accent-emphasis);
+  background-color: var(--rs-color-background-base-primary);
+}
+
+.input[data-invalid] {
+  border-color: var(--rs-color-border-danger-primary);
+}
+
+.input[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
diff --git a/packages/raystack/components/field/index.ts b/packages/raystack/components/field/index.ts
new file mode 100644
index 000000000..8f8596c3d
--- /dev/null
+++ b/packages/raystack/components/field/index.ts
@@ -0,0 +1,20 @@
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import {
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel
+} from './field-misc';
+import { FieldRoot } from './field-root';
+
+export type { FieldLabelProps } from './field-misc';
+export type { FieldProps } from './field-root';
+export { useFieldContext } from './use-field-context';
+
+export const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Control: FieldControl,
+  Error: FieldError,
+  Description: FieldDescription,
+  Validity: FieldPrimitive.Validity
+});
diff --git a/packages/raystack/components/field/use-field-context.tsx b/packages/raystack/components/field/use-field-context.tsx
new file mode 100644
index 000000000..3a05f5eeb
--- /dev/null
+++ b/packages/raystack/components/field/use-field-context.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { FieldContext, FieldContextValue } from './field-root';
+
+// This is a separate file to keep the hook server safe.
+// The hook always returns the same number of calls on the client,
+// and zero calls on the server, which is safe because server renders
+// are never interleaved with client renders.
+export function useFieldContext(): FieldContextValue | null | undefined {
+  if (typeof document === 'undefined') return undefined;
+  // biome-ignore lint/correctness/useHookAtTopLevel: server/client renders never interleave, hook count is consistent per environment
+  return useContext(FieldContext);
+}
diff --git a/packages/raystack/components/fieldset/__tests__/fieldset.test.tsx b/packages/raystack/components/fieldset/__tests__/fieldset.test.tsx
new file mode 100644
index 000000000..495972fdf
--- /dev/null
+++ b/packages/raystack/components/fieldset/__tests__/fieldset.test.tsx
@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Fieldset } from '../fieldset';
+import styles from '../fieldset.module.css';
+
+describe('Fieldset', () => {
+  describe('Basic Rendering', () => {
+    it('renders a fieldset element', () => {
+      const { container } = render(<Fieldset>content</Fieldset>);
+      const fieldset = container.querySelector('fieldset');
+      expect(fieldset).toBeInTheDocument();
+    });
+
+    it('applies fieldset class', () => {
+      const { container } = render(<Fieldset>content</Fieldset>);
+      const fieldset = container.querySelector('fieldset');
+      expect(fieldset).toHaveClass(styles.fieldset);
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <Fieldset className='custom-fieldset'>content</Fieldset>
+      );
+      const fieldset = container.querySelector('fieldset');
+      expect(fieldset).toHaveClass('custom-fieldset');
+      expect(fieldset).toHaveClass(styles.fieldset);
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      render(<Fieldset ref={ref}>content</Fieldset>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('renders children', () => {
+      render(
+        <Fieldset>
+          <input data-testid='child' />
+        </Fieldset>
+      );
+      expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+  });
+
+  describe('Simple API - Legend', () => {
+    it('renders legend text', () => {
+      render(<Fieldset legend='Personal Info'>content</Fieldset>);
+      expect(screen.getByText('Personal Info')).toBeInTheDocument();
+    });
+
+    it('applies legend class', () => {
+      render(<Fieldset legend='Info'>content</Fieldset>);
+      const legend = screen.getByText('Info');
+      expect(legend).toHaveClass(styles.legend);
+    });
+
+    it('does not render legend when not provided', () => {
+      const { container } = render(<Fieldset>content</Fieldset>);
+      expect(
+        container.querySelector('[role="presentation"]')
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Sub-component API', () => {
+    it('renders Fieldset.Legend', () => {
+      render(
+        <Fieldset>
+          <Fieldset.Legend>Custom Legend</Fieldset.Legend>
+        </Fieldset>
+      );
+      expect(screen.getByText('Custom Legend')).toBeInTheDocument();
+    });
+
+    it('applies custom className to Fieldset.Legend', () => {
+      render(
+        <Fieldset>
+          <Fieldset.Legend className='custom-cls'>Legend</Fieldset.Legend>
+        </Fieldset>
+      );
+      const legend = screen.getByText('Legend');
+      expect(legend).toHaveClass('custom-cls');
+      expect(legend).toHaveClass(styles.legend);
+    });
+  });
+
+  describe('Disabled State', () => {
+    it('sets data-disabled attribute when disabled', () => {
+      const { container } = render(
+        <Fieldset disabled>
+          <input data-testid='child-input' />
+        </Fieldset>
+      );
+      const fieldset = container.querySelector('fieldset');
+      expect(fieldset).toHaveAttribute('data-disabled', '');
+    });
+  });
+});
diff --git a/packages/raystack/components/fieldset/fieldset.module.css b/packages/raystack/components/fieldset/fieldset.module.css
new file mode 100644
index 000000000..5214edb31
--- /dev/null
+++ b/packages/raystack/components/fieldset/fieldset.module.css
@@ -0,0 +1,18 @@
+.fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-4);
+}
+
+.legend {
+  color: var(--rs-color-foreground-base-primary);
+  font-weight: var(--rs-font-weight-semibold);
+  font-size: var(--rs-font-size-base);
+  line-height: var(--rs-line-height-base);
+  letter-spacing: var(--rs-letter-spacing-base);
+  padding: 0;
+  margin-bottom: var(--rs-space-2);
+}
diff --git a/packages/raystack/components/fieldset/fieldset.tsx b/packages/raystack/components/fieldset/fieldset.tsx
new file mode 100644
index 000000000..0c4042a35
--- /dev/null
+++ b/packages/raystack/components/fieldset/fieldset.tsx
@@ -0,0 +1,40 @@
+import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
+import { cx } from 'class-variance-authority';
+import styles from './fieldset.module.css';
+
+export interface FieldsetProps extends FieldsetPrimitive.Root.Props {
+  legend?: string;
+}
+
+function FieldsetRoot({
+  legend,
+  className,
+  children,
+  ...props
+}: FieldsetProps) {
+  return (
+    <FieldsetPrimitive.Root
+      className={cx(styles.fieldset, className)}
+      {...props}
+    >
+      {legend && <FieldsetLegend>{legend}</FieldsetLegend>}
+      {children}
+    </FieldsetPrimitive.Root>
+  );
+}
+
+function FieldsetLegend({
+  className,
+  ...props
+}: FieldsetPrimitive.Legend.Props) {
+  return (
+    <FieldsetPrimitive.Legend
+      className={cx(styles.legend, className)}
+      {...props}
+    />
+  );
+}
+
+export const Fieldset = Object.assign(FieldsetRoot, {
+  Legend: FieldsetLegend
+});
diff --git a/packages/raystack/components/fieldset/index.tsx b/packages/raystack/components/fieldset/index.tsx
new file mode 100644
index 000000000..2c1001c0e
--- /dev/null
+++ b/packages/raystack/components/fieldset/index.tsx
@@ -0,0 +1,2 @@
+export type { FieldsetProps } from './fieldset';
+export { Fieldset } from './fieldset';
diff --git a/packages/raystack/components/form/__tests__/form.test.tsx b/packages/raystack/components/form/__tests__/form.test.tsx
new file mode 100644
index 000000000..7394bbe6e
--- /dev/null
+++ b/packages/raystack/components/form/__tests__/form.test.tsx
@@ -0,0 +1,57 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Form } from '../form';
+import styles from '../form.module.css';
+
+describe('Form', () => {
+  describe('Basic Rendering', () => {
+    it('renders a form element', () => {
+      const { container } = render(<Form>content</Form>);
+      const form = container.querySelector('form');
+      expect(form).toBeInTheDocument();
+    });
+
+    it('applies form class', () => {
+      const { container } = render(<Form>content</Form>);
+      const form = container.querySelector('form');
+      expect(form).toHaveClass(styles.form);
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(
+        <Form className='custom-form'>content</Form>
+      );
+      const form = container.querySelector('form');
+      expect(form).toHaveClass('custom-form');
+      expect(form).toHaveClass(styles.form);
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      render(<Form ref={ref}>content</Form>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('renders children', () => {
+      render(
+        <Form>
+          <input data-testid='child' />
+        </Form>
+      );
+      expect(screen.getByTestId('child')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('calls onSubmit handler', () => {
+      const handleSubmit = vi.fn(e => e.preventDefault());
+      render(
+        <Form onSubmit={handleSubmit}>
+          <button type='submit'>Submit</button>
+        </Form>
+      );
+      fireEvent.click(screen.getByText('Submit'));
+      expect(handleSubmit).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/raystack/components/form/form.module.css b/packages/raystack/components/form/form.module.css
new file mode 100644
index 000000000..4bd49a63c
--- /dev/null
+++ b/packages/raystack/components/form/form.module.css
@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-5);
+}
diff --git a/packages/raystack/components/form/form.tsx b/packages/raystack/components/form/form.tsx
new file mode 100644
index 000000000..d6c0e1066
--- /dev/null
+++ b/packages/raystack/components/form/form.tsx
@@ -0,0 +1,11 @@
+import { Form as FormPrimitive } from '@base-ui/react/form';
+import { cx } from 'class-variance-authority';
+import styles from './form.module.css';
+
+export type FormProps = FormPrimitive.Props;
+
+function FormRoot({ className, ...props }: FormProps) {
+  return <FormPrimitive className={cx(styles.form, className)} {...props} />;
+}
+
+export const Form = FormRoot;
diff --git a/packages/raystack/components/form/index.tsx b/packages/raystack/components/form/index.tsx
new file mode 100644
index 000000000..45706892d
--- /dev/null
+++ b/packages/raystack/components/form/index.tsx
@@ -0,0 +1,2 @@
+export type { FormProps } from './form';
+export { Form } from './form';
diff --git a/packages/raystack/components/input-field/__tests__/input-field.test.tsx b/packages/raystack/components/input-field/__tests__/input-field.test.tsx
index eef30faec..8e869ce9c 100644
--- a/packages/raystack/components/input-field/__tests__/input-field.test.tsx
+++ b/packages/raystack/components/input-field/__tests__/input-field.test.tsx
@@ -32,19 +32,19 @@ describe('InputField', () => {
 
     it('sets custom width', () => {
       const { container } = render(<InputField width='300px' />);
-      const wrapper = container.querySelector(`.${styles.container}`);
+      const wrapper = container.querySelector(`.${styles.inputWrapper}`);
       expect(wrapper).toHaveStyle({ width: '300px' });
     });
 
     it('sets numeric width as pixels', () => {
       const { container } = render(<InputField width={400} />);
-      const wrapper = container.querySelector(`.${styles.container}`);
+      const wrapper = container.querySelector(`.${styles.inputWrapper}`);
       expect(wrapper).toHaveStyle({ width: '400px' });
     });
 
     it('defaults to 100% width', () => {
       const { container } = render(<InputField />);
-      const wrapper = container.querySelector(`.${styles.container}`);
+      const wrapper = container.querySelector(`.${styles.inputWrapper}`);
       expect(wrapper).toHaveStyle({ width: '100%' });
     });
 
@@ -83,71 +83,6 @@ describe('InputField', () => {
     });
   });
 
-  describe('Label and Helper Text', () => {
-    it('renders with label', () => {
-      render(<InputField label='Email Address' />);
-      expect(screen.getByText('Email Address')).toBeInTheDocument();
-    });
-
-    it('renders optional indicator', () => {
-      render(<InputField label='Phone' optional />);
-      expect(screen.getByText('(optional)')).toBeInTheDocument();
-    });
-
-    it('renders helper text', () => {
-      render(<InputField helperText='Enter a valid email' />);
-      expect(screen.getByText('Enter a valid email')).toBeInTheDocument();
-    });
-
-    it('renders info tooltip with label', () => {
-      const { container } = render(
-        <InputField label='Username' infoTooltip='Must be unique' />
-      );
-      const helpIcon = container.querySelector(`.${styles.helpIcon}`);
-      expect(helpIcon).toBeInTheDocument();
-    });
-
-    it('does not render info tooltip without label', () => {
-      const { container } = render(<InputField infoTooltip='Must be unique' />);
-      const helpIcon = container.querySelector(`.${styles.helpIcon}`);
-      expect(helpIcon).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Error State', () => {
-    it('renders error message', () => {
-      render(<InputField error='Invalid input' />);
-      expect(screen.getByText('Invalid input')).toBeInTheDocument();
-    });
-
-    it('applies error styles to input', () => {
-      render(<InputField error='Invalid' />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveClass(styles['input-error']);
-      expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
-
-    it('applies error styles to wrapper', () => {
-      const { container } = render(<InputField error='Invalid' />);
-      const wrapper = container.querySelector(`.${styles.inputWrapper}`);
-      expect(wrapper).toHaveClass(styles['input-error-wrapper']);
-    });
-
-    it('shows error message instead of helper text', () => {
-      render(
-        <InputField helperText='Enter email' error='Invalid email format' />
-      );
-      expect(screen.getByText('Invalid email format')).toBeInTheDocument();
-      expect(screen.queryByText('Enter email')).not.toBeInTheDocument();
-    });
-
-    it('error text has error styles', () => {
-      render(<InputField error='Invalid input' />);
-      const errorText = screen.getByText('Invalid input');
-      expect(errorText).toHaveClass(styles['helper-text-error']);
-    });
-  });
-
   describe('Icons', () => {
     it('renders leading icon', () => {
       const icon = <span data-testid='search-icon'>🔍</span>;
@@ -272,18 +207,6 @@ describe('InputField', () => {
   });
 
   describe('Accessibility', () => {
-    it('sets aria-invalid when error is present', () => {
-      render(<InputField error='Invalid input' />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
-
-    it('does not set aria-invalid when no error', () => {
-      render(<InputField />);
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveAttribute('aria-invalid', 'false');
-    });
-
     it('supports aria-label', () => {
       render(<InputField aria-label='Search input' />);
       const input = screen.getByLabelText('Search input');
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
index 98ffe6fe9..e4b29f69b 100644
--- a/packages/raystack/components/input-field/input-field.module.css
+++ b/packages/raystack/components/input-field/input-field.module.css
@@ -1,26 +1,5 @@
 /* Note: If making changes here, possibly also need to make changes in text-area.module.css for design consistency. */
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rs-space-2);
-  width: 100%;
-  position: relative;
-}
-
-.label {
-  color: var(--rs-color-foreground-base-secondary);
-  font-style: normal;
-  font-weight: var(--rs-font-weight-medium);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-}
-
-.label-disabled {
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
 .inputWrapper {
   display: flex;
   align-items: center;
@@ -46,20 +25,22 @@
   outline: none;
 }
 
-.input-error-wrapper {
+.inputWrapper[data-invalid] {
   border-color: var(--rs-color-border-danger-primary);
 }
 
-.input-error-wrapper:hover {
+.inputWrapper[data-invalid]:hover,
+.inputWrapper[data-invalid]:focus-within {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
 
-.input-error-wrapper:focus-within {
-  border-color: var(--rs-color-border-danger-emphasis-hover);
+.inputWrapper[data-disabled] {
+  opacity: 0.5;
 }
 
-.input-disabled-wrapper {
-  opacity: 0.5;
+.inputWrapper[data-disabled]:hover {
+  border-color: var(--rs-color-border-base-tertiary);
+  background: var(--rs-color-background-base-primary);
 }
 
 .leading-icon {
@@ -112,23 +93,7 @@
   background: var(--rs-color-background-base-primary);
 }
 
-.input-disabled {
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-.helper-text {
-  color: var(--rs-color-foreground-base-secondary);
-  font-weight: var(--rs-font-weight-regular);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-}
-
-.helper-text-error {
-  color: var(--rs-color-foreground-danger-primary);
-}
-
-.helper-text-disabled {
+.input-field[data-disabled] {
   color: var(--rs-color-foreground-base-tertiary);
 }
 
@@ -140,15 +105,6 @@
   padding-right: var(--rs-space-2);
 }
 
-.optional {
-  color: var(--rs-color-foreground-base-tertiary);
-  font-weight: var(--rs-font-weight-regular);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-  margin-left: var(--rs-space-1);
-}
-
 .has-chips {
   background: var(--rs-color-background-base-primary);
   transition: var(--rs-transition-interactive);
@@ -268,20 +224,6 @@
   padding-right: var(--rs-space-2);
 }
 
-.labelContainer {
-  display: flex;
-  align-items: center;
-}
-
-.helpIcon {
-  color: var(--rs-color-foreground-base-secondary);
-  display: flex;
-  align-items: center;
-  margin-left: var(--rs-space-2);
-  width: var(--rs-space-4);
-  height: var(--rs-space-4);
-}
-
 .variant-borderless {
   border-color: transparent;
 }
@@ -294,12 +236,3 @@
   border-color: transparent;
   outline: none;
 }
-
-.input-error-wrapper.variant-borderless {
-  border-color: transparent;
-}
-
-.input-error-wrapper.variant-borderless:hover,
-.input-error-wrapper.variant-borderless:focus-within {
-  border-color: transparent;
-}
\ No newline at end of file
diff --git a/packages/raystack/components/input-field/input-field.tsx b/packages/raystack/components/input-field/input-field.tsx
index 026c29931..9f56860f9 100644
--- a/packages/raystack/components/input-field/input-field.tsx
+++ b/packages/raystack/components/input-field/input-field.tsx
@@ -1,14 +1,10 @@
-'use client';
-
-import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Input as InputPrimitive } from '@base-ui/react/input';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ComponentProps, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { Chip } from '../chip';
-import { Tooltip } from '../tooltip';
+import { useFieldContext } from '../field';
 import styles from './input-field.module.css';
 
-// Todo: Add a dropdown support
-
 const inputWrapper = cva(styles.inputWrapper, {
   variants: {
     size: {
@@ -27,21 +23,16 @@ const inputWrapper = cva(styles.inputWrapper, {
 });
 
 export interface InputFieldProps
-  extends Omit<ComponentProps<'input'>, 'error' | 'size'>,
+  extends Omit<InputPrimitive.Props, 'size'>,
     VariantProps<typeof inputWrapper> {
-  label?: string;
-  helperText?: string;
-  error?: string;
   disabled?: boolean;
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
-  optional?: boolean;
   prefix?: string;
   suffix?: string;
   width?: string | number;
   chips?: Array<{ label: string; onRemove?: () => void }>;
   maxChipsVisible?: number;
-  infoTooltip?: string;
   variant?: 'default' | 'borderless';
   containerRef?: RefObject<HTMLDivElement | null>;
 }
@@ -49,112 +40,74 @@ export interface InputFieldProps
 export function InputField({
   className,
   disabled,
-  label,
-  helperText,
   placeholder,
-  error,
   leadingIcon,
   trailingIcon,
-  optional,
   prefix,
   suffix,
   width,
   chips,
   maxChipsVisible = 2,
   size,
-  infoTooltip,
   variant = 'default',
   containerRef,
+  required,
   ...props
 }: InputFieldProps) {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   return (
-    <div className={styles.container} style={{ width: width || '100%' }}>
-      {label && (
-        <div className={styles.labelContainer}>
-          <label
-            className={cx(styles.label, disabled && styles['label-disabled'])}
-          >
-            {label}
-            {optional && <span className={styles.optional}>(optional)</span>}
-          </label>
-          {infoTooltip && (
-            <Tooltip>
-              <Tooltip.Trigger
-                render={
-                  <span className={styles.helpIcon}>
-                    <InfoCircledIcon />
-                  </span>
-                }
-              />
-              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
-            </Tooltip>
-          )}
-        </div>
+    <div
+      className={cx(
+        inputWrapper({ size, variant }),
+        chips?.length && styles['has-chips']
       )}
-      <div
-        className={cx(
-          inputWrapper({ size, variant, className }),
-          error && styles['input-error-wrapper'],
-          disabled && styles['input-disabled-wrapper'],
-          chips?.length && styles['has-chips']
-        )}
-        ref={containerRef}
-      >
-        {leadingIcon && (
-          <div className={styles['leading-icon']}>{leadingIcon}</div>
-        )}
-        {prefix && <div className={styles.prefix}>{prefix}</div>}
-
-        <div className={styles['chip-input-container']}>
-          {chips?.slice(0, maxChipsVisible).map((chip, index) => (
-            <Chip
-              key={index}
-              variant='outline'
-              isDismissible={!!chip.onRemove}
-              onDismiss={chip.onRemove}
-              className={styles.chip}
-            >
-              {chip.label}
-            </Chip>
-          ))}
-          {chips && chips.length > maxChipsVisible && (
-            <span className={styles['chip-overflow']}>
-              +{chips.length - maxChipsVisible}
-            </span>
-          )}
-          <input
-            className={cx(
-              styles['input-field'],
-              leadingIcon && styles['has-leading-icon'],
-              trailingIcon && styles['has-trailing-icon'],
-              prefix && styles['has-prefix'],
-              suffix && styles['has-suffix'],
-              error && styles['input-error'],
-              disabled && styles['input-disabled'],
-              className
-            )}
-            aria-invalid={!!error}
-            placeholder={placeholder}
-            disabled={disabled}
-            {...props}
-          />
-        </div>
+      data-disabled={disabled || undefined}
+      style={{ width: width || '100%' }}
+      ref={containerRef}
+    >
+      {leadingIcon && (
+        <div className={styles['leading-icon']}>{leadingIcon}</div>
+      )}
+      {prefix && <div className={styles.prefix}>{prefix}</div>}
 
-        {suffix && <div className={styles.suffix}>{suffix}</div>}
-        {trailingIcon && (
-          <div className={styles['trailing-icon']}>{trailingIcon}</div>
+      <div className={styles['chip-input-container']}>
+        {chips?.slice(0, maxChipsVisible).map((chip, index) => (
+          <Chip
+            key={index}
+            variant='outline'
+            isDismissible={!!chip.onRemove}
+            onDismiss={chip.onRemove}
+            className={styles.chip}
+          >
+            {chip.label}
+          </Chip>
+        ))}
+        {chips && chips.length > maxChipsVisible && (
+          <span className={styles['chip-overflow']}>
+            +{chips.length - maxChipsVisible}
+          </span>
         )}
-      </div>
-      {(error || helperText) && (
-        <span
+        <InputPrimitive
           className={cx(
-            styles['helper-text'],
-            error && styles['helper-text-error'],
-            disabled && styles['helper-text-disabled']
+            styles['input-field'],
+            leadingIcon && styles['has-leading-icon'],
+            trailingIcon && styles['has-trailing-icon'],
+            prefix && styles['has-prefix'],
+            suffix && styles['has-suffix'],
+            className
           )}
-        >
-          {error || helperText}
-        </span>
+          placeholder={placeholder}
+          disabled={disabled}
+          required={resolvedRequired}
+          {...props}
+        />
+      </div>
+
+      {suffix && <div className={styles.suffix}>{suffix}</div>}
+      {trailingIcon && (
+        <div className={styles['trailing-icon']}>{trailingIcon}</div>
       )}
     </div>
   );
diff --git a/packages/raystack/components/number-field/number-field.tsx b/packages/raystack/components/number-field/number-field.tsx
index f43bd6d0d..67e99592c 100644
--- a/packages/raystack/components/number-field/number-field.tsx
+++ b/packages/raystack/components/number-field/number-field.tsx
@@ -3,7 +3,8 @@
 import { NumberField as NumberFieldPrimitive } from '@base-ui/react';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { type ComponentProps, createContext, useContext, useId } from 'react';
+import { ComponentProps, createContext, useContext, useId } from 'react';
+import { useFieldContext } from '../field';
 import { Label } from '../label';
 import styles from './number-field.module.css';
 
@@ -13,16 +14,20 @@ function NumberFieldRoot({
   className,
   children,
   id,
+  required,
   ...props
 }: NumberFieldPrimitive.Root.Props) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
 
   return (
     <NumberFieldContext value={{ fieldId }}>
       <NumberFieldPrimitive.Root
         className={cx(styles.root, className)}
         id={fieldId}
+        required={resolvedRequired}
         {...props}
       >
         {children ?? (
diff --git a/packages/raystack/components/radio/radio.tsx b/packages/raystack/components/radio/radio.tsx
index 81e79b73e..1073b3868 100644
--- a/packages/raystack/components/radio/radio.tsx
+++ b/packages/raystack/components/radio/radio.tsx
@@ -1,12 +1,24 @@
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { cx } from 'class-variance-authority';
+import { useFieldContext } from '../field';
 
 import styles from './radio.module.css';
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+function RadioGroup({
+  className,
+  required,
+  ...props
+}: RadioGroupPrimitive.Props) {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   return (
-    <RadioGroupPrimitive className={cx(styles.radio, className)} {...props} />
+    <RadioGroupPrimitive
+      className={cx(styles.radio, className)}
+      required={resolvedRequired}
+      {...props}
+    />
   );
 }
 
diff --git a/packages/raystack/components/select/select-root.tsx b/packages/raystack/components/select/select-root.tsx
index 039758a28..2e3cfd607 100644
--- a/packages/raystack/components/select/select-root.tsx
+++ b/packages/raystack/components/select/select-root.tsx
@@ -12,6 +12,7 @@ import {
   useMemo,
   useState
 } from 'react';
+import { useFieldContext } from '../field';
 import { ItemType } from './types';
 
 interface CommonProps {
@@ -106,6 +107,9 @@ export const SelectRoot = (props: SelectRootProps) => {
     ...rest
   } = props;
 
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   const [internalValue, setInternalValue] = useState<
     string | string[] | undefined
   >(defaultValue);
@@ -198,7 +202,9 @@ export const SelectRoot = (props: SelectRootProps) => {
     multiple: multiple as any,
     disabled,
     modal: true as const,
-    ...rest
+    ...rest,
+    required: resolvedRequired,
+    name
   };
 
   if (autocomplete) {
@@ -220,11 +226,9 @@ export const SelectRoot = (props: SelectRootProps) => {
   }
 
   return (
-    <SelectContext value={contextValue}>
-      <SelectPrimitive.Root {...commonProps} required={required} name={name}>
-        {children}
-      </SelectPrimitive.Root>
-    </SelectContext>
+    <SelectContext.Provider value={contextValue}>
+      <SelectPrimitive.Root {...commonProps}>{children}</SelectPrimitive.Root>
+    </SelectContext.Provider>
   );
 };
 
diff --git a/packages/raystack/components/switch/switch.tsx b/packages/raystack/components/switch/switch.tsx
index 214ec533b..a98dcbbcb 100644
--- a/packages/raystack/components/switch/switch.tsx
+++ b/packages/raystack/components/switch/switch.tsx
@@ -1,5 +1,6 @@
 import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { useFieldContext } from '../field';
 
 import styles from './switch.module.css';
 
@@ -19,11 +20,15 @@ export interface SwitchProps
   extends SwitchPrimitive.Root.Props,
     VariantProps<typeof switchVariants> {}
 
-export function Switch({ className, size, ...props }: SwitchProps) {
+export function Switch({ className, size, required, ...props }: SwitchProps) {
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
   return (
     <SwitchPrimitive.Root
-      {...props}
+      required={resolvedRequired}
       className={switchVariants({ size, className })}
+      {...props}
     >
       <SwitchPrimitive.Thumb className={styles.thumb} />
     </SwitchPrimitive.Root>
diff --git a/packages/raystack/components/text-area/__tests__/text-area.test.tsx b/packages/raystack/components/text-area/__tests__/text-area.test.tsx
index acb8f6a05..a876ffc30 100644
--- a/packages/raystack/components/text-area/__tests__/text-area.test.tsx
+++ b/packages/raystack/components/text-area/__tests__/text-area.test.tsx
@@ -30,73 +30,17 @@ describe('TextArea', () => {
       render(<TextArea ref={ref} />);
       expect(ref).toHaveBeenCalled();
     });
+
     it('defaults to 100% width', () => {
-      const { container } = render(<TextArea />);
-      const wrapper = container.querySelector(`.${styles.container}`);
-      expect(wrapper).toHaveStyle({ width: '100%' });
+      render(<TextArea />);
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toHaveStyle({ width: '100%' });
     });
 
     it('accepts custom width as string', () => {
-      const { container } = render(<TextArea width='500px' />);
-      const wrapper = container.querySelector(`.${styles.container}`);
-      expect(wrapper).toHaveStyle({ width: '500px' });
-    });
-  });
-
-  describe('Label and Helper Text', () => {
-    it('renders with label', () => {
-      render(<TextArea label='Description' />);
-      expect(screen.getByText('Description')).toBeInTheDocument();
-    });
-
-    it('shows optional indicator when not required', () => {
-      render(<TextArea label='Comments' required={false} />);
-      expect(screen.getByText('(optional)')).toBeInTheDocument();
-    });
-
-    it('does not show optional indicator when required', () => {
-      render(<TextArea label='Comments' required={true} />);
-      expect(screen.queryByText('(optional)')).not.toBeInTheDocument();
-    });
-
-    it('renders helper text', () => {
-      render(<TextArea helperText='Maximum 500 characters' />);
-      expect(screen.getByText('Maximum 500 characters')).toBeInTheDocument();
-    });
-
-    it('renders info tooltip with label', () => {
-      const { container } = render(
-        <TextArea label='Bio' infoTooltip='Tell us about yourself' />
-      );
-      const helpIcon = container.querySelector(`.${styles.helpIcon}`);
-      expect(helpIcon).toBeInTheDocument();
-    });
-
-    it('does not render info tooltip without label', () => {
-      const { container } = render(<TextArea infoTooltip='Info text' />);
-      const helpIcon = container.querySelector(`.${styles.helpIcon}`);
-      expect(helpIcon).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Error State', () => {
-    it('applies error styles when error is true', () => {
-      render(<TextArea error />);
+      render(<TextArea width='500px' />);
       const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveClass(styles.error);
-    });
-
-    it('applies error styles to helper text', () => {
-      render(<TextArea error helperText='Invalid input' />);
-      const helperText = screen.getByText('Invalid input');
-      expect(helperText).toHaveClass(styles.helperTextError);
-    });
-
-    it('shows helper text with error styling', () => {
-      render(<TextArea error helperText='Please enter valid text' />);
-      const helperText = screen.getByText('Please enter valid text');
-      expect(helperText).toHaveClass(styles.helperText);
-      expect(helperText).toHaveClass(styles.helperTextError);
+      expect(textarea).toHaveStyle({ width: '500px' });
     });
   });
 
@@ -113,25 +57,12 @@ describe('TextArea', () => {
       expect(textarea).toHaveClass(styles.disabled);
     });
 
-    it('applies disabled styles to label', () => {
-      render(<TextArea label='Notes' disabled />);
-      const label = screen.getByText('Notes').closest('label');
-      expect(label).toHaveClass(styles.labelDisabled);
-    });
-
-    it('applies disabled styles to helper text', () => {
-      render(<TextArea helperText='Help text' disabled />);
-      const helperText = screen.getByText('Help text');
-      expect(helperText).toHaveClass(styles.helperTextDisabled);
-    });
-
     it('does not respond to events when disabled', () => {
       const handleChange = vi.fn();
       render(<TextArea disabled onChange={handleChange} />);
       const textarea = screen.getByRole('textbox');
 
       expect(textarea).toBeDisabled();
-
       expect(textarea).toHaveAttribute('disabled');
 
       fireEvent.change(textarea, { target: { value: 'test' } });
@@ -139,20 +70,6 @@ describe('TextArea', () => {
     });
   });
 
-  describe('Required State', () => {
-    it('sets required attribute on textarea', () => {
-      render(<TextArea required />);
-      const textarea = screen.getByRole('textbox');
-      expect(textarea).toBeRequired();
-    });
-
-    it('does not set required when false', () => {
-      render(<TextArea required={false} />);
-      const textarea = screen.getByRole('textbox');
-      expect(textarea).not.toBeRequired();
-    });
-  });
-
   describe('Event Handling', () => {
     it('handles onFocus event', () => {
       const handleFocus = vi.fn();
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index 97c4b3b6e..98c102f0c 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -1,56 +1,3 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rs-space-1);
-  width: 100%;
-  position: relative;
-}
-
-.labelContainer {
-  display: flex;
-  align-items: center;
-  padding-bottom: var(--rs-space-2);
-}
-
-.label {
-  color: var(--rs-color-foreground-base-secondary);
-  font-weight: var(--rs-font-weight-medium);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-}
-
-.labelDisabled {
-  opacity: 0.5;
-}
-
-.helpIcon {
-  color: var(--rs-color-foreground-base-secondary);
-  display: flex;
-  align-items: center;
-  margin-left: var(--rs-space-2);
-  width: var(--rs-space-4);
-  height: var(--rs-space-4);
-}
-
-.optional {
-  color: var(--rs-color-foreground-base-tertiary);
-  font-weight: var(--rs-font-weight-regular);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-  margin-left: var(--rs-space-1);
-}
-
-.helperText {
-  color: var(--rs-color-foreground-base-secondary);
-  font-weight: var(--rs-font-weight-regular);
-  font-size: var(--rs-font-size-mini);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-  padding-top: var(--rs-space-2);
-}
-
 .textarea {
   appearance: none;
   box-sizing: border-box;
@@ -93,7 +40,9 @@
   line-height: var(--rs-line-height-small);
 }
 
-.textarea:disabled {
+.textarea:disabled,
+.textarea[data-disabled],
+.disabled {
   opacity: 0.5;
 }
 
@@ -101,22 +50,14 @@
   background-color: var(--rs-color-background-base-secondary);
 }
 
-.error {
+.textarea[data-invalid] {
   border-color: var(--rs-color-border-danger-primary);
 }
 
-.error:hover:not(:disabled) {
+.textarea[data-invalid]:hover {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
 
-.error:focus:not(:disabled) {
+.textarea[data-invalid]:focus {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
-
-.helperTextError {
-  color: var(--rs-color-foreground-danger-primary);
-}
-
-.helperTextDisabled {
-  opacity: 0.5;
-}
\ No newline at end of file
diff --git a/packages/raystack/components/text-area/text-area.tsx b/packages/raystack/components/text-area/text-area.tsx
index 22a879187..f5458a718 100644
--- a/packages/raystack/components/text-area/text-area.tsx
+++ b/packages/raystack/components/text-area/text-area.tsx
@@ -1,100 +1,50 @@
-'use client';
-
-import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { ChangeEvent, ComponentProps } from 'react';
-import { Tooltip } from '../tooltip';
+import { Field as FieldPrimitive } from '@base-ui/react/field';
+import { cx } from 'class-variance-authority';
+import { ChangeEvent, type ComponentProps } from 'react';
+import { useFieldContext } from '../field';
 
 import styles from './text-area.module.css';
 
-const textArea = cva(styles.textarea, {
-  variants: {
-    error: {
-      true: styles.error
-    }
-  }
-});
-
-export interface TextAreaProps
-  extends ComponentProps<'textarea'>,
-    VariantProps<typeof textArea> {
-  label?: string;
-  required?: boolean;
-  infoTooltip?: string;
-  helperText?: string;
-  error?: boolean;
+export interface TextAreaProps extends ComponentProps<'textarea'> {
   disabled?: boolean;
+  placeholder?: string;
   width?: string | number;
   value?: string;
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
 }
 
-function TextArea({
+export function TextArea({
   className,
   style,
-  label,
-  required,
-  infoTooltip,
-  helperText,
-  error,
   disabled,
   width = '100%',
   value,
   onChange,
   placeholder,
+  required,
   ...props
 }: TextAreaProps) {
-  return (
-    <div className={styles.container} style={{ width }}>
-      {label && (
-        <div className={styles.labelContainer}>
-          <label className={cx(styles.label, disabled && styles.labelDisabled)}>
-            {label}
-            {!required && <span className={styles.optional}>(optional)</span>}
-          </label>
-          {infoTooltip && (
-            <Tooltip>
-              <Tooltip.Trigger
-                render={
-                  <span className={styles.helpIcon}>
-                    <InfoCircledIcon />
-                  </span>
-                }
-              />
-              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
-            </Tooltip>
-          )}
-        </div>
-      )}
-      <textarea
-        className={cx(
-          textArea({ error }),
-          disabled && styles.disabled,
-          className
-        )}
-        value={value}
-        onChange={onChange}
-        required={required}
-        disabled={disabled}
-        placeholder={placeholder}
-        style={style}
-        {...props}
-      />
-      {helperText && (
-        <span
-          className={cx(
-            styles.helperText,
-            error && styles.helperTextError,
-            disabled && styles.helperTextDisabled
-          )}
-        >
-          {helperText}
-        </span>
-      )}
-    </div>
+  const fieldContext = useFieldContext();
+  const resolvedRequired = required ?? fieldContext?.required;
+
+  const textarea = (
+    <textarea
+      className={cx(styles.textarea, disabled && styles.disabled, className)}
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      placeholder={placeholder}
+      required={resolvedRequired}
+      style={{ ...style, width }}
+      {...props}
+    />
   );
+
+  if (fieldContext) {
+    return <FieldPrimitive.Control render={textarea} />;
+  }
+
+  return textarea;
 }
 
 TextArea.displayName = 'TextArea';
-
-export { TextArea };
diff --git a/packages/raystack/figma/input.figma.tsx b/packages/raystack/figma/input.figma.tsx
index 605d6e4f9..53e63c581 100644
--- a/packages/raystack/figma/input.figma.tsx
+++ b/packages/raystack/figma/input.figma.tsx
@@ -1,8 +1,9 @@
 import figma from '@figma/code-connect';
+import { Field } from '../components/field';
 import { InputField } from '../components/input-field';
 
 figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
-  imports: ["import { InputField } from '@raystack/apsara'"],
+  imports: ["import { Field, InputField } from '@raystack/apsara'"],
   props: {
     prefix: figma.enum('Variant', {
       Prefix: figma.textContent('Prefix')
@@ -34,12 +35,21 @@ figma.connect(InputField, '<FIGMA_LINK>?node-id=1-297', {
       true: figma.textContent('Label'),
       false: undefined
     }),
-    helperText: figma.boolean('Helper text', {
+    description: figma.boolean('Helper text', {
       true: figma.textContent('Helper Text'),
       false: undefined
     }),
     optional: figma.boolean('Optional'),
     leadingIcon: figma.instance('Leading Icon')
   },
-  example: props => <InputField {...props} />
+  example: ({ label, description, optional, ...props }) => {
+    if (label || description || optional) {
+      return (
+        <Field label={label} description={description} required={!optional}>
+          <InputField {...props} />
+        </Field>
+      );
+    }
+    return <InputField {...props} />;
+  }
 });
diff --git a/packages/raystack/figma/textarea.tsx b/packages/raystack/figma/textarea.tsx
index e36794a7d..428285e3f 100644
--- a/packages/raystack/figma/textarea.tsx
+++ b/packages/raystack/figma/textarea.tsx
@@ -1,8 +1,9 @@
 import figma from '@figma/code-connect';
+import { Field } from '../components/field';
 import { TextArea } from '../components/text-area';
 
 figma.connect(TextArea, '<FIGMA_LINK>?node-id=180-585', {
-  imports: ["import { TextArea } from '@raystack/apsara'"],
+  imports: ["import { Field, TextArea } from '@raystack/apsara'"],
   props: {
     placeholder: figma.enum('State', {
       Default: figma.textContent('Place holder'),
@@ -17,11 +18,20 @@ figma.connect(TextArea, '<FIGMA_LINK>?node-id=180-585', {
       true: figma.textContent('Label'),
       false: undefined
     }),
-    helperText: figma.boolean('Helper text', {
+    description: figma.boolean('Helper text', {
       true: figma.textContent('Helper Text'),
       false: undefined
     }),
     isOptional: figma.boolean('Optional')
   },
-  example: props => <TextArea {...props} />
+  example: ({ label, description, isOptional, ...props }) => {
+    if (label || description || isOptional) {
+      return (
+        <Field label={label} description={description} required={!isOptional}>
+          <TextArea {...props} />
+        </Field>
+      );
+    }
+    return <TextArea {...props} />;
+  }
 });
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 073879d90..36933d4f9 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -33,8 +33,11 @@ export {
 export { Dialog } from './components/dialog';
 export { Drawer } from './components/drawer';
 export { EmptyState } from './components/empty-state';
+export { Field } from './components/field';
+export { Fieldset } from './components/fieldset';
 export { FilterChip } from './components/filter-chip';
 export { Flex } from './components/flex';
+export { Form } from './components/form';
 export { Grid } from './components/grid';
 export { Headline } from './components/headline';
 export { IconButton } from './components/icon-button';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b5a678e3..2cd51690c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       react-dom:
         specifier: ^19.2.1
         version: 19.2.1(react@19.2.1)
+      react-hook-form:
+        specifier: ^7.72.1
+        version: 7.72.1(react@19.2.1)
       react-live:
         specifier: ^4.1.8
         version: 4.1.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -7507,6 +7510,12 @@ packages:
   react-error-overlay@6.0.9:
     resolution: {integrity: sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==}
 
+  react-hook-form@7.72.1:
+    resolution: {integrity: sha512-RhwBoy2ygeVZje+C+bwJ8g0NjTdBmDlJvAUHTxRjTmSUKPYsKfMphkS2sgEMotsY03bP358yEYlnUeZy//D9Ig==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -10899,6 +10908,7 @@ snapshots:
       '@parcel/types': 2.12.0(@parcel/core@2.12.0)
     transitivePeerDependencies:
       - '@parcel/core'
+      - '@swc/helpers'
 
   '@parcel/plugin@2.9.2(@parcel/core@2.12.0)':
     dependencies:
@@ -17366,6 +17376,10 @@ snapshots:
 
   react-error-overlay@6.0.9: {}
 
+  react-hook-form@7.72.1(react@19.2.1):
+    dependencies:
+      react: 19.2.1
+
   react-is@17.0.2: {}
 
   react-live@4.1.8(react-dom@19.2.1(react@19.2.1))(react@19.2.1):