@@ -0,0 +1,13 @@
+---
+'@object-ui/fields': patch
+'@object-ui/app-shell': patch
+---
+
+fix(fields): a `boolean` field draws a checkbox and a `toggle` field a switch, in the record form, the grid's inline editor and the Studio canvas preview
+
+Clause-②: yes (widening) — `@object-ui/fields` gains two public exports, `resolveBooleanControl` and `type BooleanControl`
+Metadata-protocol: none
+
+Studio's type picker offers "Checkbox — shown as a checkbox" (`boolean`) and "Toggle — shown as a switch" (`toggle`), but both types reached the one `field:boolean` widget, which drew a switch unless the field carried `widget: 'checkbox'`. A field authored as Checkbox therefore drew a switch on the Studio canvas and in the runtime create form. `resolveBooleanControl` (exported from `@object-ui/fields`) is now the one answer: `boolean` draws a checkbox, `toggle` a switch, and an explicit `widget` of `checkbox` / `boolean` or `switch` / `toggle` overrides the type. `BooleanField` and the canvas's control preview both read it.
+
+Forms that relied on a `boolean` field drawing a switch now draw a checkbox; declare the field as `toggle`, or set `widget: 'switch'`, to keep the switch.
@@ -133,10 +133,10 @@ describe('objectui#10178 — FormPage keeps the required `*` out of the accessib
   it('a required checkbox has no `*` in its name and announces required via aria-required', async () => {
     await renderForm();
     // Since objectui#10179 a `boolean` row renders the shared `BooleanField`
-    // (a switch), and the row's `<label for>` is its ONLY name — the hand-rolled
+    // (a checkbox for `boolean` since objectstack#27519), and the row's `<label for>` is its ONLY name — the hand-rolled
     // arm's own wrapping label, which doubled the name to `Agree * Agree`, is
     // gone. So the name is now asserted EXACTLY, not merely `*`-free.
-    const checkbox = await waitFor(() => screen.getByRole('switch', { name: 'Agree' }));
+    const checkbox = await waitFor(() => screen.getByRole('checkbox', { name: 'Agree' }));
     expect(checkbox.id).toBe('f_agree');
     expect(checkbox).toHaveAccessibleName('Agree');
     expect(checkbox).toHaveAttribute('aria-required', 'true');
@@ -159,7 +159,7 @@ describe('objectui#10178 — FormPage keeps the required `*` out of the accessib
 
   it('CONTROL — an optional checkbox has no marker and carries no aria-required', async () => {
     await renderForm();
-    const checkbox = await waitFor(() => screen.getByRole('switch', { name: 'Opt in' }));
+    const checkbox = await waitFor(() => screen.getByRole('checkbox', { name: 'Opt in' }));
     expect(markerFor('f_optin')).toBeNull();
     expect(checkbox).not.toHaveAttribute('aria-required');
     expect(checkbox).not.toHaveAttribute('required');
 
@@ -164,7 +164,7 @@ afterEach(() => {
 describe('a11y — the two defects objectui#10178 measured are gone', () => {
   it('a required boolean is named by its label exactly ONCE, and reports required', async () => {
     await renderForm();
-    const agree = screen.getByRole('switch', { name: 'Agree' });
+    const agree = screen.getByRole('checkbox', { name: 'Agree' });
     // Exact: `Agree * Agree` (and `Agree Agree`) was the doubled name.
     expect(agree).toHaveAccessibleName('Agree');
     expect(agree).toHaveAttribute('aria-required', 'true');
@@ -202,7 +202,7 @@ describe('value shapes — what the shared widgets emit is what the page submits
     await userEvent.click(screen.getByTestId('lookup-trigger-account'));
     await userEvent.click(await screen.findByRole('option', { name: /Acme/ }));
 
-    await userEvent.click(screen.getByRole('switch', { name: 'Agree' }));
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Agree' }));
     await userEvent.click(screen.getByRole('radio', { name: 'High' }));
 
     await userEvent.click(screen.getByRole('button', { name: /Submit/ }));
@@ -223,12 +223,12 @@ describe('value shapes — what the shared widgets emit is what the page submits
 describe('the page refuses a submit that leaves a required row empty', () => {
   it('refuses, names the empty row, and writes nothing', async () => {
     await renderForm();
-    // `agree` is required too, and is switched on and back OFF: `false` is a
+    // `agree` is required too, and is checked and back OFF: `false` is a
     // VALUE for the required rule (`isMissingForRequired`), so it does not
-    // block — the unpicked radio does. (An untouched switch holds no value at
+    // block — the unpicked radio does. (An untouched box holds no value at
     // all, and is refused like any other empty required row, as the sibling
     // chain's `required` rule refuses it.)
-    const agree = screen.getByRole('switch', { name: 'Agree' });
+    const agree = screen.getByRole('checkbox', { name: 'Agree' });
     await userEvent.click(agree);
     await userEvent.click(agree);
     await userEvent.click(screen.getByRole('button', { name: /Submit/ }));
@@ -239,7 +239,7 @@ describe('the page refuses a submit that leaves a required row empty', () => {
 
   it('CONTROL — the same form with the required radio picked submits', async () => {
     await renderForm();
-    const agree = screen.getByRole('switch', { name: 'Agree' });
+    const agree = screen.getByRole('checkbox', { name: 'Agree' });
     await userEvent.click(agree);
     await userEvent.click(agree);
     await userEvent.click(screen.getByRole('radio', { name: 'Low' }));
 
@@ -0,0 +1,51 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * objectstack#27519 — the form designer's control preview draws the boolean
+ * face the runtime form draws.
+ *
+ * The defect: `FieldControlPreview` was a hand-written switch on the raw type.
+ * A field authored as Checkbox (`boolean`) drew the switch pill, and a Toggle
+ * (`toggle`) fell to the empty text box. The preview now reads
+ * `resolveBooleanControl`, the same answer `BooleanField` reads in the record
+ * form, so the case below compares the card with that function rather than
+ * restating the table.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import * as React from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { resolveBooleanControl } from '@object-ui/fields';
+import { ObjectFormDesigner } from './ObjectFormDesigner';
+
+afterEach(cleanup);
+
+const FIELDS = [
+  { name: 'urgent', type: 'boolean', label: 'Urgent' },
+  { name: 'notify', type: 'toggle', label: 'Notify' },
+];
+
+function cardControl(label: string): string | null {
+  const card = screen.getByText(label).closest('[aria-roledescription], [role="button"], div.flex-col');
+  return card?.querySelector('[data-boolean-control]')?.getAttribute('data-boolean-control') ?? null;
+}
+
+describe('the canvas previews a boolean field with the runtime form\'s face (objectstack#27519)', () => {
+  it('Checkbox (`boolean`) previews a checkbox and Toggle (`toggle`) a switch', () => {
+    render(
+      <ObjectFormDesigner
+        draft={{ name: 'work_order', fields: FIELDS }}
+        systemFieldNames={new Set()}
+        onChange={() => {}}
+        onSelectField={() => {}}
+      />,
+    );
+
+    expect(cardControl('Urgent')).toBe('checkbox');
+    expect(cardControl('Notify')).toBe('switch');
+    // The same answer the record form's widget reads, not a canvas copy.
+    expect(cardControl('Urgent')).toBe(resolveBooleanControl({ type: 'boolean' }));
+    expect(cardControl('Notify')).toBe(resolveBooleanControl({ type: 'toggle' }));
+  });
+});
@@ -38,6 +38,7 @@ import { GripVertical, Plus, Trash2, ChevronUp, ChevronDown, ChevronsUpDown, Pan
 import { cn } from '@object-ui/components';
 import { inferColumns, containerGridColsFor, isWideFieldType } from '@object-ui/plugin-form';
 import { toFormFieldType } from './formFieldType.js';
+import { resolveBooleanControl } from '@object-ui/fields';
 import {
   readFields,
   writeFields,
@@ -362,14 +363,23 @@ function FieldControlPreview({ type }: { type: string }): React.ReactElement {
     case 'json':
     case 'code':
       return <div className={`${box} h-14`} />;
+    // objectstack#27519 — the runtime form's own answer, not a canvas copy:
+    // `boolean` previews a checkbox and `toggle` a switch, as the type picker
+    // promises. `toggle` used to fall to the text box below, and `boolean`
+    // drew the switch pill.
     case 'boolean':
+    case 'toggle':
     case 'checkbox':
-    case 'switch':
+    case 'switch': {
+      const control = resolveBooleanControl({ type });
       return (
-        <div className="flex h-8 items-center">
-          <span className="h-4 w-7 rounded-full bg-muted" />
+        <div className="flex h-8 items-center" data-boolean-control={control}>
+          {control === 'checkbox'
+            ? <span className="h-4 w-4 rounded-sm border border-muted-foreground/40" />
+            : <span className="h-4 w-7 rounded-full bg-muted" />}
         </div>
       );
+    }
     case 'number':
     case 'currency':
     case 'percent':
 
@@ -90,16 +90,23 @@ function labelTargets(): Array<{ text: string; forId: string; resolves: boolean
     .filter((l) => l.forId !== '');
 }
 
-const switchOf = (name: string): Element => {
-  const el = document.querySelector(`[data-field="${name}"] [role="switch"]`);
-  if (!el) throw new Error(`no switch rendered for field "${name}"`);
+/** The two-state control a field row drew — a switch or a checkbox. */
+const controlOf = (name: string): Element => {
+  const el = document.querySelector(`[data-field="${name}"] [role="switch"], [data-field="${name}"] [role="checkbox"]`);
+  if (!el) throw new Error(`no two-state control rendered for field "${name}"`);
   return el;
 };
 
+// A `toggle`, in the shape `ObjectForm` hands the form: the widget id
+// `mapFieldTypeToFormType` resolves (`field:boolean` for both boolean types)
+// plus the object's own field metadata, whose `type` decides the face — a
+// `toggle` draws a switch, a `boolean` a checkbox (objectstack#27519). The
+// two-field case below hosts one of each.
 const BOOLEAN_FIELD = {
   name: 'notifications',
   label: 'Email Notifications',
-  type: 'boolean',
+  type: 'field:boolean',
+  field: { name: 'notifications', label: 'Email Notifications', type: 'toggle' },
 };
 
 describe('a form-hosted boolean field is labelled by its HOST (objectui#3952)', () => {
@@ -127,7 +134,7 @@ describe('a form-hosted boolean field is labelled by its HOST (objectui#3952)',
     // duplicate is pinned by the label-text count below.
     const labelled = screen.getAllByLabelText('Email Notifications');
     expect(labelled).toHaveLength(1);
-    expect(labelled[0]).toBe(switchOf('notifications'));
+    expect(labelled[0]).toBe(controlOf('notifications'));
     expect(labelled[0]).toHaveAttribute('role', 'switch');
   });
 
@@ -142,21 +149,21 @@ describe('a form-hosted boolean field is labelled by its HOST (objectui#3952)',
   it('activating the visible label toggles the switch', () => {
     renderForm(BOOLEAN_FIELD, false);
 
-    const control = switchOf('notifications');
+    const control = controlOf('notifications');
     expect(control).toHaveAttribute('aria-checked', 'false');
 
     // The user-facing symptom of #3952: the normal affordance for a switch row
     // is clicking its label. It reaches the control only through the `for`/id
     // association the form set up.
     fireEvent.click(screen.getByText('Email Notifications'));
 
-    expect(switchOf('notifications')).toHaveAttribute('aria-checked', 'true');
+    expect(controlOf('notifications')).toHaveAttribute('aria-checked', 'true');
   });
 
   it('the control keeps the HOST id verbatim — the widget does not rename it', () => {
     renderForm(BOOLEAN_FIELD, false);
 
-    const control = switchOf('notifications');
+    const control = controlOf('notifications');
     const id = control.getAttribute('id') ?? '';
     // The host's id is a `useId()`-derived form-item id; the field name is what
     // the widget used to substitute for it.
@@ -185,11 +192,14 @@ describe('a form-hosted boolean field is labelled by its HOST (objectui#3952)',
     );
 
     expect(labelTargets().filter((l) => !l.resolves)).toEqual([]);
-    // Each label reaches its OWN switch (a shared/colliding id would make both
-    // resolve to the first one).
+    // Each label reaches its OWN control (a shared/colliding id would make both
+    // resolve to the first one). The `boolean` row draws a checkbox, the
+    // `toggle` row a switch (objectstack#27519).
     fireEvent.click(screen.getByText('Weekly Digest'));
-    expect(switchOf('digest')).toHaveAttribute('aria-checked', 'true');
-    expect(switchOf('notifications')).toHaveAttribute('aria-checked', 'false');
+    expect(controlOf('digest')).toHaveAttribute('role', 'checkbox');
+    expect(controlOf('digest')).toHaveAttribute('aria-checked', 'true');
+    expect(controlOf('notifications')).toHaveAttribute('role', 'switch');
+    expect(controlOf('notifications')).toHaveAttribute('aria-checked', 'false');
   });
 });
 
@@ -203,7 +213,7 @@ describe('a STANDALONE boolean widget keeps its own accessible name (objectui#39
       <BooleanField
         value={false}
         onChange={() => {}}
-        field={{ name: 'notifications', label: 'Email Notifications', type: 'boolean' } as any}
+        field={{ name: 'notifications', label: 'Email Notifications', type: 'toggle' } as any}
       />,
     );
 
@@ -223,7 +233,6 @@ describe('a STANDALONE boolean widget keeps its own accessible name (objectui#39
             name: 'agreed',
             label: 'I agree',
             type: 'boolean',
-            widget: 'checkbox',
           } as any
         }
       />,
@@ -259,7 +268,7 @@ describe('a host that labels by field NAME keeps its association (objectui#3952)
       </div>,
     );
 
-    const control = document.querySelector('[role="switch"]')!;
+    const control = document.querySelector('[role="checkbox"]')!;
     expect(control).toHaveAttribute('id', 'confirmed');
     expect(labelTargets().filter((l) => !l.resolves)).toEqual([]);
     // The host's OWN label reaches the control through that id.
@@ -268,23 +277,21 @@ describe('a host that labels by field NAME keeps its association (objectui#3952)
 });
 
 describe('a host-supplied id wins for BOTH variants (objectui#3952)', () => {
-  // The checkbox variant is unreachable through the standalone form renderer —
-  // `resolvedType = widget || field.widget || type` turns `widget: 'checkbox'`
-  // into the renderer's own BUILTIN `checkbox` branch before the registry is
-  // consulted — so its host contract is pinned at the prop boundary, exactly
-  // as `<FormControl>`'s Slot delivers it.
+  // Pinned at the prop boundary, exactly as `<FormControl>`'s Slot delivers
+  // it: a `toggle` draws the switch variant and a `boolean` the checkbox
+  // variant (objectstack#27519).
   it.each([
-    ['switch', undefined, 'switch'],
-    ['checkbox', 'checkbox', 'checkbox'],
-  ] as const)('%s variant uses the id the host handed it', (_name, widget, role) => {
+    ['switch', 'toggle', 'switch'],
+    ['checkbox', 'boolean', 'checkbox'],
+  ] as const)('%s variant uses the id the host handed it', (_name, type, role) => {
     render(
       <label htmlFor="host-item">
         Host Label
         <BooleanField
           value={false}
           onChange={() => {}}
           id="host-item"
-          field={{ name: 'agreed', label: 'I agree', type: 'boolean', widget } as any}
+          field={{ name: 'agreed', label: 'I agree', type } as any}
         />
       </label>,
     );
 
@@ -0,0 +1,91 @@
+/**
+ * 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#27519 — one type-to-widget map for the two boolean types.
+ *
+ * Studio's type picker offers "Checkbox — shown as a checkbox" (`boolean`) and
+ * "Toggle — shown as a switch" (`toggle`). Both resolve to the one
+ * `field:boolean` widget, which drew a switch unless the field carried
+ * `widget: 'checkbox'`, so a field authored as Checkbox drew a switch in the
+ * record form and in the grid's inline editor. `resolveBooleanControl` is the
+ * one answer every surface reads (the Studio canvas preview included, pinned
+ * beside `ObjectFormDesigner`); these pin it and the two runtime hosts.
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { resolveBooleanControl } from '../index';
+import { BooleanField } from '../widgets/BooleanField';
+import { FieldEditWidget } from '../FieldEditWidget';
+
+afterEach(cleanup);
+
+describe('resolveBooleanControl', () => {
+  it.each([
+    [{ type: 'boolean' }, 'checkbox'],
+    [{ type: 'toggle' }, 'switch'],
+    // The bare widget id of a hand-authored form entry, and no type at all:
+    // the `boolean` type's own face.
+    [{ type: 'field:boolean' }, 'checkbox'],
+    [{}, 'checkbox'],
+    [undefined, 'checkbox'],
+  ] as const)('%o draws a %s by its type', (field, control) => {
+    expect(resolveBooleanControl(field)).toBe(control);
+  });
+
+  it.each([
+    [{ type: 'boolean', widget: 'switch' }, 'switch'],
+    [{ type: 'boolean', widget: 'toggle' }, 'switch'],
+    [{ type: 'toggle', widget: 'checkbox' }, 'checkbox'],
+    [{ type: 'toggle', widget: 'boolean' }, 'checkbox'],
+  ] as const)('an explicit boolean widget wins: %o draws a %s', (field, control) => {
+    expect(resolveBooleanControl(field)).toBe(control);
+  });
+
+  it('a widget that names no boolean face leaves the type to answer', () => {
+    expect(resolveBooleanControl({ type: 'toggle', widget: 'star_rating' })).toBe('switch');
+    expect(resolveBooleanControl({ type: 'boolean', widget: '' })).toBe('checkbox');
+  });
+});
+
+const roleDrawn = (): string | null => {
+  const el = document.querySelector('[role="switch"], [role="checkbox"]');
+  return el?.getAttribute('role') ?? null;
+};
+
+describe('the record form widget and the inline editor draw the same face', () => {
+  it.each([
+    ['boolean', undefined, 'checkbox'],
+    ['toggle', undefined, 'switch'],
+    ['boolean', 'switch', 'switch'],
+    ['toggle', 'checkbox', 'checkbox'],
+  ] as const)('BooleanField: type %s, widget %s draws a %s', (type, widget, role) => {
+    render(
+      <BooleanField
+        value={false}
+        onChange={() => {}}
+        field={{ name: 'urgent', label: 'Urgent', type, widget } as any}
+      />,
+    );
+    expect(roleDrawn()).toBe(role);
+  });
+
+  it.each([
+    ['boolean', 'checkbox'],
+    ['toggle', 'switch'],
+  ] as const)('FieldEditWidget: type %s draws a %s', (type, role) => {
+    render(
+      <FieldEditWidget
+        value={false}
+        onChange={() => {}}
+        field={{ name: 'urgent', label: 'Urgent', type } as any}
+      />,
+    );
+    expect(roleDrawn()).toBe(role);
+  });
+});