diff --git a/apps/www/src/components/playground/checkbox-examples.tsx b/apps/www/src/components/playground/checkbox-examples.tsx
index a7e8ece5e..10b24b24a 100644
--- a/apps/www/src/components/playground/checkbox-examples.tsx
+++ b/apps/www/src/components/playground/checkbox-examples.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '@raystack/apsara';
+import { Checkbox, Field, Flex, Text } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function CheckboxExamples() {
@@ -20,15 +20,21 @@ export function CheckboxExamples() {
           <Flex direction='column' gap='small'>
             <Flex gap='small' align='center'>
               <Checkbox name='apple' id='pg-apple' />
-              <label htmlFor='pg-apple'>Apple</label>
+              <Field.Label orientation='horizontal' htmlFor='pg-apple'>
+                Apple
+              </Field.Label>
             </Flex>
             <Flex gap='small' align='center'>
               <Checkbox name='banana' id='pg-banana' />
-              <label htmlFor='pg-banana'>Banana</label>
+              <Field.Label orientation='horizontal' htmlFor='pg-banana'>
+                Banana
+              </Field.Label>
             </Flex>
             <Flex gap='small' align='center'>
               <Checkbox name='cherry' id='pg-cherry' />
-              <label htmlFor='pg-cherry'>Cherry</label>
+              <Field.Label orientation='horizontal' htmlFor='pg-cherry'>
+                Cherry
+              </Field.Label>
             </Flex>
           </Flex>
         </Checkbox.Group>
diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index 22d903501..3d6ad6d12 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -30,7 +30,6 @@ export * from './icon-button-examples';
 export * from './image-examples';
 export * from './indicator-examples';
 export * from './input-field-examples';
-export * from './label-examples';
 export * from './link-examples';
 export * from './list-examples';
 export * from './menu-examples';
diff --git a/apps/www/src/components/playground/label-examples.tsx b/apps/www/src/components/playground/label-examples.tsx
deleted file mode 100644
index be1f98307..000000000
--- a/apps/www/src/components/playground/label-examples.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-
-import { Flex, Label } from '@raystack/apsara';
-import PlaygroundLayout from './playground-layout';
-
-export function LabelExamples() {
-  return (
-    <PlaygroundLayout title='Label'>
-      <Flex gap='extra-large' align='center' wrap='wrap'>
-        <Label size='small'>Small Label</Label>
-        <Label size='medium'>Medium Label</Label>
-        <Label size='large'>Large Label</Label>
-        <Label size='medium' required>
-          Required Field
-        </Label>
-        <Label size='medium' required requiredIndicator=' (Required)'>
-          Required Field
-        </Label>
-      </Flex>
-    </PlaygroundLayout>
-  );
-}
diff --git a/apps/www/src/components/playground/radio-examples.tsx b/apps/www/src/components/playground/radio-examples.tsx
index dbe0a103b..661d26f7b 100644
--- a/apps/www/src/components/playground/radio-examples.tsx
+++ b/apps/www/src/components/playground/radio-examples.tsx
@@ -1,27 +1,33 @@
 'use client';
 
-import { Flex, Radio } from '@raystack/apsara';
+import { Field, Flex, Radio } from '@raystack/apsara';
 import PlaygroundLayout from './playground-layout';
 
 export function RadioExamples() {
   return (
     <PlaygroundLayout title='Radio'>
-      <Radio defaultValue='2'>
+      <Radio.Group defaultValue='2'>
         <Flex gap='large'>
           <Flex gap='small' align='center'>
-            <Radio.Item value='1' id='P1' />
-            <label htmlFor='P1'>Option One</label>
+            <Radio value='1' id='P1' />
+            <Field.Label orientation='horizontal' htmlFor='P1'>
+              Option One
+            </Field.Label>
           </Flex>
           <Flex gap='small' align='center'>
-            <Radio.Item value='2' id='P2' />
-            <label htmlFor='P2'>Option Two</label>
+            <Radio value='2' id='P2' />
+            <Field.Label orientation='horizontal' htmlFor='P2'>
+              Option Two
+            </Field.Label>
           </Flex>
           <Flex gap='small' align='center'>
-            <Radio.Item value='3' id='P3' disabled />
-            <label htmlFor='P3'>Option Three</label>
+            <Radio value='3' id='P3' disabled />
+            <Field.Label orientation='horizontal' htmlFor='P3'>
+              Option Three
+            </Field.Label>
           </Flex>
         </Flex>
-      </Radio>
+      </Radio.Group>
     </PlaygroundLayout>
   );
 }
diff --git a/apps/www/src/content/docs/components/field/props.ts b/apps/www/src/content/docs/components/field/props.ts
index 1391c3d31..74f3ba882 100644
--- a/apps/www/src/content/docs/components/field/props.ts
+++ b/apps/www/src/content/docs/components/field/props.ts
@@ -52,6 +52,13 @@ export interface FieldLabelProps {
    */
   required?: boolean;
 
+  /**
+   * Layout direction of the label relative to the control it labels.
+   * Use `horizontal` when placing the label inline next to a Radio or Checkbox.
+   * @defaultValue "vertical"
+   */
+  orientation?: 'vertical' | 'horizontal';
+
   /** Additional CSS class names. */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/label/demo.ts b/apps/www/src/content/docs/components/label/demo.ts
deleted file mode 100644
index f7ae0bc6f..000000000
--- a/apps/www/src/content/docs/components/label/demo.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import { getPropsString } from '@/lib/utils';
-
-export const getCode = (props: any) => {
-  const { children, ...rest } = props;
-  return `<Label${getPropsString(rest)}>${children}</Label>`;
-};
-
-export const playground = {
-  type: 'playground',
-  controls: {
-    size: {
-      type: 'select',
-      options: ['small', 'medium', 'large'],
-      defaultValue: 'small'
-    },
-    required: { type: 'checkbox', defaultValue: false },
-    requiredIndicator: { type: 'text', defaultValue: '*' },
-    children: { type: 'text', initialValue: 'Label' }
-  },
-  getCode
-};
-
-export const sizeDemo = {
-  type: 'code',
-  code: `
-  <Flex gap="large" align="center">
-    <Label size="small">Small Label</Label>
-    <Label size="medium">Medium Label</Label>
-    <Label size="large">Large Label</Label>
-  </Flex>`
-};
-export const requiredDemo = {
-  type: 'code',
-  code: `
-  <Flex gap="large" align="center">
-    <Label size="medium" required>
-      Required Field
-      </Label>
-      <Label size="medium" required requiredIndicator=" (Required)">
-      Required Field
-    </Label>
-  </Flex>`
-};
diff --git a/apps/www/src/content/docs/components/label/index.mdx b/apps/www/src/content/docs/components/label/index.mdx
deleted file mode 100644
index cec826f80..000000000
--- a/apps/www/src/content/docs/components/label/index.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: Label
-description: A text label component that provides names for form controls.
-source: packages/raystack/components/label
----
-
-import { playground, requiredDemo, sizeDemo } from "./demo.ts";
-
-<Demo data={playground} />
-
-## Anatomy
-
-Import and assemble the component:
-
-```tsx
-import { Label } from '@raystack/apsara'
-
-<Label />
-```
-
-## API Reference
-
-Renders a text label for form elements.
-
-<auto-type-table path="./props.ts" name="LabelProps" />
-
-## Examples
-
-### Size
-
-Labels have 3 different sizes.
-
-<Demo data={sizeDemo} />
-
-### Required
-
-Labels can indicate required fields with either a default asterisk or custom text.
-
-<Demo data={requiredDemo} />
-
-## Accessibility
-
-The Label component is designed with accessibility in mind:
-
-- Uses semantic HTML `<label>` element
-- Supports programmatic association with form controls via `htmlFor`
-- Required indicators are properly hidden from screen readers
-- Maintains WCAG compliant color contrast ratios
-- Supports keyboard navigation when used with form controls
diff --git a/apps/www/src/content/docs/components/label/props.ts b/apps/www/src/content/docs/components/label/props.ts
deleted file mode 100644
index 9c84dbb0b..000000000
--- a/apps/www/src/content/docs/components/label/props.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export interface LabelProps {
-  /**
-   * Controls the size of the label.
-   * @default "small"
-   */
-  size?: 'small' | 'medium' | 'large';
-
-  /** When true, shows a required field indicator. */
-  required?: boolean;
-
-  /**
-   * Customizes the required field indicator.
-   * @default "*"
-   */
-  requiredIndicator?: string;
-
-  /** Associates the label with a form control using its ID. */
-  htmlFor?: string;
-
-  /** Additional CSS class names. */
-  className?: string;
-}
diff --git a/packages/raystack/components/field/__tests__/field.test.tsx b/packages/raystack/components/field/__tests__/field.test.tsx
index d4cfab9ea..4dfc8ac59 100644
--- a/packages/raystack/components/field/__tests__/field.test.tsx
+++ b/packages/raystack/components/field/__tests__/field.test.tsx
@@ -158,6 +158,38 @@ describe('Field', () => {
       expect(screen.getByText('Label')).toHaveClass('custom-label');
       expect(screen.getByText('Desc')).toHaveClass('custom-desc');
     });
+
+    it('does not apply horizontal class when orientation is vertical (default)', () => {
+      render(
+        <Field>
+          <Field.Label>Label</Field.Label>
+        </Field>
+      );
+      expect(screen.getByText('Label')).not.toHaveClass(
+        styles['label-horizontal']
+      );
+    });
+
+    it('applies horizontal class when orientation="horizontal"', () => {
+      render(
+        <Field>
+          <Field.Label orientation='horizontal'>Label</Field.Label>
+        </Field>
+      );
+      expect(screen.getByText('Label')).toHaveClass(styles['label-horizontal']);
+    });
+
+    it('associates Field.Label with control via htmlFor when used inline', () => {
+      render(
+        <>
+          <Field.Label orientation='horizontal' htmlFor='radio-1'>
+            Option
+          </Field.Label>
+          <input type='radio' id='radio-1' />
+        </>
+      );
+      expect(screen.getByLabelText('Option')).toBeInTheDocument();
+    });
   });
 
   describe('Children rendering', () => {
diff --git a/packages/raystack/components/field/field-misc.tsx b/packages/raystack/components/field/field-misc.tsx
index b9112ef17..2ba0ade6e 100644
--- a/packages/raystack/components/field/field-misc.tsx
+++ b/packages/raystack/components/field/field-misc.tsx
@@ -1,28 +1,50 @@
 import { Field as FieldPrimitive } from '@base-ui/react/field';
 import { cx } from 'class-variance-authority';
 import styles from './field.module.css';
+import { useFieldContext } from './use-field-context';
 
 export interface FieldLabelProps extends FieldPrimitive.Label.Props {
   required?: boolean;
+  /**
+   * Layout direction of the label relative to the control it labels.
+   * Use `horizontal` when placing the label inline next to a Radio or Checkbox.
+   * @defaultValue 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal';
 }
 
 export function FieldLabel({
   className,
   ref,
   required,
+  orientation = 'vertical',
   children,
   ...props
 }: FieldLabelProps) {
+  const fieldContext = useFieldContext();
+  const mergedClassName = cx(
+    styles.label,
+    orientation === 'horizontal' && styles['label-horizontal'],
+    className
+  );
+
+  const optionalIndicator = required === false && (
+    <span className={styles.optional}>(optional)</span>
+  );
+
+  if (!fieldContext) {
+    return (
+      <label ref={ref} className={mergedClassName} {...props}>
+        {children}
+        {optionalIndicator}
+      </label>
+    );
+  }
+
   return (
-    <FieldPrimitive.Label
-      ref={ref}
-      className={cx(styles.label, className)}
-      {...props}
-    >
+    <FieldPrimitive.Label ref={ref} className={mergedClassName} {...props}>
       {children}
-      {required === false && (
-        <span className={styles.optional}>(optional)</span>
-      )}
+      {optionalIndicator}
     </FieldPrimitive.Label>
   );
 }
diff --git a/packages/raystack/components/field/field.module.css b/packages/raystack/components/field/field.module.css
index 00400b431..6d61cab36 100644
--- a/packages/raystack/components/field/field.module.css
+++ b/packages/raystack/components/field/field.module.css
@@ -14,10 +14,19 @@
   padding-bottom: var(--rs-space-2);
 }
 
+.label-horizontal {
+  padding-bottom: 0;
+  cursor: pointer;
+}
+
 .label[data-disabled] {
   color: var(--rs-color-foreground-base-tertiary);
 }
 
+.label-horizontal[data-disabled] {
+  cursor: not-allowed;
+}
+
 .optional {
   color: var(--rs-color-foreground-base-tertiary);
   font-weight: var(--rs-font-weight-regular);
diff --git a/packages/raystack/components/label/__tests__/label.test.tsx b/packages/raystack/components/label/__tests__/label.test.tsx
deleted file mode 100644
index e9b7b32fe..000000000
--- a/packages/raystack/components/label/__tests__/label.test.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Label } from '../label';
-import styles from '../label.module.css';
-
-describe('Label', () => {
-  describe('Basic Rendering', () => {
-    it('renders as label element', () => {
-      render(<Label>Field Label</Label>);
-      expect(screen.getByText('Field Label').tagName).toBe('LABEL');
-    });
-
-    it('renders children text', () => {
-      render(<Label>Username</Label>);
-      expect(screen.getByText('Username')).toBeInTheDocument();
-    });
-
-    it('applies base label class', () => {
-      render(<Label>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).toHaveClass(styles.label);
-    });
-
-    it('applies custom className', () => {
-      render(<Label className='custom-label'>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).toHaveClass('custom-label');
-      expect(label).toHaveClass(styles.label);
-    });
-  });
-
-  describe('Sizes', () => {
-    const sizes = ['small', 'medium', 'large'] as const;
-
-    it.each(sizes)('renders %s size correctly', size => {
-      render(<Label size={size}>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).toHaveClass(styles[`label-${size}`]);
-    });
-
-    it('defaults to small size', () => {
-      render(<Label>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).toHaveClass(styles['label-small']);
-    });
-  });
-
-  describe('Required Indicator', () => {
-    it('shows required indicator when required', () => {
-      render(<Label required>Field</Label>);
-      expect(screen.getByText('*')).toBeInTheDocument();
-    });
-
-    it('does not show indicator when not required', () => {
-      render(<Label>Field</Label>);
-      expect(screen.queryByText('*')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('HTML Attributes', () => {
-    it('supports htmlFor attribute', () => {
-      render(<Label htmlFor='username-input'>Username</Label>);
-      const label = screen.getByText('Username');
-      expect(label).toHaveAttribute('for', 'username-input');
-    });
-
-    it('works without htmlFor', () => {
-      render(<Label>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).not.toHaveAttribute('for');
-    });
-    it('supports id attribute', () => {
-      render(<Label id='form-label'>Label</Label>);
-      const label = screen.getByText('Label');
-      expect(label).toHaveAttribute('id', 'form-label');
-    });
-
-    it('supports data attributes', () => {
-      render(<Label data-testid='test-label'>Label</Label>);
-      expect(screen.getByTestId('test-label')).toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/raystack/components/label/index.tsx b/packages/raystack/components/label/index.tsx
deleted file mode 100644
index a673d7d1e..000000000
--- a/packages/raystack/components/label/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Label } from "./label";
\ No newline at end of file
diff --git a/packages/raystack/components/label/label.module.css b/packages/raystack/components/label/label.module.css
deleted file mode 100644
index 2c5ae871d..000000000
--- a/packages/raystack/components/label/label.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.label {
-  display: block;
-  line-height: 1;
-  margin: 0;
-  font-weight: var(--rs-font-weight-regular);
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.label-small {
-  font-size: var(--rs-font-size-mini);
-  font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-}
-
-.label-medium {
-  font-size: var(--rs-font-size-small);
-  font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-small);
-  letter-spacing: var(--rs-letter-spacing-small);
-}
-
-.label-large {
-  font-size: var(--rs-font-size-regular);
-  font-weight: var(--rs-font-weight-medium);
-  line-height: var(--rs-line-height-regular);
-  letter-spacing: var(--rs-letter-spacing-regular);
-}
-
-.required-indicator {
-  margin-left: var(--rs-space-1);
-  font-size: var(--rs-font-size-mini);
-  font-weight: var(--rs-font-weight-regular);
-  line-height: var(--rs-line-height-mini);
-  letter-spacing: var(--rs-letter-spacing-mini);
-  color: var(--rs-color-foreground-danger-primary);
-}
-
-/* For custom required text (not the star) */
-.required-indicator:not(:only-child) {
-  color: var(--rs-color-foreground-base-tertiary);
-}
\ No newline at end of file
diff --git a/packages/raystack/components/label/label.tsx b/packages/raystack/components/label/label.tsx
deleted file mode 100644
index e50f36959..000000000
--- a/packages/raystack/components/label/label.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ComponentProps, PropsWithChildren } from 'react';
-
-import styles from './label.module.css';
-
-const label = cva(styles.label, {
-  variants: {
-    size: {
-      small: styles['label-small'],
-      medium: styles['label-medium'],
-      large: styles['label-large']
-    },
-    required: {
-      true: styles['label-required']
-    }
-  },
-  defaultVariants: {
-    size: 'small',
-    required: false
-  }
-});
-
-interface LabelProps
-  extends PropsWithChildren<VariantProps<typeof label>>,
-    Omit<ComponentProps<'label'>, 'required'> {
-  required?: boolean;
-  requiredIndicator?: string;
-  htmlFor?: string;
-}
-
-export function Label({
-  children,
-  className,
-  size,
-  required,
-  requiredIndicator = '*',
-  htmlFor,
-  ...props
-}: LabelProps) {
-  return (
-    <label
-      className={label({ size, required, className })}
-      htmlFor={htmlFor}
-      {...props}
-    >
-      {children}
-      {required && (
-        <span
-          className={styles['required-indicator']}
-          aria-hidden='true'
-          role='presentation'
-        >
-          {requiredIndicator}
-        </span>
-      )}
-    </label>
-  );
-}
-
-Label.displayName = 'Label';
-
-export type { LabelProps };
diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css
index f19286612..04b954ec5 100644
--- a/packages/raystack/components/number-field/number-field.module.css
+++ b/packages/raystack/components/number-field/number-field.module.css
@@ -74,6 +74,11 @@
 
 .scrub-area-label {
   cursor: ew-resize;
+  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);
 }
 
 .scrub-area-cursor {
diff --git a/packages/raystack/components/number-field/number-field.tsx b/packages/raystack/components/number-field/number-field.tsx
index 67e99592c..344a7bf9a 100644
--- a/packages/raystack/components/number-field/number-field.tsx
+++ b/packages/raystack/components/number-field/number-field.tsx
@@ -5,7 +5,6 @@ import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { ComponentProps, createContext, useContext, useId } from 'react';
 import { useFieldContext } from '../field';
-import { Label } from '../label';
 import styles from './number-field.module.css';
 
 const NumberFieldContext = createContext<{ fieldId: string } | null>(null);
@@ -118,9 +117,9 @@ function NumberFieldScrubArea({
       className={cx(styles['scrub-area'], className)}
       {...props}
     >
-      <Label className={styles['scrub-area-label']} htmlFor={context?.fieldId}>
+      <label className={styles['scrub-area-label']} htmlFor={context?.fieldId}>
         {label}
-      </Label>
+      </label>
       <NumberFieldPrimitive.ScrubAreaCursor
         className={styles['scrub-area-cursor']}
       >
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index cd849b3b3..9c868a8aa 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -45,7 +45,6 @@ export { IconButton } from './components/icon-button';
 export { Image } from './components/image';
 export { Indicator } from './components/indicator';
 export { InputField } from './components/input-field';
-export { Label } from './components/label';
 export { Link } from './components/link';
 export { List } from './components/list';
 export { Menu } from './components/menu';