chore: remove standalone Label, add orientation to Field.Label

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>

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';

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>
   );
 }

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;
 }

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', () => {

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>
   );
 }

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);