From d600db6d485cb801cef9e8141c0fca94f3b98476 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Oct 2026 09:06:34 +0000
Subject: [PATCH 1/2] wip(ui): form layout horizontal, TabbedForm layout
 passthrough, FormPage tabbed sections

Claude-Session: https://claude.ai/code/session_01JQwxbXNVYZR3yMKLPJJvzL
Co-authored-by: Claude <noreply@anthropic.com>
---
 ui/apps/console/src/components/FormPage.tsx   | 328 +++++++++++++-----
 .../components/src/renderers/form/form.tsx    |  31 +-
 ui/packages/plugin-form/src/TabbedForm.tsx    |  13 +-
 3 files changed, 280 insertions(+), 92 deletions(-)

diff --git a/ui/apps/console/src/components/FormPage.tsx b/ui/apps/console/src/components/FormPage.tsx
index 7514b8dd79a..9468e86f073 100644
--- a/ui/apps/console/src/components/FormPage.tsx
+++ b/ui/apps/console/src/components/FormPage.tsx
@@ -148,6 +148,7 @@ import {
   mapFieldTypeToFormType,
   resolveFormWidgetType,
 } from '@object-ui/fields';
+import { Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@object-ui/components';
 import { SchemaRendererContext, usePredicateScope, type ApiFetch } from '@object-ui/react';
 import { pickLocalized, useObjectTranslation, useSafeFieldLabel } from '@object-ui/i18n';
 import type { FormFieldSpec, FormSectionSpec, FormViewSpec } from '@object-ui/app-shell';
@@ -997,6 +998,46 @@ export function isSectionVisible(
   });
 }
 
+/**
+ * The tab value of one section of a `type: 'tabbed'` form view
+ * (objectstack-ai/objectstack#26843): its `name`, else its heading, else its
+ * position. The same answer `@object-ui/plugin-form`'s `TabbedForm` gives a
+ * section, so one authored `defaultTab` opens the same tab on the app's tabbed
+ * form and on this page.
+ */
+export function sectionTabKey(section: Pick<RenderableSection, 'name' | 'label'>, index: number): string {
+  return section.name || section.label || `tab-${index}`;
+}
+
+/**
+ * The open tab of a tabbed form view, among the tabs actually DRAWN (a section
+ * its predicate hides draws no tab): the user's pick, else the form view's
+ * `defaultTab`, else the first drawn tab. A pick or a `defaultTab` naming a
+ * tab that is not drawn falls through to the next answer, so the strip never
+ * opens onto a panel that is not there.
+ */
+export function resolveActiveTab(
+  drawn: readonly string[],
+  picked: string | null,
+  defaultTab: string | undefined,
+): string | undefined {
+  if (picked && drawn.includes(picked)) return picked;
+  if (defaultTab && drawn.includes(defaultTab)) return defaultTab;
+  return drawn[0];
+}
+
+/**
+ * One field row under the form view's `layout: 'horizontal'`
+ * (objectstack-ai/objectstack#26843): the label in a fixed column beside its
+ * control from `sm` up, and stacked as `vertical` draws it below `sm`. The
+ * arrangement `@object-ui/components`' form renderer gives a field item under
+ * the same key, so a form view reads the same here and in the app's forms:
+ * every child but the `<label>` (the control, its help line) takes the second
+ * column, and the label sits on the control's first text line.
+ */
+const HORIZONTAL_ROW_CLASS =
+  'sm:grid sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)] sm:items-baseline sm:gap-x-4 sm:[&>:not(label)]:col-start-2';
+
 /**
  * The row's EFFECTIVE `{ visible, readonly, required }` — every conditional
  * rule that bears on one control, resolved in one place (objectui#5627).
@@ -2229,6 +2270,12 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
    */
   const [uploading, setUploading] = useState<Record<string, boolean>>({});
   const isUploading = Object.values(uploading).some(Boolean);
+  /**
+   * The tab the user opened on a `type: 'tabbed'` form view
+   * (objectstack-ai/objectstack#26843). Null until they open one, so the form
+   * view's `defaultTab` decides until then; see {@link resolveActiveTab}.
+   */
+  const [pickedTab, setPickedTab] = useState<string | null>(null);
   /**
    * The sonner id this form's submit OUTCOME is published under — one id for
    * the confirmation and for the refusal, so the later of the two SUPERSEDES
@@ -2318,6 +2365,17 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
   const submitButton = readFormButton(loaded?.form?.buttons?.submit, language);
   const cancelButton = readFormButton(loaded?.form?.buttons?.cancel, language);
 
+  /**
+   * The form view's `type: 'tabbed'` and `layout`, which this page never read
+   * (objectstack-ai/objectstack#26843). Tabbed draws one tab per section; with
+   * a single section there is nothing to switch between, so it draws stacked,
+   * as the app's tabbed form draws no strip for one. The form's ONE `values`
+   * map holds every section's fields whichever tab is open, so a submit
+   * carries them all.
+   */
+  const tabbedView = loaded?.form?.type === 'tabbed' && sections.length > 1;
+  const horizontalRows = loaded?.form?.layout === 'horizontal';
+
   const behavior: EffectiveSubmitBehavior = resolveSubmitBehavior(
     mode,
     loaded?.form?.submitBehavior,
@@ -2377,6 +2435,14 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
       isCreateForm,
       predicateScope,
     );
+    // On a tabbed form view the refused field may sit on a tab that is not
+    // open (objectstack-ai/objectstack#26843): open the tab of the first field
+    // the message below names, the way the app's tabbed form jumps to it.
+    const refused = faultedVisibleWhen[0] ?? missing[0];
+    if (refused && tabbedView) {
+      const at = sections.findIndex((s) => s.fields.includes(refused));
+      if (at >= 0) setPickedTab(sectionTabKey(sections[at], at));
+    }
     // A faulted `visibleWhen` first (objectui#8069): it names the field and
     // the rule, and nothing typed into the form can clear it, so the required
     // check behind it would only ask for work that is refused anyway.
