From 57e7fac384a4e7185ff523047f4afcba5cf950ef Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 1 Oct 2026 16:50:37 -0400
Subject: [PATCH 1/2] feat(mosaic): support checkboxes in Field with a
 horizontal orientation

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../mosaic-field-horizontal-checkbox.md       |  2 +
 .../src/components/checkbox/checkbox.tsx      | 28 +++++++++-
 .../src/components/field/field.context.tsx    |  9 ++-
 .../src/components/field/field.styles.ts      |  9 +++
 .../src/components/field/field.test.tsx       | 55 +++++++++++++++++++
 .../mosaic/src/components/field/field.tsx     | 46 ++++++++++++++--
 .../swingset/src/stories/field.component.mdx  | 21 ++++++-
 .../src/stories/field.component.stories.tsx   | 22 ++++++++
 8 files changed, 182 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/mosaic-field-horizontal-checkbox.md

diff --git a/.changeset/mosaic-field-horizontal-checkbox.md b/.changeset/mosaic-field-horizontal-checkbox.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-field-horizontal-checkbox.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/checkbox/checkbox.tsx b/packages/mosaic/src/components/checkbox/checkbox.tsx
index a5e25adb302..16492d09efc 100644
--- a/packages/mosaic/src/components/checkbox/checkbox.tsx
+++ b/packages/mosaic/src/components/checkbox/checkbox.tsx
@@ -5,6 +5,7 @@ import type { MosaicStyleProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../utils/focus-outline.styles';
 import { reset } from '../../utils/reset.styles';
+import { useOptionalFieldControlProps } from '../field/field.context';
 import { Icon } from '../icon';
 import { checkboxInputMarker } from './checkbox.markers.stylex';
 import { indicatorSizes, sizes, styles } from './checkbox.styles';
@@ -16,9 +17,29 @@ export interface CheckboxProps
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function MosaicCheckbox(
-  { size = 'md', indeterminate = false, disabled, xstyle, ...rest },
+  {
+    size = 'md',
+    indeterminate = false,
+    disabled: disabledProp,
+    required: requiredProp,
+    id,
+    'aria-invalid': ariaInvalid,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    xstyle,
+    ...rest
+  },
   ref,
 ) {
+  const fieldProps = useOptionalFieldControlProps({
+    id,
+    disabled: disabledProp,
+    required: requiredProp,
+    ariaInvalid,
+    ariaLabelledBy,
+    ariaDescribedBy,
+  });
+  const disabled = fieldProps?.disabled ?? disabledProp;
   const setInputRef = React.useCallback(
     (node: HTMLInputElement | null) => {
       if (node) {
@@ -44,6 +65,11 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
         ref={setInputRef}
         type='checkbox'
         disabled={disabled}
+        required={fieldProps?.required ?? requiredProp}
+        id={fieldProps?.id ?? id}
+        aria-invalid={fieldProps?.['aria-invalid'] ?? ariaInvalid}
+        aria-labelledby={fieldProps?.['aria-labelledby'] ?? ariaLabelledBy}
+        aria-describedby={fieldProps?.['aria-describedby'] ?? ariaDescribedBy}
         {...mergeStyleProps(
           themeProps('checkbox-input'),
           stylex.props(
diff --git a/packages/mosaic/src/components/field/field.context.tsx b/packages/mosaic/src/components/field/field.context.tsx
index 514e0f0541e..d1895463cea 100644
--- a/packages/mosaic/src/components/field/field.context.tsx
+++ b/packages/mosaic/src/components/field/field.context.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 /** `label` for natively labelable controls; `span` for a control a `<label>` would activate on click. */
 export type FieldLabelElementType = 'label' | 'span';
 
+export type FieldOrientation = 'vertical' | 'horizontal';
+
 interface RegisteredControl {
   id: string | null;
   labelElementType: FieldLabelElementType;
@@ -12,6 +14,7 @@ interface RegisteredControl {
 interface FieldContextValue {
   controlId: string;
   labelElementType: FieldLabelElementType;
+  orientation: FieldOrientation;
   disabled: boolean;
   required: boolean;
   invalid: boolean;
@@ -30,12 +33,13 @@ export function mergeIds(...values: Array<string | undefined>): string | undefin
 }
 
 interface FieldProviderProps extends React.PropsWithChildren {
+  orientation: FieldOrientation;
   disabled: boolean;
   required: boolean;
   invalid: boolean;
 }
 
-export function FieldProvider({ children, disabled, required, invalid }: FieldProviderProps) {
+export function FieldProvider({ children, orientation, disabled, required, invalid }: FieldProviderProps) {
   const generatedId = React.useId();
   const defaultControlId = `cl-field-${generatedId}`;
   const [controlId, setControlId] = React.useState(defaultControlId);
@@ -73,6 +77,7 @@ export function FieldProvider({ children, disabled, required, invalid }: FieldPr
     () => ({
       controlId,
       labelElementType,
+      orientation,
       disabled,
       required,
       invalid,
@@ -82,7 +87,7 @@ export function FieldProvider({ children, disabled, required, invalid }: FieldPr
       setLabelIds,
       setMessageIds,
     }),
-    [controlId, labelElementType, disabled, required, invalid, labelIds, messageIds, registerControlId],
+    [controlId, labelElementType, orientation, disabled, required, invalid, labelIds, messageIds, registerControlId],
   );
 
   return <FieldContext.Provider value={context}>{children}</FieldContext.Provider>;
diff --git a/packages/mosaic/src/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts
index 725113a9037..8aad1cdad58 100644
--- a/packages/mosaic/src/components/field/field.styles.ts
+++ b/packages/mosaic/src/components/field/field.styles.ts
@@ -8,6 +8,15 @@ export const styles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
   },
+  horizontal: {
+    gap: `${space['1']} ${space['3']}`,
+    alignItems: 'center',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr',
+  },
+  horizontalContent: {
+    gridColumn: '2',
+  },
   label: {
     color: colorVars['--cl-color-brand'],
     fontWeight: fontWeightVars['--cl-font-medium'],
diff --git a/packages/mosaic/src/components/field/field.test.tsx b/packages/mosaic/src/components/field/field.test.tsx
index 8d5a1e61c10..97112e78bfe 100644
--- a/packages/mosaic/src/components/field/field.test.tsx
+++ b/packages/mosaic/src/components/field/field.test.tsx
@@ -6,6 +6,7 @@ import { hydrateRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
+import { Checkbox } from '../checkbox';
 import { Input } from '../input';
 import { Select } from '../select';
 import { Field } from './field';
@@ -175,6 +176,60 @@ describe('Mosaic Field', () => {
     expect(inside).not.toHaveClass('cl-field-control');
   });
 
+  it('associates a checkbox laid out beside its label', async () => {
+    render(
+      <Field.Root
+        orientation='horizontal'
+        data-testid='root'
+      >
+        <Checkbox />
+        <Field.Label>Sign out of all devices</Field.Label>
+        <Field.Description>Recommended after changing your password.</Field.Description>
+      </Field.Root>,
+    );
+
+    const checkbox = screen.getByRole('checkbox', { name: 'Sign out of all devices' });
+    expect(screen.getByTestId('root')).toHaveAttribute('data-orientation', 'horizontal');
+    expect(checkbox).toHaveAttribute(
+      'aria-describedby',
+      screen.getByText('Recommended after changing your password.').id,
+    );
+    await userEvent.click(screen.getByText('Sign out of all devices'));
+    expect(checkbox).toBeChecked();
+  });
+
+  it('toggles a checkbox wrapped in its label', async () => {
+    render(
+      <Field.Root>
+        <Field.Label>
+          <Checkbox />
+          Stay signed in
+        </Field.Label>
+      </Field.Root>,
+    );
+
+    await userEvent.click(screen.getByText('Stay signed in'));
+    expect(screen.getByRole('checkbox', { name: 'Stay signed in' })).toBeChecked();
+  });
+
+  it('propagates semantic state to a checkbox', () => {
+    render(
+      <Field.Root
+        disabled
+        required
+        invalid
+      >
+        <Checkbox />
+      </Field.Root>,
+    );
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+    expect(checkbox).toBeRequired();
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+    expect(checkbox.parentElement).toHaveAttribute('data-disabled');
+  });
+
   it('propagates semantic state while preserving explicit control props', () => {
     render(
       <>
diff --git a/packages/mosaic/src/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx
index 28b5c1470b0..e0b68f6de4d 100644
--- a/packages/mosaic/src/components/field/field.tsx
+++ b/packages/mosaic/src/components/field/field.tsx
@@ -11,6 +11,7 @@ import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import { visuallyHidden } from '../../utils/visually-hidden.styles';
+import type { FieldOrientation } from './field.context';
 import {
   FieldMessageProvider,
   FieldProvider,
@@ -20,6 +21,10 @@ import {
 } from './field.context';
 import { styles } from './field.styles';
 
+function contentPlacement(context: ReturnType<typeof useOptionalFieldContext>) {
+  return context?.orientation === 'horizontal' && styles.horizontalContent;
+}
+
 function useNativeLabelWarning(label: HTMLElement | null) {
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && label && label.tagName !== 'LABEL') {
@@ -30,13 +35,15 @@ function useNativeLabelWarning(label: HTMLElement | null) {
 
 /** Props for a field container that associates exactly one form control. */
 export interface FieldRootProps extends MosaicComponentProps<'div'> {
+  /** `horizontal` places the control beside the label, with supporting text beneath the label. */
+  orientation?: FieldOrientation;
   disabled?: boolean;
   required?: boolean;
   invalid?: boolean;
 }
 
 const Root = React.forwardRef<HTMLDivElement, FieldRootProps>(function MosaicFieldRoot(
-  { render, xstyle, disabled = false, required = false, invalid = false, ...rest },
+  { render, xstyle, orientation = 'vertical', disabled = false, required = false, invalid = false, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -44,12 +51,17 @@ const Root = React.forwardRef<HTMLDivElement, FieldRootProps>(function MosaicFie
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('field-root'), stylex.props(reset.base, styles.root, xstyle), rest),
+      ...mergeStyleProps(
+        themeProps('field-root', { orientation }),
+        stylex.props(reset.base, styles.root, orientation === 'horizontal' && styles.horizontal, xstyle),
+        rest,
+      ),
     },
   });
 
   return (
     <FieldProvider
+      orientation={orientation}
       disabled={disabled}
       required={required}
       invalid={invalid}
@@ -98,6 +110,7 @@ const Label = React.forwardRef<HTMLElement, FieldLabelProps>(function MosaicFiel
           typographyStyles.base,
           typographySizes.sm,
           styles.label,
+          contentPlacement(context),
           isVisuallyHidden && visuallyHidden.base,
           xstyle,
         ),
@@ -128,7 +141,15 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
     props: {
       ...mergeStyleProps(
         themeProps('field-description'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.description, xstyle),
+        stylex.props(
+          reset.base,
+          typographyStyles.base,
+          typographySizes.xs,
+          styles.message,
+          styles.description,
+          contentPlacement(context),
+          xstyle,
+        ),
         rest,
       ),
       id,
@@ -143,6 +164,7 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
   { render, xstyle, children, ...rest },
   ref,
 ) {
+  const context = useOptionalFieldContext();
   const entries = React.useRef(new Map<symbol, HTMLElement>());
   const [active, setActive] = React.useState<HTMLElement | null>(null);
   const register = React.useCallback((key: symbol, element: HTMLElement | null) => {
@@ -163,7 +185,13 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
     props: {
       ...mergeStyleProps(
         themeProps('field-message'),
-        stylex.props(reset.base, feedbackStyles.collapse, feedbackHeight.measured(height), xstyle),
+        stylex.props(
+          reset.base,
+          feedbackStyles.collapse,
+          feedbackHeight.measured(height),
+          contentPlacement(context),
+          xstyle,
+        ),
         { role: 'status', ...transitionProps },
         rest,
       ),
@@ -207,7 +235,15 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
     props: {
       ...mergeStyleProps(
         themeProps(slot),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, feedbackStyles.message, color, xstyle),
+        stylex.props(
+          reset.base,
+          typographyStyles.base,
+          typographySizes.xs,
+          feedbackStyles.message,
+          color,
+          contentPlacement(context),
+          xstyle,
+        ),
         { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
diff --git a/packages/swingset/src/stories/field.component.mdx b/packages/swingset/src/stories/field.component.mdx
index a0b2ef64be4..6fbd6fbb0ff 100644
--- a/packages/swingset/src/stories/field.component.mdx
+++ b/packages/swingset/src/stories/field.component.mdx
@@ -79,11 +79,28 @@ through `aria-labelledby` rather than `htmlFor`. Description and error relations
 Explicit `htmlFor` still renders a native `label`. `Select.Trigger` opts in; `Input` and `OTP` keep
 the native label.
 
+### Horizontal
+
+<Story
+  name='Horizontal'
+  storyModule={FieldStories}
+/>
+
+Pass `orientation='horizontal'` to `Field.Root` to place the control beside its label, as with a `Checkbox`. The description and messages sit beneath the label, aligned with its text.
+
+```tsx
+<Field.Root orientation='horizontal'>
+  <Checkbox name='signOutOfOtherSessions' />
+  <Field.Label>Sign out of all devices</Field.Label>
+  <Field.Description>Recommended after changing your password.</Field.Description>
+</Field.Root>
+```
+
 ## Parts
 
 | Part                | Stable slot class       | Description                                                                                                                                          |
 | ------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Field.Root`        | `.cl-field-root`        | Unstyled `div` and field context provider.                                                                                                           |
+| `Field.Root`        | `.cl-field-root`        | `div` that stacks its parts, or places the control beside the label when horizontal, and provides the field context.                                 |
 | `Field.Label`       | `.cl-field-label`       | Native `label` associated with the field control; a `span` that focuses the control when it cannot be natively labelled, such as a `Select` trigger. |
 | `Field.Description` | `.cl-field-description` | Supporting `p` associated with the field control.                                                                                                    |
 | `Field.Message`     | `.cl-field-message`     | Height-animated live region for the messages below.                                                                                                  |
@@ -104,4 +121,4 @@ The Mosaic field is themed with **StyleX**. Each styled part carries the stable
 }
 ```
 
-`Field.Root` ships no layout. Higher-level blocks own how its parts are arranged; for example, a settings row can provide the grid and alignment for a field. Customize an `Input` through its exposed tokens, `.cl-input`, `className`, and `style`; Field does not add control-specific styling.
+`Field.Root` only stacks its parts, or places them in two columns when horizontal; `data-orientation` reflects which. Higher-level blocks own any other arrangement; for example, a settings row can provide the grid and alignment for a field. Customize an `Input` through its exposed tokens, `.cl-input`, `className`, and `style`; Field does not add control-specific styling.
diff --git a/packages/swingset/src/stories/field.component.stories.tsx b/packages/swingset/src/stories/field.component.stories.tsx
index 3b49a98e152..5f703194f06 100644
--- a/packages/swingset/src/stories/field.component.stories.tsx
+++ b/packages/swingset/src/stories/field.component.stories.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@clerk/mosaic/components/button';
+import { Checkbox } from '@clerk/mosaic/components/checkbox';
 import { Field } from '@clerk/mosaic/components/field';
 import { Input } from '@clerk/mosaic/components/input';
 import { Select } from '@clerk/mosaic/components/select';
@@ -24,6 +25,9 @@ const styles = stylex.create({
     gap: 8,
     maxWidth: 384,
   },
+  horizontal: {
+    maxWidth: 384,
+  },
   errorStack: {
     display: 'grid',
     gap: 8,
@@ -157,3 +161,21 @@ export function WithSelect() {
     </Field.Root>
   );
 }
+
+export function Horizontal() {
+  return (
+    <Field.Root
+      orientation='horizontal'
+      xstyle={styles.horizontal}
+    >
+      <Checkbox
+        name='signOutOfOtherSessions'
+        defaultChecked
+      />
+      <Field.Label>Sign out of all devices</Field.Label>
+      <Field.Description>
+        It is recommended to sign out of all other devices which may have used your old password.
+      </Field.Description>
+    </Field.Root>
+  );
+}

From 86b1071f3c35a7efafc31336b1d9ee88da3c548f Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 1 Oct 2026 17:26:51 -0400
Subject: [PATCH 2/2] feat(mosaic): add Field.Content and align checkboxes to
 the first label line

---
 .../components/checkbox/checkbox.styles.ts    | 11 ++++
 .../src/components/checkbox/checkbox.tsx      | 12 ++--
 .../src/components/field/field.styles.ts      | 15 +++--
 .../src/components/field/field.test.tsx       | 21 ++++++-
 .../mosaic/src/components/field/field.tsx     | 60 ++++++++-----------
 .../swingset/src/stories/field.component.mdx  | 13 ++--
 .../src/stories/field.component.stories.tsx   | 36 ++++++-----
 7 files changed, 100 insertions(+), 68 deletions(-)

diff --git a/packages/mosaic/src/components/checkbox/checkbox.styles.ts b/packages/mosaic/src/components/checkbox/checkbox.styles.ts
index ad42d4e4557..38c9a7babc2 100644
--- a/packages/mosaic/src/components/checkbox/checkbox.styles.ts
+++ b/packages/mosaic/src/components/checkbox/checkbox.styles.ts
@@ -47,6 +47,12 @@ export const styles = stylex.create({
       position: 'absolute',
     },
   },
+  fieldHitTarget: {
+    '::before': {
+      inset: `calc(-1 * (${space['2']} + 1px))`,
+      display: 'block',
+    },
+  },
   indicator: {
     inset: 0,
     alignItems: 'center',
@@ -75,6 +81,11 @@ export const sizes = stylex.create({
   md: { height: space['4'], width: space['4'] },
 });
 
+export const firstLine = stylex.create({
+  sm: { marginTop: `max(0px, calc((1lh - ${space['3.5']}) / 2))` },
+  md: { marginTop: `max(0px, calc((1lh - ${space['4']}) / 2))` },
+});
+
 export const indicatorSizes = stylex.create({
   sm: { fontSize: space['2.5'] },
   md: { fontSize: space['3'] },
diff --git a/packages/mosaic/src/components/checkbox/checkbox.tsx b/packages/mosaic/src/components/checkbox/checkbox.tsx
index 16492d09efc..58e7cce643b 100644
--- a/packages/mosaic/src/components/checkbox/checkbox.tsx
+++ b/packages/mosaic/src/components/checkbox/checkbox.tsx
@@ -5,10 +5,10 @@ import type { MosaicStyleProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../utils/focus-outline.styles';
 import { reset } from '../../utils/reset.styles';
-import { useOptionalFieldControlProps } from '../field/field.context';
+import { useOptionalFieldContext, useOptionalFieldControlProps } from '../field/field.context';
 import { Icon } from '../icon';
 import { checkboxInputMarker } from './checkbox.markers.stylex';
-import { indicatorSizes, sizes, styles } from './checkbox.styles';
+import { firstLine, indicatorSizes, sizes, styles } from './checkbox.styles';
 
 export interface CheckboxProps
   extends Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size' | 'className' | 'style'>, MosaicStyleProps {
@@ -31,6 +31,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
   },
   ref,
 ) {
+  const horizontalField = useOptionalFieldContext()?.orientation === 'horizontal';
   const fieldProps = useOptionalFieldControlProps({
     id,
     disabled: disabledProp,
@@ -58,7 +59,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
     <span
       {...mergeStyleProps(
         themeProps('checkbox', { size, disabled }),
-        stylex.props(reset.base, styles.root, sizes[size], indicatorSizes[size], xstyle),
+        stylex.props(reset.base, styles.root, sizes[size], horizontalField && firstLine[size], xstyle),
       )}
     >
       <input
@@ -77,6 +78,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
             focusOutline.visible,
             styles.input,
             styles.hitTarget,
+            horizontalField && styles.fieldHitTarget,
             sizes[size],
             checkboxInputMarker,
           ),
@@ -87,7 +89,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
         aria-hidden
         {...mergeStyleProps(
           themeProps('checkbox-indicator', { state: 'checked' }),
-          stylex.props(reset.base, styles.indicator, styles.checkedIndicator),
+          stylex.props(reset.base, styles.indicator, indicatorSizes[size], styles.checkedIndicator),
         )}
       >
         <Icon
@@ -99,7 +101,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(functi
         aria-hidden
         {...mergeStyleProps(
           themeProps('checkbox-indicator', { state: 'indeterminate' }),
-          stylex.props(reset.base, styles.indicator, styles.indeterminateIndicator),
+          stylex.props(reset.base, styles.indicator, indicatorSizes[size], styles.indeterminateIndicator),
         )}
       >
         <Icon
diff --git a/packages/mosaic/src/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts
index 8aad1cdad58..01a7147ceaf 100644
--- a/packages/mosaic/src/components/field/field.styles.ts
+++ b/packages/mosaic/src/components/field/field.styles.ts
@@ -9,13 +9,16 @@ export const styles = stylex.create({
     flexDirection: 'column',
   },
   horizontal: {
-    gap: `${space['1']} ${space['3']}`,
-    alignItems: 'center',
-    display: 'grid',
-    gridTemplateColumns: 'auto 1fr',
+    gap: space['2'],
+    alignItems: 'flex-start',
+    flexDirection: 'row',
   },
-  horizontalContent: {
-    gridColumn: '2',
+  content: {
+    gap: space['1'],
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minWidth: 0,
   },
   label: {
     color: colorVars['--cl-color-brand'],
diff --git a/packages/mosaic/src/components/field/field.test.tsx b/packages/mosaic/src/components/field/field.test.tsx
index 97112e78bfe..22572b7b628 100644
--- a/packages/mosaic/src/components/field/field.test.tsx
+++ b/packages/mosaic/src/components/field/field.test.tsx
@@ -15,6 +15,7 @@ const overrides = stylex.create({
   root: { display: 'grid' },
   label: { fontWeight: 700 },
   description: { opacity: 0.8 },
+  content: { gap: '4px' },
   error: { fontWeight: 600 },
 });
 
@@ -183,13 +184,16 @@ describe('Mosaic Field', () => {
         data-testid='root'
       >
         <Checkbox />
-        <Field.Label>Sign out of all devices</Field.Label>
-        <Field.Description>Recommended after changing your password.</Field.Description>
+        <Field.Content data-testid='content'>
+          <Field.Label>Sign out of all devices</Field.Label>
+          <Field.Description>Recommended after changing your password.</Field.Description>
+        </Field.Content>
       </Field.Root>,
     );
 
     const checkbox = screen.getByRole('checkbox', { name: 'Sign out of all devices' });
     expect(screen.getByTestId('root')).toHaveAttribute('data-orientation', 'horizontal');
+    expect(screen.getByTestId('content')).toHaveClass('cl-field-content');
     expect(checkbox).toHaveAttribute(
       'aria-describedby',
       screen.getByText('Recommended after changing your password.').id,
@@ -340,6 +344,7 @@ describe('Mosaic Field', () => {
     const rootRef = React.createRef<HTMLDivElement>();
     const labelRef = React.createRef<HTMLLabelElement>();
     const descriptionRef = React.createRef<HTMLParagraphElement>();
+    const contentRef = React.createRef<HTMLDivElement>();
     const errorRef = React.createRef<HTMLParagraphElement>();
 
     render(
@@ -359,6 +364,10 @@ describe('Mosaic Field', () => {
         >
           Description
         </Field.Description>
+        <Field.Content
+          ref={contentRef}
+          data-content='field'
+        />
         <Field.Error
           ref={errorRef}
           role='status'
@@ -371,6 +380,7 @@ describe('Mosaic Field', () => {
     expect(rootRef.current).toHaveAttribute('data-root', 'field');
     expect(labelRef.current).toHaveAttribute('for', 'name');
     expect(descriptionRef.current).toHaveAttribute('title', 'Help');
+    expect(contentRef.current).toHaveAttribute('data-content', 'field');
     expect(errorRef.current).toHaveAttribute('role', 'status');
   });
 
@@ -382,11 +392,16 @@ describe('Mosaic Field', () => {
       >
         <Field.Label xstyle={overrides.label}>Email</Field.Label>
         <Field.Description xstyle={overrides.description}>Description</Field.Description>
+        <Field.Content
+          xstyle={overrides.content}
+          data-testid='content'
+        />
         <Field.Error xstyle={overrides.error}>Error</Field.Error>
       </Field.Root>,
     );
 
     expect(screen.getByTestId('root')).toHaveClass('cl-field-root', ...atoms(overrides.root));
+    expect(screen.getByTestId('content')).toHaveClass('cl-field-content', ...atoms(overrides.content));
     expect(screen.getByText('Email')).toHaveClass('cl-field-label', ...atoms(overrides.label));
     expect(screen.getByText('Description')).toHaveClass('cl-field-description', ...atoms(overrides.description));
     expect(screen.getByText('Error').closest('p')).toHaveClass('cl-field-error', ...atoms(overrides.error));
@@ -420,12 +435,14 @@ describe('Mosaic Field', () => {
       <Field.Root render={props => <section {...props} />}>
         <Field.Label render={props => <label {...props} />}>Biography</Field.Label>
         <Field.Description render={props => <div {...props} />}>Description</Field.Description>
+        <Field.Content render={props => <section {...props} />}>Content</Field.Content>
         <Field.Error render={props => <div {...props} />}>Error</Field.Error>
       </Field.Root>,
     );
 
     expect(screen.getByText('Biography').closest('section')).not.toBeNull();
     expect(screen.getByText('Description').tagName).toBe('DIV');
+    expect(screen.getByText('Content').tagName).toBe('SECTION');
     expect(screen.getByText('Error').closest('div')).toHaveClass('cl-field-error');
   });
 
diff --git a/packages/mosaic/src/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx
index e0b68f6de4d..6f792681cda 100644
--- a/packages/mosaic/src/components/field/field.tsx
+++ b/packages/mosaic/src/components/field/field.tsx
@@ -21,10 +21,6 @@ import {
 } from './field.context';
 import { styles } from './field.styles';
 
-function contentPlacement(context: ReturnType<typeof useOptionalFieldContext>) {
-  return context?.orientation === 'horizontal' && styles.horizontalContent;
-}
-
 function useNativeLabelWarning(label: HTMLElement | null) {
   React.useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && label && label.tagName !== 'LABEL') {
@@ -35,7 +31,7 @@ function useNativeLabelWarning(label: HTMLElement | null) {
 
 /** Props for a field container that associates exactly one form control. */
 export interface FieldRootProps extends MosaicComponentProps<'div'> {
-  /** `horizontal` places the control beside the label, with supporting text beneath the label. */
+  /** `horizontal` places the control beside a `Field.Content` that stacks the label and supporting text. */
   orientation?: FieldOrientation;
   disabled?: boolean;
   required?: boolean;
@@ -53,7 +49,12 @@ const Root = React.forwardRef<HTMLDivElement, FieldRootProps>(function MosaicFie
     props: {
       ...mergeStyleProps(
         themeProps('field-root', { orientation }),
-        stylex.props(reset.base, styles.root, orientation === 'horizontal' && styles.horizontal, xstyle),
+        stylex.props(
+          reset.base,
+          styles.root,
+          orientation === 'horizontal' && [typographySizes.sm, styles.horizontal],
+          xstyle,
+        ),
         rest,
       ),
     },
@@ -110,7 +111,6 @@ const Label = React.forwardRef<HTMLElement, FieldLabelProps>(function MosaicFiel
           typographyStyles.base,
           typographySizes.sm,
           styles.label,
-          contentPlacement(context),
           isVisuallyHidden && visuallyHidden.base,
           xstyle,
         ),
@@ -123,6 +123,21 @@ const Label = React.forwardRef<HTMLElement, FieldLabelProps>(function MosaicFiel
   });
 });
 
+/** Props for the container that stacks a horizontal field's label and supporting text. */
+export type FieldContentProps = MosaicComponentProps<'div'>;
+
+const Content = React.forwardRef<HTMLDivElement, FieldContentProps>(function MosaicFieldContent(
+  { render, xstyle, ...rest },
+  ref,
+) {
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: mergeStyleProps(themeProps('field-content'), stylex.props(reset.base, styles.content, xstyle), rest),
+  });
+});
+
 /** Props for supporting field text. */
 export type FieldDescriptionProps = MosaicComponentProps<'p'>;
 
@@ -141,15 +156,7 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
     props: {
       ...mergeStyleProps(
         themeProps('field-description'),
-        stylex.props(
-          reset.base,
-          typographyStyles.base,
-          typographySizes.xs,
-          styles.message,
-          styles.description,
-          contentPlacement(context),
-          xstyle,
-        ),
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.description, xstyle),
         rest,
       ),
       id,
@@ -164,7 +171,6 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
   { render, xstyle, children, ...rest },
   ref,
 ) {
-  const context = useOptionalFieldContext();
   const entries = React.useRef(new Map<symbol, HTMLElement>());
   const [active, setActive] = React.useState<HTMLElement | null>(null);
   const register = React.useCallback((key: symbol, element: HTMLElement | null) => {
@@ -185,13 +191,7 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
     props: {
       ...mergeStyleProps(
         themeProps('field-message'),
-        stylex.props(
-          reset.base,
-          feedbackStyles.collapse,
-          feedbackHeight.measured(height),
-          contentPlacement(context),
-          xstyle,
-        ),
+        stylex.props(reset.base, feedbackStyles.collapse, feedbackHeight.measured(height), xstyle),
         { role: 'status', ...transitionProps },
         rest,
       ),
@@ -235,15 +235,7 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
     props: {
       ...mergeStyleProps(
         themeProps(slot),
-        stylex.props(
-          reset.base,
-          typographyStyles.base,
-          typographySizes.xs,
-          feedbackStyles.message,
-          color,
-          contentPlacement(context),
-          xstyle,
-        ),
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, feedbackStyles.message, color, xstyle),
         { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
@@ -280,4 +272,4 @@ const FieldSuccess = React.forwardRef<HTMLParagraphElement, FieldSuccessProps>(f
 });
 
 /** Styled parts for composing an automatically associated single-control field. */
-export const Field = { Root, Label, Description, Message, Error: FieldError, Success: FieldSuccess };
+export const Field = { Root, Label, Content, Description, Message, Error: FieldError, Success: FieldSuccess };
diff --git a/packages/swingset/src/stories/field.component.mdx b/packages/swingset/src/stories/field.component.mdx
index 6fbd6fbb0ff..0c6db42e283 100644
--- a/packages/swingset/src/stories/field.component.mdx
+++ b/packages/swingset/src/stories/field.component.mdx
@@ -86,13 +86,15 @@ the native label.
   storyModule={FieldStories}
 />
 
-Pass `orientation='horizontal'` to `Field.Root` to place the control beside its label, as with a `Checkbox`. The description and messages sit beneath the label, aligned with its text.
+Pass `orientation='horizontal'` to `Field.Root` to place the control beside its label, as with a `Checkbox`. Wrap the label, description, and messages in `Field.Content` so they stack beside the control. A `Checkbox` aligns with the first line of the label.
 
 ```tsx
 <Field.Root orientation='horizontal'>
   <Checkbox name='signOutOfOtherSessions' />
-  <Field.Label>Sign out of all devices</Field.Label>
-  <Field.Description>Recommended after changing your password.</Field.Description>
+  <Field.Content>
+    <Field.Label>Sign out of all devices</Field.Label>
+    <Field.Description>Recommended after changing your password.</Field.Description>
+  </Field.Content>
 </Field.Root>
 ```
 
@@ -100,8 +102,9 @@ Pass `orientation='horizontal'` to `Field.Root` to place the control beside its
 
 | Part                | Stable slot class       | Description                                                                                                                                          |
 | ------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Field.Root`        | `.cl-field-root`        | `div` that stacks its parts, or places the control beside the label when horizontal, and provides the field context.                                 |
+| `Field.Root`        | `.cl-field-root`        | `div` that stacks its parts, or places the control beside `Field.Content` when horizontal, and provides the field context.                           |
 | `Field.Label`       | `.cl-field-label`       | Native `label` associated with the field control; a `span` that focuses the control when it cannot be natively labelled, such as a `Select` trigger. |
+| `Field.Content`     | `.cl-field-content`     | `div` that stacks the label, description, and messages beside the control in a horizontal field.                                                     |
 | `Field.Description` | `.cl-field-description` | Supporting `p` associated with the field control.                                                                                                    |
 | `Field.Message`     | `.cl-field-message`     | Height-animated live region for the messages below.                                                                                                  |
 | `Field.Error`       | `.cl-field-error`       | Associated error `p` with an alert icon.                                                                                                             |
@@ -121,4 +124,4 @@ The Mosaic field is themed with **StyleX**. Each styled part carries the stable
 }
 ```
 
-`Field.Root` only stacks its parts, or places them in two columns when horizontal; `data-orientation` reflects which. Higher-level blocks own any other arrangement; for example, a settings row can provide the grid and alignment for a field. Customize an `Input` through its exposed tokens, `.cl-input`, `className`, and `style`; Field does not add control-specific styling.
+`Field.Root` only stacks its parts, or places the control beside `Field.Content` when horizontal; `data-orientation` reflects which. Higher-level blocks own any other arrangement; for example, a settings row can provide the grid and alignment for a field. Customize an `Input` through its exposed tokens, `.cl-input`, `className`, and `style`; Field does not add control-specific styling.
diff --git a/packages/swingset/src/stories/field.component.stories.tsx b/packages/swingset/src/stories/field.component.stories.tsx
index 5f703194f06..1eaca9a9427 100644
--- a/packages/swingset/src/stories/field.component.stories.tsx
+++ b/packages/swingset/src/stories/field.component.stories.tsx
@@ -25,9 +25,6 @@ const styles = stylex.create({
     gap: 8,
     maxWidth: 384,
   },
-  horizontal: {
-    maxWidth: 384,
-  },
   errorStack: {
     display: 'grid',
     gap: 8,
@@ -164,18 +161,25 @@ export function WithSelect() {
 
 export function Horizontal() {
   return (
-    <Field.Root
-      orientation='horizontal'
-      xstyle={styles.horizontal}
-    >
-      <Checkbox
-        name='signOutOfOtherSessions'
-        defaultChecked
-      />
-      <Field.Label>Sign out of all devices</Field.Label>
-      <Field.Description>
-        It is recommended to sign out of all other devices which may have used your old password.
-      </Field.Description>
-    </Field.Root>
+    <div {...stylex.props(styles.stack)}>
+      <Field.Root orientation='horizontal'>
+        <Checkbox
+          name='signOutOfOtherSessions'
+          defaultChecked
+        />
+        <Field.Content>
+          <Field.Label>Sign out of all devices</Field.Label>
+          <Field.Description>
+            It is recommended to sign out of all other devices which may have used your old password.
+          </Field.Description>
+        </Field.Content>
+      </Field.Root>
+      <Field.Root orientation='horizontal'>
+        <Checkbox name='marketingEmails' />
+        <Field.Content>
+          <Field.Label>Send me product updates, feature announcements, and occasional offers by email</Field.Label>
+        </Field.Content>
+      </Field.Root>
+    </div>
   );
 }