@@ -2576,6 +2642,170 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
     );
   }
 
+  /**
+   * A section's heading (objectui#8813): `objects.{object}._sections.{name}.label`,
+   * falling back to the authored string, exactly as `ObjectForm` does on the
+   * app path. The KEY is `sec.name`; a section authored without one has no key
+   * and keeps its authored heading. Empty for a section with neither.
+   */
+  const sectionHeading = (sec: RenderableSection): string =>
+    (sec.name ? sectionLabel(loaded.object, sec.name, sec.label ?? '') : sec.label) ?? '';
+
+  /**
+   * One section's description and field grid: what a stacked section draws
+   * under its heading, and what a tab of a tabbed form view draws as its panel
+   * (objectstack-ai/objectstack#26843).
+   */
+  const renderSectionBody = (sec: RenderableSection) => (
+    <>
+      {/*
+        * objectui#12333 — the served description, under the heading.
+        * No client-side key is read for it: the signed-out visitor holds
+        * no bundle, and the server already localized it.
+        */}
+      {sec.description && (
+        <p className="mb-3 text-sm text-muted-foreground">{sec.description}</p>
+      )}
+      <div
+        className={
+          sec.columns === 1
+            ? 'grid grid-cols-1 gap-4'
+            : sec.columns === 2
+              ? 'grid grid-cols-1 gap-4 sm:grid-cols-2'
+              : sec.columns === 3
+                ? 'grid grid-cols-1 gap-4 sm:grid-cols-3'
+                : 'grid grid-cols-1 gap-4 sm:grid-cols-4'
+        }
+      >
+        {sec.fields.map((f) => {
+          // One resolution per row per render, read by all three of the
+          // things that depend on it below — the row's presence, the
+          // required marker, and the control's own attributes. Computing
+          // it three times would be three chances to disagree.
+          const state = resolveRowState(f, values, loaded.record, isCreateForm, predicateScope);
+          if (!state.visible) return null;
+          const spanClass =
+            f.colSpan === 2 ? 'sm:col-span-2'
+              : f.colSpan === 3 ? 'sm:col-span-3'
+                : f.colSpan === 4 ? 'sm:col-span-4'
+                  : '';
+          return (
+          <div
+            key={f.name}
+            // `layout: 'horizontal'` puts the label beside the control — see
+            // HORIZONTAL_ROW_CLASS. `vertical` (and no layout) adds nothing.
+            className={horizontalRows ? cn(spanClass, HORIZONTAL_ROW_CLASS) : spanClass}
+          >
+            <label
+              // `for` the control, or an `id` the group / display answers
+              // to — the widget's declaration decides (objectui#10179).
+              {...rowLabelProps(f)}
+              className={
+                horizontalRows
+                  ? 'mb-1 block text-xs font-medium text-foreground sm:mb-0'
+                  : 'mb-1 block text-xs font-medium text-foreground'
+              }
+            >
+              {/*
+                * objectui#8813 — `fields.{object}.{name}`, the same
+                * resolver and the same fallback-to-the-served-label as
+                * the app path (`ObjectForm`). On this route the served
+                * label is usually ALREADY localized by the server
+                * payload, which is why the symptom looked like "field
+                * labels translate, section headings do not"; the client
+                * lookup is the overlay an app bundle can put on top,
+                * not a replacement for that server value.
+                */}
+              {fieldLabel(loaded.object, f.name, f.label)}
+              {/* Visual-only (objectui#3299): the control's `required` /
+                  `aria-required` is the announced channel; hiding the `*`
+                  keeps it out of the control's accessible name. */}
+              {state.required && (
+                <span className="ml-0.5 text-destructive" aria-hidden="true">*</span>
+              )}
+            </label>
+            <FieldInput
+              field={f}
+              state={state}
+              value={values[f.name]}
+              values={values}
+              onChange={(v) => setValues((prev) => ({ ...prev, [f.name]: v }))}
+              onUploadingChange={(u) =>
+                setUploading((prev) => (prev[f.name] === u ? prev : { ...prev, [f.name]: u }))
+              }
+            />
+            {f.helpText && (
+              <p className="mt-1 text-xs text-muted-foreground">{f.helpText}</p>
+            )}
+          </div>
+          );
+        })}
+      </div>
+    </>
+  );
+
+  /**
+   * A `type: 'tabbed'` form view (objectstack-ai/objectstack#26843): one tab
+   * per section, the tab semantics of the app's tabbed form — the form view's
+   * `defaultTab` opens first, `tabPosition` places the strip, a section its
+   * predicate hides draws no tab. The panels are force-mounted and only
+   * CSS-hidden when inactive, so a control on a closed tab keeps its widget
+   * state (an upload in flight included) as well as its value.
+   */
+  const renderTabbedSections = () => {
+    const drawn = sections
+      .map((sec, at) => ({ sec, at, key: sectionTabKey(sec, at) }))
+      .filter(({ sec }) => isSectionVisible(sec, values, loaded.record, predicateScope));
+    if (drawn.length === 0) return null;
+    const active = resolveActiveTab(drawn.map((d) => d.key), pickedTab, loaded.form?.defaultTab);
+    const stripAt = loaded.form?.tabPosition ?? 'top';
+    const verticalStrip = stripAt === 'left' || stripAt === 'right';
+    return (
+      <Tabs
+        value={active}
+        onValueChange={setPickedTab}
+        orientation={verticalStrip ? 'vertical' : 'horizontal'}
+        // Always a flex container: `order-last` on the strip is what puts it
+        // after the panels for `bottom` / `right`.
+        className={cn('flex w-full', verticalStrip ? 'gap-4' : 'flex-col')}
+      >
+        <TabsList
+          className={cn(
+            'self-start',
+            verticalStrip
+              ? cn('h-auto flex-col', stripAt === 'right' && 'order-last')
+              : stripAt === 'bottom' ? 'order-last mt-4' : 'mb-4',
+          )}
+        >
+          {drawn.map(({ sec, at, key }) => (
+            <TabsTrigger
+              key={key}
+              value={key}
+              data-testid={`form-tab:${key}`}
+              className={cn(verticalStrip && 'w-full justify-start')}
+            >
+              {/* A section with no heading is named by its position. */}
+              {sectionHeading(sec) || String(at + 1)}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        <div className="min-w-0 flex-1">
+          {drawn.map(({ sec, key }) => (
+            <TabsContent
+              key={key}
+              value={key}
+              forceMount
+              data-testid={`form-tab-panel:${key}`}
+              className="mt-0 rounded-md border bg-card p-4 data-[state=inactive]:hidden sm:p-5"
+            >
+              {renderSectionBody(sec)}
+            </TabsContent>
+          ))}
+        </div>
+      </Tabs>
+    );
+  };
+
   return (
     <div className="mx-auto max-w-2xl p-4 sm:p-6">
       <header className="mb-6">
@@ -2626,7 +2856,7 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
         )}
       </header>
       <form onSubmit={handleSubmit} className="space-y-6">
-        {sections.map((sec, i) => {
+        {tabbedView ? renderTabbedSections() : sections.map((sec, i) => {
           // A section conditioned away is skipped IN PLACE rather than filtered
           // out of the list first (objectui#5627). The key here is the section's
           // POSITION, and these predicates re-decide on every keystroke: filtering
@@ -2639,98 +2869,16 @@ export function FormPage({ mode, recordPath, cancelPath }: FormPageProps) {
             {sec.label && (
               <h2 className={sec.description ? 'mb-1 text-sm font-medium' : 'mb-3 text-sm font-medium'}>
                 {/*
-                  * objectui#8813 — the heading resolves
-                  * `objects.{object}._sections.{name}.label` and falls back to
-                  * the authored string, exactly as `ObjectForm` does on the
-                  * app path. The KEY is `sec.name`; a section authored without
-                  * one has no key and keeps its authored heading.
-                  *
-                  * The `sec.label &&` guard above is unchanged on purpose: this
-                  * card translates a heading that already renders, it does not
-                  * start rendering headings for sections that had none. A
-                  * translation cannot conjure a heading the author did not
-                  * write — that would be a different, wider change.
+                  * The `sec.label &&` guard is unchanged on purpose (objectui#8813):
+                  * this heading translates a heading that already renders, it
+                  * does not start rendering headings for sections that had
+                  * none. A translation cannot conjure a heading the author did
+                  * not write — that would be a different, wider change.
                   */}
-                {sec.name ? sectionLabel(loaded.object, sec.name, sec.label) : sec.label}
+                {sectionHeading(sec)}
               </h2>
             )}
-            {/*
-              * objectui#12333 — the served description, under the heading.
-              * No client-side key is read for it: the signed-out visitor holds
-              * no bundle, and the server already localized it.
-              */}
-            {sec.description && (
-              <p className="mb-3 text-sm text-muted-foreground">{sec.description}</p>
-            )}
-            <div
-              className={
-                sec.columns === 1
-                  ? 'grid grid-cols-1 gap-4'
-                  : sec.columns === 2
-                    ? 'grid grid-cols-1 gap-4 sm:grid-cols-2'
-                    : sec.columns === 3
-                      ? 'grid grid-cols-1 gap-4 sm:grid-cols-3'
-                      : 'grid grid-cols-1 gap-4 sm:grid-cols-4'
-              }
-            >
-              {sec.fields.map((f) => {
-                // One resolution per row per render, read by all three of the
-                // things that depend on it below — the row's presence, the
-                // required marker, and the control's own attributes. Computing
-                // it three times would be three chances to disagree.
-                const state = resolveRowState(f, values, loaded.record, isCreateForm, predicateScope);
-                if (!state.visible) return null;
-                return (
-                <div
-                  key={f.name}
-                  className={
-                    f.colSpan === 2 ? 'sm:col-span-2'
-                      : f.colSpan === 3 ? 'sm:col-span-3'
-                        : f.colSpan === 4 ? 'sm:col-span-4'
-                          : ''
-                  }
-                >
-                  <label
-                    // `for` the control, or an `id` the group / display answers
-                    // to — the widget's declaration decides (objectui#10179).
-                    {...rowLabelProps(f)}
-                    className="mb-1 block text-xs font-medium text-foreground"
-                  >
-                    {/*
-                      * objectui#8813 — `fields.{object}.{name}`, the same
-                      * resolver and the same fallback-to-the-served-label as
-                      * the app path (`ObjectForm`). On this route the served
-                      * label is usually ALREADY localized by the server
-                      * payload, which is why the symptom looked like "field
-                      * labels translate, section headings do not"; the client
-                      * lookup is the overlay an app bundle can put on top,
-                      * not a replacement for that server value.
-                      */}
-                    {fieldLabel(loaded.object, f.name, f.label)}
-                    {/* Visual-only (objectui#3299): the control's `required` /
-                        `aria-required` is the announced channel; hiding the `*`
-                        keeps it out of the control's accessible name. */}
-                    {state.required && (
-                      <span className="ml-0.5 text-destructive" aria-hidden="true">*</span>
-                    )}
-                  </label>
-                  <FieldInput
-                    field={f}
-                    state={state}
-                    value={values[f.name]}
-                    values={values}
-                    onChange={(v) => setValues((prev) => ({ ...prev, [f.name]: v }))}
-                    onUploadingChange={(u) =>
-                      setUploading((prev) => (prev[f.name] === u ? prev : { ...prev, [f.name]: u }))
-                    }
-                  />
-                  {f.helpText && (
-                    <p className="mt-1 text-xs text-muted-foreground">{f.helpText}</p>
-                  )}
-                </div>
-                );
-              })}
-            </div>
+            {renderSectionBody(sec)}
           </section>
           );
         })}
diff --git a/ui/packages/components/src/renderers/form/form.tsx b/ui/packages/components/src/renderers/form/form.tsx
index c719ea5f63c..88b12b82310 100644
--- a/ui/packages/components/src/renderers/form/form.tsx
+++ b/ui/packages/components/src/renderers/form/form.tsx
@@ -1150,6 +1150,28 @@ function withReadonlyHostGroup(labelId: string | undefined, node: React.ReactNod
   return <ReadonlyFieldGroup labelId={labelId}>{node}</ReadonlyFieldGroup>;
 }
 
+/**
+ * One field item under `layout: 'horizontal'` (objectstack-ai/objectstack#26843):
+ * the label in a fixed column BESIDE its control, from `sm` up. Below `sm` none
+ * of these classes engage, so a phone draws the item exactly as `vertical` does —
+ * label above, control under it.
+ *
+ * - `sm:space-y-0` takes back `<FormItem>`'s own `space-y-2` margins, which in a
+ *   grid would push the control down out of line with its label; `sm:gap-y-2`
+ *   puts the same distance back between the control, its description and its
+ *   message.
+ * - Every child that is not the `<label>` goes to the second column, so a field
+ *   drawn with no label keeps its control there too, and the description and
+ *   message stack under the control instead of under the label.
+ * - `items-baseline`: the label's text sits on the first text line of whatever
+ *   the control is — an input, a textarea, a widget's composite.
+ *
+ * Only the item's arrangement changes: the label element, its `for` / `id`,
+ * and the control's `aria-*` are the ones the vertical item carries.
+ */
+const HORIZONTAL_FIELD_ITEM_CLASS =
+  'sm:grid sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)] sm:items-baseline sm:gap-x-4 sm:gap-y-2 sm:space-y-0 sm:[&>:not(label)]:col-start-2';
+
 /**
  * The help line under one field: its authored `description`, and the
  * "set automatically when saved" hint when the caller passes one
@@ -3639,7 +3661,14 @@ ComponentRegistry.register('form',
           rules={rules}
           render={({ field: formField, fieldState }) => (
             <FormItem
-              className={colSpanClass || undefined}
+              // The form's `layout` decides the item's arrangement — see
+              // HORIZONTAL_FIELD_ITEM_CLASS. `vertical` (and an absent layout)
+              // adds nothing, so its DOM is the one it always drew.
+              className={
+                layout === 'horizontal'
+                  ? cn(colSpanClass, HORIZONTAL_FIELD_ITEM_CLASS)
+                  : colSpanClass || undefined
+              }
               data-testid={fieldTestId}
               data-field={name}
             >
diff --git a/ui/packages/plugin-form/src/TabbedForm.tsx b/ui/packages/plugin-form/src/TabbedForm.tsx
index 9813651b0fc..37f614368f1 100644
--- a/ui/packages/plugin-form/src/TabbedForm.tsx
+++ b/ui/packages/plugin-form/src/TabbedForm.tsx
@@ -164,6 +164,15 @@ export interface TabbedFormSchema {
    */
   columns?: number;
 
+  /**
+   * Label placement for every field on every tab — `vertical` (the default) or
+   * `horizontal` (label beside its field). Declared as `ObjectFormSchema['layout']`
+   * rather than restated: `ObjectForm` hands the authored key over in its
+   * `{...schema}` spread, and this layout used to drop it on the form node it
+   * builds (objectstack-ai/objectstack#26843).
+   */
+  layout?: ObjectFormSchema['layout'];
+
   /**
    * Default active tab (section name)
    */
@@ -674,7 +683,9 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
     fields: allFields,
     columns: formColumns,
     ...(containerFieldClass ? { fieldContainerClass: containerFieldClass } : {}),
-    layout: 'vertical',
+    // The authored label placement, not a hard-coded `vertical`
+    // (objectstack-ai/objectstack#26843): the form renderer draws it on every tab.
+    layout: schema.layout ?? 'vertical',
     defaultValues: formData,
     // Persisted record → `previous` binding + read-only submit strip (#3484).
     previousValues: schema.mode === 'edit' && schema.recordId ? formData : undefined,

From 51be1b768ad461c406ee0ae166c37ddeef31ba1a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 28 Oct 2026 09:18:35 +0000
Subject: [PATCH 2/2] test(ui): pin horizontal field items, the tabbed form's
 layout and the form page's tabs

Claude-Session: https://claude.ai/code/session_01JQwxbXNVYZR3yMKLPJJvzL
Co-authored-by: Claude <noreply@anthropic.com>
---
 ...6843-form-layout-horizontal-tabbed-page.md |  16 ++
 .../FormPage.tabbedLayout-26843.test.tsx      | 246 ++++++++++++++++++
 ui/content/docs/components/form/form.mdx      |   1 +
 .../form-layout-horizontal-26843.test.tsx     | 129 +++++++++
 ui/packages/plugin-form/README.md             |   2 +-
 .../__tests__/tabbedFormLayout-26843.test.tsx | 106 ++++++++
 6 files changed, 499 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/26843-form-layout-horizontal-tabbed-page.md
 create mode 100644 ui/apps/console/src/components/FormPage.tabbedLayout-26843.test.tsx
 create mode 100644 ui/packages/components/src/renderers/form/__tests__/form-layout-horizontal-26843.test.tsx
 create mode 100644 ui/packages/plugin-form/src/__tests__/tabbedFormLayout-26843.test.tsx

diff --git a/.changeset/26843-form-layout-horizontal-tabbed-page.md b/.changeset/26843-form-layout-horizontal-tabbed-page.md
new file mode 100644
index 00000000000..423835cb09e
--- /dev/null
+++ b/.changeset/26843-form-layout-horizontal-tabbed-page.md
@@ -0,0 +1,16 @@
+---
+'@object-ui/components': minor
+'@object-ui/plugin-form': minor
+'@object-ui/console': minor
+---
+
+fix(ui): a form view's `layout: 'horizontal'` draws each label beside its field, a tabbed form keeps it, and the form page draws `type: 'tabbed'` as tabs (#26843)
+
+Clause-②: no
+Metadata-protocol: semantic
+
+A form view's `layout: 'horizontal'` reached every console form but drew nothing different, and the form page ignored `type: 'tabbed'`:
+
+- **`layout: 'horizontal'`** now places each field's label in a fixed column beside its control from the `sm` breakpoint up; below `sm` (a phone) the field stays stacked, label above control, as `vertical` draws it. The description and validation message stay under the control. `vertical`, and a form view with no `layout`, draw exactly as before. Before, the form renderer read the key only to align its action row.
+- **A tabbed form** (`type: 'tabbed'`) now keeps an authored `layout: 'horizontal'` on every tab. It used to draw its fields `vertical` whatever the form view said.
+- **The form page** (`/forms/:name`, and the public `/f/:slug`) now draws a `type: 'tabbed'` form view as one tab per section: `defaultTab` opens first, `tabPosition` places the strip, and a section hidden by its `visibleWhen` draws no tab. A submit carries every section's fields, the closed tabs' included, and a submit refused for a missing field opens the tab that holds it. A tabbed form view with a single section draws it stacked, as before. The page also draws `layout: 'horizontal'` rows. Before, it drew every section stacked and every label above its field.
diff --git a/ui/apps/console/src/components/FormPage.tabbedLayout-26843.test.tsx b/ui/apps/console/src/components/FormPage.tabbedLayout-26843.test.tsx
new file mode 100644
index 00000000000..24b63d10300
--- /dev/null
+++ b/ui/apps/console/src/components/FormPage.tabbedLayout-26843.test.tsx
@@ -0,0 +1,246 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectstack-ai/objectstack#26843 — the form page draws a form view's
+ * `type: 'tabbed'` and `layout: 'horizontal'`, which it never read.
+ *
+ *   - `type: 'tabbed'`: one tab per section, the form view's `defaultTab` open
+ *     first and `tabPosition` placing the strip — the semantics of the app's
+ *     tabbed form. A submit carries every section's fields, the closed tabs'
+ *     included, and a refused submit opens the tab holding the field it names.
+ *   - `layout: 'horizontal'`: each row draws its label beside the control from
+ *     `sm` up, the arrangement the form renderer gives the same key.
+ *
+ * CONTROLS: a `type: 'simple'` view, and a tabbed view with one section, draw
+ * stacked sections and no tab strip; no `layout` draws no grid row.
+ */
+
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, cleanup, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { createI18n } from '@object-ui/i18n';
+import { FormPage, resolveActiveTab, sectionTabKey } from './FormPage';
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+const OBJECT_SCHEMA = {
+  name: 'showcase_ticket',
+  label: 'Ticket',
+  fields: {
+    title: { type: 'text', label: 'Title' },
+    notes: { type: 'text', label: 'Notes' },
+    channel: { type: 'text', label: 'Channel' },
+  },
+};
+
+const THREE_SECTIONS = [
+  { name: 'main', label: 'Main', fields: ['title'] },
+  { name: 'more', label: 'More', fields: ['notes'] },
+  { name: 'routing', label: 'Routing', fields: ['channel'] },
+];
+
+let submits: Array<{ url: string; body: Record<string, unknown> }> = [];
+
+function stubFetch(form: Record<string, unknown>, objectSchema: unknown = OBJECT_SCHEMA) {
+  return vi.fn(async (url: string, init?: RequestInit) => {
+    const path = String(url);
+    if (init?.method === 'POST') {
+      submits.push({ url: path, body: JSON.parse(String(init.body)) });
+    }
+    const body = path.includes('/meta/view/')
+      ? {
+          name: 'showcase_ticket.intake',
+          object: 'showcase_ticket',
+          viewKind: 'form',
+          label: 'Intake',
+          config: { type: 'tabbed', sections: THREE_SECTIONS, ...form },
+        }
+      : path.includes('/meta/object/')
+        ? objectSchema
+        : path.includes('/data/showcase_ticket')
+          ? { object: 'showcase_ticket', id: 't1', record: { id: 't1' } }
+          : null;
+    if (!body) throw new Error(`unstubbed fetch: ${path}`);
+    return {
+      ok: true,
+      status: 200,
+      statusText: 'OK',
+      json: async () => body,
+      text: async () => JSON.stringify(body),
+    } as unknown as Response;
+  });
+}
+
+function renderPage() {
+  return render(
+    <MemoryRouter initialEntries={['/forms/showcase_ticket.intake']}>
+      <Routes>
+        <Route path="/forms/:name" element={<FormPage mode="internal" />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+const input = (name: string) => document.querySelector(`[name="${name}"]`) as HTMLInputElement | null;
+const tab = (key: string) => screen.queryByTestId(`form-tab:${key}`);
+const panel = (key: string) => screen.queryByTestId(`form-tab-panel:${key}`);
+const isOpen = (key: string) => tab(key)?.getAttribute('data-state') === 'active';
+
+beforeEach(() => {
+  submits = [];
+  createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe('FormPage draws a tabbed form view as tabs (#26843)', () => {
+  it('one tab per section, named by its heading, every panel mounted', async () => {
+    vi.stubGlobal('fetch', stubFetch({}));
+    renderPage();
+    await waitFor(() => expect(tab('main')).not.toBeNull());
+    const strip = screen.getByRole('tablist');
+    expect(within(strip).getAllByRole('tab').map((t) => t.textContent)).toEqual(['Main', 'More', 'Routing']);
+    // No stacked section card beside the strip.
+    expect(document.querySelector('form section')).toBeNull();
+    // Force-mounted: a closed tab's control exists, only CSS-hidden. (The
+    // widgets are lazy, so they arrive after the strip.)
+    await waitFor(() => {
+      for (const name of ['title', 'notes', 'channel']) expect(input(name), name).not.toBeNull();
+    });
+    expect(panel('more')?.getAttribute('data-state')).toBe('inactive');
+    expect(panel('more')?.className).toContain('data-[state=inactive]:hidden');
+    // With no `defaultTab`, the first tab opens.
+    expect(isOpen('main')).toBe(true);
+  });
+
+  it('the form view\'s defaultTab opens first', async () => {
+    vi.stubGlobal('fetch', stubFetch({ defaultTab: 'routing' }));
+    renderPage();
+    await waitFor(() => expect(tab('routing')).not.toBeNull());
+    expect(isOpen('routing')).toBe(true);
+    expect(isOpen('main')).toBe(false);
+  });
+
+  it('a tab click switches the open panel', async () => {
+    vi.stubGlobal('fetch', stubFetch({}));
+    renderPage();
+    await waitFor(() => expect(tab('more')).not.toBeNull());
+    await userEvent.click(tab('more')!);
+    expect(isOpen('more')).toBe(true);
+    expect(panel('main')?.getAttribute('data-state')).toBe('inactive');
+  });
+
+  it('tabPosition: left draws a vertical strip', async () => {
+    vi.stubGlobal('fetch', stubFetch({ tabPosition: 'left' }));
+    renderPage();
+    await waitFor(() => expect(tab('main')).not.toBeNull());
+    expect(screen.getByRole('tablist').getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('a submit carries every section\'s fields, the closed tabs\' included', async () => {
+    vi.stubGlobal('fetch', stubFetch({ defaults: { channel: 'web' } }));
+    renderPage();
+    await waitFor(() => expect(input('title')).not.toBeNull());
+    await userEvent.type(input('title')!, 'Printer jam');
+    await userEvent.click(tab('more')!);
+    await userEvent.type(input('notes')!, 'Third floor');
+    // `routing` is never opened: its field carries the form view's default.
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await waitFor(() => expect(submits).toHaveLength(1));
+    expect(submits[0].body).toMatchObject({ title: 'Printer jam', notes: 'Third floor', channel: 'web' });
+  });
+
+  it('a refused submit opens the tab holding the field it names', async () => {
+    const schema = {
+      ...OBJECT_SCHEMA,
+      fields: { ...OBJECT_SCHEMA.fields, channel: { type: 'text', label: 'Channel', required: true } },
+    };
+    vi.stubGlobal('fetch', stubFetch({}, schema));
+    renderPage();
+    await waitFor(() => expect(input('title')).not.toBeNull());
+    expect(isOpen('main')).toBe(true);
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await waitFor(() => expect(isOpen('routing')).toBe(true));
+    expect(submits).toHaveLength(0);
+  });
+
+  it('CONTROL: a single-section tabbed view draws its section stacked, no strip', async () => {
+    vi.stubGlobal('fetch', stubFetch({ sections: [THREE_SECTIONS[0]] }));
+    renderPage();
+    await waitFor(() => expect(input('title')).not.toBeNull());
+    expect(screen.queryByRole('tablist')).toBeNull();
+    expect(document.querySelectorAll('form section')).toHaveLength(1);
+  });
+
+  it('CONTROL: a simple view draws every section stacked, no strip', async () => {
+    vi.stubGlobal('fetch', stubFetch({ type: 'simple', defaultTab: 'routing' }));
+    renderPage();
+    await waitFor(() => expect(input('title')).not.toBeNull());
+    expect(screen.queryByRole('tablist')).toBeNull();
+    expect([...document.querySelectorAll('form section h2')].map((h) => h.textContent)).toEqual([
+      'Main',
+      'More',
+      'Routing',
+    ]);
+  });
+});
+
+describe('FormPage draws layout: horizontal rows (#26843)', () => {
+  const LABELS: Record<string, string> = { title: 'Title', notes: 'Notes', channel: 'Channel' };
+  /** The row a field's `<label>` sits in. */
+  const row = (name: string) => screen.getByText(LABELS[name]).closest('label')!.parentElement!;
+
+  it('each row puts its label beside the control at sm, stacked below', async () => {
+    vi.stubGlobal('fetch', stubFetch({ type: 'simple', layout: 'horizontal' }));
+    renderPage();
+    await waitFor(() => expect(input('title')).not.toBeNull());
+    const classes = row('title').className.split(/\s+/);
+    expect(classes).toContain('sm:grid');
+    expect(classes).toContain('sm:[&>:not(label)]:col-start-2');
+    // Below sm nothing changes: every class the row carries is sm:-prefixed.
+    expect(classes.filter((c) => !c.startsWith('sm:'))).toEqual([]);
+    expect(row('title').firstElementChild?.tagName).toBe('LABEL');
+    // The label still names its control.
+    expect(screen.getByLabelText('Title')).toBe(input('title'));
+  });
+
+  it('a tabbed view keeps it on every tab', async () => {
+    vi.stubGlobal('fetch', stubFetch({ layout: 'horizontal' }));
+    renderPage();
+    await waitFor(() => expect(input('notes')).not.toBeNull());
+    for (const name of ['title', 'notes', 'channel']) {
+      expect(row(name).className.split(/\s+/), name).toContain('sm:grid');
+    }
+  });
+
+  it('CONTROL: no layout, and vertical — no grid row', async () => {
+    for (const layout of [undefined, 'vertical']) {
+      vi.stubGlobal('fetch', stubFetch({ type: 'simple', ...(layout ? { layout } : {}) }));
+      renderPage();
+      await waitFor(() => expect(input('title')).not.toBeNull());
+      expect(row('title').className.split(/\s+/), String(layout)).not.toContain('sm:grid');
+      cleanup();
+    }
+  });
+});
+
+describe('the tab rules (#26843)', () => {
+  it('a section\'s tab is its name, else its heading, else its position — TabbedForm\'s rule', () => {
+    expect(sectionTabKey({ name: 'main', label: 'Main' }, 0)).toBe('main');
+    expect(sectionTabKey({ label: 'Main' }, 0)).toBe('Main');
+    expect(sectionTabKey({}, 2)).toBe('tab-2');
+  });
+
+  it('the open tab is the pick, else defaultTab, else the first — each only if drawn', () => {
+    const drawn = ['a', 'b', 'c'];
+    expect(resolveActiveTab(drawn, 'c', 'b')).toBe('c');
+    expect(resolveActiveTab(drawn, null, 'b')).toBe('b');
+    expect(resolveActiveTab(drawn, 'gone', 'b')).toBe('b');
+    expect(resolveActiveTab(drawn, null, 'hidden')).toBe('a');
+    expect(resolveActiveTab([], null, 'b')).toBeUndefined();
+  });
+});
diff --git a/ui/content/docs/components/form/form.mdx b/ui/content/docs/components/form/form.mdx
index 620f08e2c7f..02109791035 100644
--- a/ui/content/docs/components/form/form.mdx
+++ b/ui/content/docs/components/form/form.mdx
@@ -52,6 +52,7 @@ interface FormSchema {
   
   // Layout
   columns?: number;               // Grid layout
+  layout?: 'vertical' | 'horizontal';  // Label above its field (default), or beside it from `sm` up (stacked below `sm`)
   
   // Styling
   className?: string;
diff --git a/ui/packages/components/src/renderers/form/__tests__/form-layout-horizontal-26843.test.tsx b/ui/packages/components/src/renderers/form/__tests__/form-layout-horizontal-26843.test.tsx
new file mode 100644
index 00000000000..dab6d65a65c
--- /dev/null
+++ b/ui/packages/components/src/renderers/form/__tests__/form-layout-horizontal-26843.test.tsx
@@ -0,0 +1,129 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack-ai/objectstack#26843 — `layout: 'horizontal'` draws each label
+ * BESIDE its control from `sm` up, and stacked below it.
+ *
+ * Before: the renderer read `layout` only to align the action row, so a form
+ * view that saved and published `horizontal` drew exactly what `vertical` drew.
+ *
+ * What these pin:
+ *  - a horizontal field item is a two-column grid at `sm`, the `<label>` its
+ *    first child and every other child (control, description, message) placed
+ *    in the second column;
+ *  - every class horizontal adds is `sm:`-prefixed, so below `sm` the item is
+ *    the vertical one — label above, control under it;
+ *  - the label still names its control, and a group-labelled widget keeps its
+ *    IDREF name: only the arrangement changes;
+ *  - CONTROL: `vertical` and an absent `layout` draw byte-identical items.
+ *
+ * The geometry itself (label left of the input at 1024px, above it at 375px)
+ * cannot be measured here — happy-dom applies no stylesheet; it was measured
+ * once in Chromium for the pull request, against the built Tailwind CSS.
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { ComponentRegistry } from '@object-ui/core';
+// Registers the renderers at module scope (object-ui/no-dynamic-import-in-test-hook).
+import '../../../renderers';
+
+afterEach(cleanup);
+
+const FIELDS = [
+  { name: 'subject', label: 'Subject', type: 'input', description: 'One line' },
+  { name: 'notes', label: 'Notes', type: 'textarea' },
+  { name: 'urgent', label: 'Urgent', type: 'checkbox' },
+  { name: 'untitled', type: 'input' },
+];
+
+function renderForm(layout?: 'vertical' | 'horizontal') {
+  const Form = ComponentRegistry.get('form')!;
+  return render(
+    <Form
+      schema={{
+        type: 'form',
+        showSubmit: false,
+        fields: FIELDS,
+        ...(layout ? { layout } : {}),
+      }}
+    />,
+  );
+}
+
+const item = (name: string) => document.body.querySelector<HTMLElement>(`[data-field="${name}"]`)!;
+const classesOf = (el: Element) => new Set(el.className.split(/\s+/).filter(Boolean));
+/** The rendered form with React's generated ids normalised away. */
+const normalisedHtml = () =>
+  document.body.innerHTML
+    .replace(/(id|for|aria-[a-z]+)="[^"]*"/g, '$1=""')
+    .replace(/«[^»]*»|_r_[0-9a-z]+_|:r[0-9a-z]+:/g, '');
+
+describe('layout: horizontal puts each label beside its control (objectstack#26843)', () => {
+  it('each field item is a two-column grid at sm, the label in the first column', () => {
+    renderForm('horizontal');
+    for (const name of ['subject', 'notes', 'urgent']) {
+      const el = item(name);
+      const classes = classesOf(el);
+      expect(classes.has('sm:grid'), name).toBe(true);
+      expect(classes.has('sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]'), name).toBe(true);
+      // Every child but the label is sent to the second column.
+      expect(classes.has('sm:[&>:not(label)]:col-start-2'), name).toBe(true);
+      expect(el.firstElementChild?.tagName, name).toBe('LABEL');
+    }
+    // The description stays a direct child, so it lands under the control in
+    // the second column rather than under the label.
+    expect(item('subject').querySelector(':scope > p')?.textContent).toBe('One line');
+  });
+
+  it('below sm the item is the vertical one: every class horizontal adds is sm:-prefixed', () => {
+    renderForm('vertical');
+    const vertical = Object.fromEntries(
+      ['subject', 'notes', 'urgent', 'untitled'].map((n) => [n, classesOf(item(n))]),
+    );
+    cleanup();
+    renderForm('horizontal');
+    for (const name of ['subject', 'notes', 'urgent', 'untitled']) {
+      const added = [...classesOf(item(name))].filter((c) => !vertical[name].has(c));
+      // LIT CONTROL: horizontal does add classes.
+      expect(added.length, name).toBeGreaterThan(0);
+      expect(added.filter((c) => !c.startsWith('sm:')), name).toEqual([]);
+      // ...and takes none away, so the stacked spacing below sm is vertical's.
+      expect([...vertical[name]].filter((c) => !classesOf(item(name)).has(c)), name).toEqual([]);
+    }
+  });
+
+  it('a field with no label keeps its control in the second column', () => {
+    renderForm('horizontal');
+    const el = item('untitled');
+    expect(el.querySelector(':scope > label')).toBeNull();
+    expect(classesOf(el).has('sm:[&>:not(label)]:col-start-2')).toBe(true);
+    expect(el.querySelector('input')).not.toBeNull();
+  });
+
+  it('the labels still name their controls', () => {
+    renderForm('horizontal');
+    expect(screen.getByRole('textbox', { name: 'Subject' })).toBe(item('subject').querySelector('input'));
+    expect(screen.getByRole('textbox', { name: 'Notes' })).toBe(item('notes').querySelector('textarea'));
+    expect(screen.getByRole('checkbox', { name: 'Urgent' })).toBeTruthy();
+  });
+
+  it('CONTROL: an absent layout draws exactly what vertical draws, and neither is a grid', () => {
+    renderForm('vertical');
+    const vertical = normalisedHtml();
+    expect(classesOf(item('subject')).has('sm:grid')).toBe(false);
+    cleanup();
+    renderForm();
+    expect(normalisedHtml()).toBe(vertical);
+    cleanup();
+    // LIT CONTROL: the comparison tells the layouts apart.
+    renderForm('horizontal');
+    expect(normalisedHtml()).not.toBe(vertical);
+  });
+});
diff --git a/ui/packages/plugin-form/README.md b/ui/packages/plugin-form/README.md
index 0d9f81b49bb..b9283807275 100644
--- a/ui/packages/plugin-form/README.md
+++ b/ui/packages/plugin-form/README.md
@@ -209,7 +209,7 @@ unknown-component placeholder.
 | `submitLabel` / `cancelLabel` | `string` | button text |
 | `showCancel` / `showActions` | `boolean` | action-row composition |
 | `mobileStickyActions` | `boolean` | pin the action row on small viewports |
-| `layout` | `'vertical' \| 'horizontal'` | label placement |
+| `layout` | `'vertical' \| 'horizontal'` | label placement: `vertical` puts each label above its field (the default); `horizontal` puts it in a fixed column beside the field from the `sm` breakpoint up, and stacks it above the field below `sm` |
 | `columns` | `number` | grid width (1–4) |
 | `validationMode` | `'onSubmit' \| 'onBlur' \| 'onChange' \| 'onTouched' \| 'all'` | when the rules run |
 | `resetOnSubmit` / `disabled` | `boolean` | |
diff --git a/ui/packages/plugin-form/src/__tests__/tabbedFormLayout-26843.test.tsx b/ui/packages/plugin-form/src/__tests__/tabbedFormLayout-26843.test.tsx
new file mode 100644
index 00000000000..45dd714b3ed
--- /dev/null
+++ b/ui/packages/plugin-form/src/__tests__/tabbedFormLayout-26843.test.tsx
@@ -0,0 +1,106 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack-ai/objectstack#26843 — a tabbed form keeps its authored
+ * `layout: 'horizontal'`.
+ *
+ * `ObjectForm` hands the key to `TabbedForm` in its `{...schema}` spread, and
+ * `TabbedForm` dropped it: the form node it builds said `layout: 'vertical'`
+ * whatever the form view said. Now every field on every tab is drawn with its
+ * label beside the control, the arrangement the form renderer gives
+ * `horizontal` (pinned in its own `form-layout-horizontal-26843.test.tsx`).
+ *
+ * CONTROL: with no `layout` the tabbed form draws its fields vertical.
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import React from 'react';
+import { registerAllFields } from '@object-ui/fields';
+// Registers the `form` renderer the tabbed form draws through, at module scope.
+import '@object-ui/components';
+import { ObjectForm } from '../ObjectForm';
+
+registerAllFields();
+
+const OBJECT = {
+  name: 'ticket',
+  fields: { subject: { type: 'text', label: 'Subject' }, memo: { type: 'text', label: 'Memo' } },
+};
+
+const SECTIONS = [
+  { name: 'main', label: 'Main', fields: ['subject'] },
+  { name: 'more', label: 'More', fields: ['memo'] },
+];
+
+let dataSource: any;
+
+beforeEach(() => {
+  dataSource = {
+    getObjectSchema: vi.fn().mockResolvedValue(OBJECT),
+    find: vi.fn().mockResolvedValue({ data: [] }),
+    findOne: vi.fn().mockResolvedValue(null),
+    create: vi.fn().mockResolvedValue({ id: 't1' }),
+    update: vi.fn(),
+    delete: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function renderTabbed(extra: Record<string, unknown>) {
+  render(
+    <ObjectForm
+      schema={{
+        type: 'object-form',
+        objectName: 'ticket',
+        mode: 'create',
+        formType: 'tabbed',
+        sections: SECTIONS,
+        ...extra,
+      } as any}
+      dataSource={dataSource}
+    />,
+  );
+}
+
+const item = (name: string) => document.body.querySelector<HTMLElement>(`[data-field="${name}"]`);
+
+async function drawn() {
+  // Both tabs exist and both fields are mounted: the panels are force-mounted.
+  await waitFor(() => expect(screen.queryByTestId('form-tab:more')).not.toBeNull());
+  await waitFor(() => expect(item('memo')).not.toBeNull());
+}
+
+describe('a tabbed form keeps layout: horizontal (objectstack#26843)', () => {
+  it('every field on every tab draws its label beside the control', async () => {
+    renderTabbed({ layout: 'horizontal' });
+    await drawn();
+    for (const name of ['subject', 'memo']) {
+      expect(item(name)!.className.split(/\s+/), name).toContain('sm:grid');
+    }
+  });
+
+  it('CONTROL: no layout — the fields are drawn vertical', async () => {
+    renderTabbed({});
+    await drawn();
+    for (const name of ['subject', 'memo']) {
+      expect(item(name)!.className.split(/\s+/), name).not.toContain('sm:grid');
+    }
+  });
+
+  it('CONTROL: layout vertical — the fields are drawn vertical', async () => {
+    renderTabbed({ layout: 'vertical' });
+    await drawn();
+    expect(item('subject')!.className.split(/\s+/)).not.toContain('sm:grid');
+  });
+});