diff --git a/bestax-mcp/data/bulma-classes.json b/bestax-mcp/data/bulma-classes.json
index d1e3f7faf..4da485dfb 100644
--- a/bestax-mcp/data/bulma-classes.json
+++ b/bestax-mcp/data/bulma-classes.json
@@ -1071,6 +1071,166 @@
       "noHelpers": false,
       "ownClassOnly": false
     },
+    "field": {
+      "status": "mapped",
+      "target": "Field",
+      "tag": "div",
+      "as": null,
+      "sizeDrivesTag": false,
+      "textColor": "textColor",
+      "bgColor": "bgColor",
+      "part": false,
+      "why": null,
+      "modifiers": {
+        "is-horizontal": { "writes": [{ "prop": "horizontal" }] },
+        "is-grouped": { "writes": [{ "prop": "grouped" }] },
+        "has-addons": { "writes": [{ "prop": "hasAddons" }] },
+        "is-narrow": { "writes": [{ "prop": "narrow" }] }
+      },
+      "omits": {},
+      "wrapsChildren": {
+        "in": "field-body",
+        "unless": ["Field.Label", "Field.Body"],
+        "whenEmpty": true,
+        "when": "is-horizontal"
+      },
+      "noHelpers": false,
+      "ownClassOnly": false
+    },
+    "field-label": {
+      "status": "mapped",
+      "target": "Field.Label",
+      "tag": "div",
+      "as": null,
+      "sizeDrivesTag": false,
+      "textColor": null,
+      "bgColor": null,
+      "part": false,
+      "why": null,
+      "modifiers": {
+        "is-small": { "writes": [{ "prop": "size", "value": "small" }] },
+        "is-normal": { "writes": [{ "prop": "size", "value": "normal" }] },
+        "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
+        "is-large": { "writes": [{ "prop": "size", "value": "large" }] }
+      },
+      "omits": {},
+      "wrapsChildren": null,
+      "noHelpers": true,
+      "ownClassOnly": false
+    },
+    "field-body": {
+      "status": "mapped",
+      "target": "Field.Body",
+      "tag": "div",
+      "as": null,
+      "sizeDrivesTag": false,
+      "textColor": null,
+      "bgColor": null,
+      "part": false,
+      "why": null,
+      "modifiers": {},
+      "omits": {},
+      "wrapsChildren": null,
+      "noHelpers": true,
+      "ownClassOnly": false
+    },
+    "control": {
+      "status": "mapped",
+      "target": "Control",
+      "tag": "div",
+      "as": ["div", "p"],
+      "sizeDrivesTag": false,
+      "textColor": null,
+      "bgColor": null,
+      "part": false,
+      "why": null,
+      "modifiers": {
+        "has-icons-left": { "writes": [{ "prop": "hasIconsLeft" }] },
+        "has-icons-right": { "writes": [{ "prop": "hasIconsRight" }] },
+        "is-loading": { "writes": [{ "prop": "isLoading" }] },
+        "is-expanded": { "writes": [{ "prop": "isExpanded" }] },
+        "is-small": { "writes": [{ "prop": "size", "value": "small" }] },
+        "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
+        "is-large": { "writes": [{ "prop": "size", "value": "large" }] }
+      },
+      "omits": {},
+      "wrapsChildren": null,
+      "noHelpers": true,
+      "ownClassOnly": false
+    },
+    "input": {
+      "status": "mapped",
+      "target": "InputBase",
+      "tag": "input",
+      "as": null,
+      "sizeDrivesTag": false,
+      "textColor": null,
+      "bgColor": "backgroundColor",
+      "part": false,
+      "why": null,
+      "modifiers": {
+        "is-small": { "writes": [{ "prop": "size", "value": "small" }] },
+        "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
+        "is-large": { "writes": [{ "prop": "size", "value": "large" }] },
+        "is-rounded": { "writes": [{ "prop": "isRounded" }] },
+        "is-static": { "writes": [{ "prop": "isStatic" }] },
+        "is-hovered": { "writes": [{ "prop": "isHovered" }] },
+        "is-focused": { "writes": [{ "prop": "isFocused" }] },
+        "is-loading": { "writes": [{ "prop": "isLoading" }] }
+      },
+      "omits": {
+        "is-primary": "`color` renders `has-text-<color>` on the input as well",
+        "is-link": "`color` renders `has-text-<color>` on the input as well",
+        "is-info": "`color` renders `has-text-<color>` on the input as well",
+        "is-success": "`color` renders `has-text-<color>` on the input as well",
+        "is-warning": "`color` renders `has-text-<color>` on the input as well",
+        "is-danger": "`color` renders `has-text-<color>` on the input as well",
+        "is-black": "`color` renders `has-text-<color>` on the input as well",
+        "is-white": "`color` renders `has-text-<color>` on the input as well",
+        "is-light": "`color` renders `has-text-<color>` on the input as well",
+        "is-dark": "`color` renders `has-text-<color>` on the input as well"
+      },
+      "wrapsChildren": null,
+      "noHelpers": false,
+      "ownClassOnly": false
+    },
+    "textarea": {
+      "status": "mapped",
+      "target": "TextAreaBase",
+      "tag": "textarea",
+      "as": null,
+      "sizeDrivesTag": false,
+      "textColor": null,
+      "bgColor": "backgroundColor",
+      "part": false,
+      "why": null,
+      "modifiers": {
+        "is-small": { "writes": [{ "prop": "size", "value": "small" }] },
+        "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
+        "is-large": { "writes": [{ "prop": "size", "value": "large" }] },
+        "is-rounded": { "writes": [{ "prop": "isRounded" }] },
+        "is-static": { "writes": [{ "prop": "isStatic" }] },
+        "is-hovered": { "writes": [{ "prop": "isHovered" }] },
+        "is-focused": { "writes": [{ "prop": "isFocused" }] },
+        "is-active": { "writes": [{ "prop": "isActive" }] },
+        "has-fixed-size": { "writes": [{ "prop": "hasFixedSize" }] }
+      },
+      "omits": {
+        "is-primary": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-link": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-info": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-success": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-warning": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-danger": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-black": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-white": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-light": "`color` renders `has-text-<color>` on the textarea as well",
+        "is-dark": "`color` renders `has-text-<color>` on the textarea as well"
+      },
+      "wrapsChildren": null,
+      "noHelpers": false,
+      "ownClassOnly": false
+    },
     "footer": {
       "status": "mapped",
       "target": "Footer",
@@ -1810,102 +1970,6 @@
       "noHelpers": false,
       "ownClassOnly": false
     },
-    "field": {
-      "status": "todo",
-      "target": "Field",
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": false,
-      "why": "bestax form controls render their own `.field` and `.control` wrappers; see the unmappables reference",
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
-    "field-label": {
-      "status": "todo",
-      "target": null,
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": true,
-      "why": null,
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
-    "field-body": {
-      "status": "todo",
-      "target": null,
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": true,
-      "why": null,
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
-    "control": {
-      "status": "todo",
-      "target": null,
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": true,
-      "why": null,
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
-    "input": {
-      "status": "todo",
-      "target": "Input",
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": false,
-      "why": "bestax `Input` renders its own `.field` and `.control` wrappers",
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
-    "textarea": {
-      "status": "todo",
-      "target": "TextArea",
-      "tag": null,
-      "as": null,
-      "sizeDrivesTag": false,
-      "textColor": null,
-      "bgColor": null,
-      "part": false,
-      "why": "bestax `TextArea` renders its own `.field` and `.control` wrappers",
-      "modifiers": {},
-      "omits": {},
-      "wrapsChildren": null,
-      "noHelpers": false,
-      "ownClassOnly": false
-    },
     "select": {
       "status": "todo",
       "target": "Select",
@@ -2917,6 +2981,12 @@
     "navbar-item",
     "navbar-dropdown",
     "navbar-divider",
+    "field",
+    "field-label",
+    "field-body",
+    "control",
+    "input",
+    "textarea",
     "buttons",
     "tags",
     "button",
diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index f8a1d3b47..a7daacd86 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -103,17 +103,17 @@
         {
           "id": "bulma-classes-component-map",
           "file": "references/bulma-classes/component-map.md",
-          "bytes": 9829
+          "bytes": 11299
         },
         {
           "id": "bulma-classes-prop-map",
           "file": "references/bulma-classes/prop-map.md",
-          "bytes": 18331
+          "bytes": 21038
         },
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 10958
+          "bytes": 12302
         },
         {
           "id": "css-migration",
diff --git a/bestax-mcp/src/__tests__/server.test.ts b/bestax-mcp/src/__tests__/server.test.ts
index 34e4bd18b..a81e52b67 100644
--- a/bestax-mcp/src/__tests__/server.test.ts
+++ b/bestax-mcp/src/__tests__/server.test.ts
@@ -701,6 +701,11 @@ describe('lookup_bulma_classes', () => {
       '**Component:** `Card`. It renders its children inside a `.card-content` of its own unless one of them is a `Card.Header`,'
     );
     expect(await lookup('card-content')).not.toContain('renders its children');
+    // A field wraps its children only when it's horizontal.
+    expect(await lookup('field is-horizontal', 'div')).toContain(
+      'inside a `.field-body` of its own unless one of them is a `Field.Label` or `Field.Body`'
+    );
+    expect(await lookup('field', 'div')).not.toContain('renders its children');
   });
 
   it('answers helper classes with no component, and says what that depends on', async () => {
diff --git a/bestax-mcp/src/bulma-classes.ts b/bestax-mcp/src/bulma-classes.ts
index 02372a29c..1514bbae1 100644
--- a/bestax-mcp/src/bulma-classes.ts
+++ b/bestax-mcp/src/bulma-classes.ts
@@ -57,6 +57,8 @@ export interface Wraps {
   unless: string[];
   /** It renders that element with no children too. */
   whenEmpty?: boolean;
+  /** Only when the element carries this class (`Field` with `is-horizontal`). */
+  when?: string;
 }
 
 export interface HelperRecord {
@@ -291,7 +293,12 @@ export function lookupClasses(
     };
   }
   const target = entry.target;
-  const wraps = entry.wrapsChildren ?? undefined;
+  const wrapsChildren = entry.wrapsChildren;
+  const wraps =
+    wrapsChildren &&
+    (!wrapsChildren.when || tokens.includes(wrapsChildren.when))
+      ? wrapsChildren
+      : undefined;
 
   // Each class as the root's modifier, else as a helper prop, in order; the
   // first class to set a prop keeps it.
diff --git a/bestax-migrate/CLAUDE.md b/bestax-migrate/CLAUDE.md
index e0f34d23b..94c97e483 100644
--- a/bestax-migrate/CLAUDE.md
+++ b/bestax-migrate/CLAUDE.md
@@ -95,7 +95,8 @@ is the one with no library behind it, converting raw Bulma classes on plain JSX.
   `scripts/gen-mcp-index.mjs` for the MCP server's `lookup_bulma_classes`, so no enums or
   runtime imports; a change to it wants `pnpm gen:mcp` in the same PR, and bestax-mcp's
   tests run this planner beside that tool), `plan.ts` (pure: one element's tag,
-  classes, attributes and what its children became in, a conversion or a TODO out; an entry
+  classes, attributes, what its children became and the bestax components already around and
+  inside it in, a conversion or a TODO out; an entry
   with `wrapsChildren` converts only beside one of its parts, so `transform.ts` plans children
   before their parents), `rules.ts` (rule ids from a closed
   vocabulary, since the input is the app's own class strings and telemetry must never carry
diff --git a/bestax-migrate/e2e/bulma-classes-truth.test.ts b/bestax-migrate/e2e/bulma-classes-truth.test.ts
index d4d99880a..7e46e67e5 100644
--- a/bestax-migrate/e2e/bulma-classes-truth.test.ts
+++ b/bestax-migrate/e2e/bulma-classes-truth.test.ts
@@ -15,9 +15,10 @@
  * table entry converts somewhere, so no row is dead.
  */
 
+import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import {
   FORWARDS_REF,
   HELPER_TOKENS,
@@ -40,8 +41,11 @@ const repoRoot = path.join(
   '..'
 );
 
-/** Elements that must stay empty in HTML. */
-const VOID = new Set(['input', 'hr', 'img', 'br']);
+/**
+ * Elements rendered with no children: the void ones, and `<textarea>`, whose
+ * text React refuses beside a `value`.
+ */
+const VOID = new Set(['input', 'hr', 'img', 'br', 'textarea']);
 
 const mapped = Object.entries(ROOTS).filter(
   ([, entry]) => entry.status === 'mapped'
@@ -190,12 +194,14 @@ describe.each(mapped)('`.%s`', (root, entry) => {
   });
 
   if (entry.wrapsChildren) {
-    const { unless, whenEmpty } = entry.wrapsChildren;
+    const { unless, whenEmpty, when } = entry.wrapsChildren;
+    // The classes that switch the wrapping on (`Field` wraps when horizontal).
+    const wrapping = [root, ...(when ? [when] : [])];
 
     it.each(unless)('renders the same around a %s', part => {
       const inside = partChild(part);
       const both = renderBoth(
-        factsFor(entry.tag!, [root], defaults, inside),
+        factsFor(entry.tag!, wrapping, defaults, inside),
         defaults,
         inside
       );
@@ -204,7 +210,7 @@ describe.each(mapped)('`.%s`', (root, entry) => {
     });
 
     it(`${whenEmpty ? 'refuses' : 'converts'} with no children`, () => {
-      const facts = { ...factsFor(entry.tag!, [root]), hasChildren: false };
+      const facts = { ...factsFor(entry.tag!, wrapping), hasChildren: false };
       const result = plan(facts);
       expect(result.conversion === null).toBe(Boolean(whenEmpty));
       if (whenEmpty) return;
@@ -212,6 +218,14 @@ describe.each(mapped)('`.%s`', (root, entry) => {
         normalizeHtml(renderElement(entry.tag!, { className: root }))
       );
     });
+
+    if (when) {
+      it(`wraps only with \`${when}\``, () => {
+        const facts = factsFor(entry.tag!, [root]);
+        expect(plan(facts).conversion?.target).toBe(entry.target);
+        expect(plan(factsFor(entry.tag!, wrapping)).conversion).toBeNull();
+      });
+    }
   }
 });
 
@@ -277,6 +291,36 @@ describe("the table's claims about the library", () => {
         ([target, props]): [string, string[]] => [target, [...props]]
       ),
     ]);
+    // A public component with no API page of its own (`InputBase`) is not in
+    // the index, so read its props the way the index would.
+    const unindexed = [...classified.keys()].filter(
+      target => !declared.has(target)
+    );
+    if (unindexed.length > 0) {
+      const extractor = pathToFileURL(
+        path.join(repoRoot, 'scripts', 'lib', 'props-extract.mjs')
+      ).href;
+      const script = `
+        const { extractComponent } = await import(${JSON.stringify(extractor)});
+        const out = {};
+        for (const name of ${JSON.stringify(unindexed)}) {
+          for (const table of extractComponent(name, { markdown: false }).tables) {
+            out[table.path] = table.rows.map(row => row.name);
+          }
+        }
+        console.log(JSON.stringify(out));`;
+      const extracted: Record<string, string[]> = JSON.parse(
+        execFileSync(process.execPath, ['--input-type=module', '-e', script], {
+          encoding: 'utf8',
+        })
+      );
+      for (const [target, props] of Object.entries(extracted)) {
+        declared.set(
+          target,
+          props.filter(name => !['className', 'children'].includes(name))
+        );
+      }
+    }
     for (const [target, props] of classified) {
       expect({ target, props: [...props].sort() }).toEqual({
         target,
diff --git a/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx b/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
index c65b660bc..04df563bc 100644
--- a/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
+++ b/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
@@ -62,6 +62,39 @@ export function Elements() {
           <span className="card-footer-item">Saved</span>
         </footer>
       </div>
+      <form>
+        <div className="field">
+          <label className="label" htmlFor="email">
+            Email
+          </label>
+          <div className="control is-loading">
+            <input
+              id="email"
+              className="input is-rounded is-medium"
+              type="email"
+              required
+            />
+          </div>
+          <p className="help">We never share it.</p>
+        </div>
+        <div className="field">
+          <div className="control">
+            <textarea className="textarea has-fixed-size" rows={3} />
+          </div>
+        </div>
+        <div className="field is-horizontal">
+          <div className="field-label is-small">
+            <label className="label">Name</label>
+          </div>
+          <div className="field-body">
+            <div className="field has-addons">
+              <p className="control is-expanded">
+                <input className="input is-small" type="text" disabled />
+              </p>
+            </div>
+          </div>
+        </div>
+      </form>
       <div className="block">A block</div>
     </div>
   );
diff --git a/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.input.tsx b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.input.tsx
new file mode 100644
index 000000000..0bf4b8bd3
--- /dev/null
+++ b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.input.tsx
@@ -0,0 +1,70 @@
+export function SignUp() {
+  return (
+    <form>
+      <div className="field">
+        <label className="label">Name</label>
+        <div className="control">
+          <input className="input" type="text" placeholder="Text input" />
+        </div>
+      </div>
+      <div className="field">
+        <label className="label">Username</label>
+        <div className="control has-icons-left">
+          <input
+            className="input is-success"
+            type="text"
+            placeholder="Text input"
+            defaultValue="bulma"
+          />
+          <span className="icon is-small is-left">
+            <i className="fas fa-user"></i>
+          </span>
+        </div>
+        <p className="help is-success">This username is available</p>
+      </div>
+      <div className="field">
+        <label className="label">Subject</label>
+        <div className="control">
+          <div className="select">
+            <select>
+              <option>Select dropdown</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div className="field">
+        <label className="label">Message</label>
+        <div className="control">
+          <textarea className="textarea is-small" placeholder="Textarea"></textarea>
+        </div>
+      </div>
+      <div className="field">
+        <div className="control">
+          <label className="checkbox">
+            <input type="checkbox" /> I agree
+          </label>
+        </div>
+      </div>
+      <div className="field is-horizontal">
+        <div className="field-label is-normal">
+          <label className="label">From</label>
+        </div>
+        <div className="field-body">
+          <div className="field">
+            <p className="control is-expanded">
+              <input className="input" type="text" placeholder="Name" />
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="field is-grouped">
+        <div className="control">
+          <button className="button is-link">Submit</button>
+        </div>
+        <div className="control">
+          <button className="button is-link is-light">Cancel</button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.output.tsx b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.output.tsx
new file mode 100644
index 000000000..48ce4d0a2
--- /dev/null
+++ b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/form.output.tsx
@@ -0,0 +1,74 @@
+import { Button, Control, Field, InputBase, TextAreaBase } from "@allxsmith/bestax-bulma";
+export function SignUp() {
+  // TODO(bestax-migrate): `.icon` stays as markup: bestax `Icon` renders its own `<i>` and adds an `aria-label`
+  // TODO(bestax-migrate): `.select` stays as markup: bestax `Select` renders the `.select` wrapper and the `<select>` together
+  // TODO(bestax-migrate): `.checkbox` stays as markup: bestax `Checkbox` renders its own styled markup, not Bulma's
+  return (
+    <form>
+      <Field>
+        <label className="label">Name</label>
+        <Control>
+          <InputBase type="text" placeholder="Text input" />
+        </Control>
+      </Field>
+      <Field>
+        <label className="label">Username</label>
+        <Control hasIconsLeft>
+          <InputBase
+            className="is-success"
+            type="text"
+            placeholder="Text input"
+            defaultValue="bulma"
+          />
+          <span className="icon is-small is-left">
+            <i className="fas fa-user"></i>
+          </span>
+        </Control>
+        <p className="help is-success">This username is available</p>
+      </Field>
+      <Field>
+        <label className="label">Subject</label>
+        <Control>
+          <div className="select">
+            <select>
+              <option>Select dropdown</option>
+            </select>
+          </div>
+        </Control>
+      </Field>
+      <Field>
+        <label className="label">Message</label>
+        <Control>
+          <TextAreaBase size="small" placeholder="Textarea"></TextAreaBase>
+        </Control>
+      </Field>
+      <Field>
+        <Control>
+          <label className="checkbox">
+            <input type="checkbox" /> I agree
+          </label>
+        </Control>
+      </Field>
+      <Field horizontal>
+        <Field.Label size="normal">
+          <label className="label">From</label>
+        </Field.Label>
+        <Field.Body>
+          <Field>
+            <Control as="p" isExpanded>
+              <InputBase type="text" placeholder="Name" />
+            </Control>
+          </Field>
+        </Field.Body>
+      </Field>
+      <Field grouped>
+        <Control>
+          <Button color="link">Submit</Button>
+        </Control>
+        <Control>
+          <Button color="link" isLight>Cancel</Button>
+        </Control>
+      </Field>
+    </form>
+  );
+}
diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
index 2e2da662a..76307ab22 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
@@ -463,6 +463,70 @@ describe('plan', () => {
     });
   });
 
+  describe('forms', () => {
+    it('keeps an input color as a class, since color sets the text too', () => {
+      expect(
+        plan(
+          facts('input', 'input is-danger is-small', {}, { hasChildren: false })
+        ).conversion
+      ).toEqual({
+        target: 'InputBase',
+        props: [['size', 'small']],
+        className: 'is-danger',
+        drop: [],
+        numbers: [],
+      });
+    });
+
+    it('keeps the addon and group variants as classes', () => {
+      expect(
+        plan(facts('div', 'field has-addons has-addons-centered')).conversion
+      ).toEqual({
+        target: 'Field',
+        props: [['hasAddons', true]],
+        className: 'has-addons-centered',
+        drop: [],
+        numbers: [],
+      });
+    });
+
+    it('keeps a field around a bestax form control as markup', () => {
+      expect(
+        plan(facts('div', 'field', {}, { bestaxInside: ['Input'] })).todos
+      ).toEqual([
+        { rule: 'context:Field', message: expect.stringContaining('`Input`') },
+      ]);
+    });
+
+    it('keeps an input without an id inside a bestax Field as markup', () => {
+      const input = (attributes: Record<string, string>) =>
+        plan(
+          facts('input', 'input', attributes, {
+            hasChildren: false,
+            bestaxAround: ['Field'],
+          })
+        );
+      expect(input({}).todos.map(todo => todo.rule)).toEqual([
+        'context:InputBase',
+      ]);
+      expect(input({ id: 'email' }).conversion?.target).toBe('InputBase');
+    });
+
+    it('keeps an input without an id inside any other component as markup', () => {
+      const input = (componentsAround: string[]) =>
+        plan(
+          facts('input', 'input', {}, { hasChildren: false, componentsAround })
+        );
+      expect(input(['Labelled']).todos).toEqual([
+        {
+          rule: 'context:InputBase',
+          message: expect.stringContaining('inside `<Labelled>`'),
+        },
+      ]);
+      expect(input([]).conversion?.target).toBe('InputBase');
+    });
+  });
+
   describe('number attributes', () => {
     it('turns a number spelled the way it renders into a number', () => {
       expect(
diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
index 16a7e2ea2..5d4f7f9f9 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
@@ -453,6 +453,61 @@ describe('a component that wraps its children', () => {
   });
 });
 
+describe('form context', () => {
+  it('keeps a field or control around a bestax form control as markup', () => {
+    const { output, rules } = migrate(
+      'import { Input } from "@allxsmith/bestax-bulma";\nexport const A = () => (\n  <div className="field">\n    <div className="control">\n      <Input />\n    </div>\n  </div>\n);\n'
+    );
+    expect(rules).toEqual(['context:Field', 'context:Control']);
+    expect(output).toContain('<div className="field">');
+    expect(output).toContain('<div className="control">');
+  });
+
+  it('keeps an input with no id inside a bestax Field as markup', () => {
+    const inside = (input: string) =>
+      migrate(
+        `import { Field } from "@allxsmith/bestax-bulma";\nexport const A = () => (\n  <Field label="Email">\n    ${input}\n  </Field>\n);\n`
+      );
+    expect(inside('<input className="input" />').rules).toEqual([
+      'context:InputBase',
+    ]);
+    expect(inside('<input id="email" className="input" />').output).toContain(
+      '<InputBase id="email" />'
+    );
+  });
+
+  it('keeps an input with no id inside any other component as markup', () => {
+    // Context follows the render tree: `Labelled` renders a labelled Field.
+    const wrapped = (input: string, wrapper = 'Labelled') =>
+      migrate(
+        `import { Field } from "@allxsmith/bestax-bulma";\nconst Labelled = ({ children }: { children: React.ReactNode }) => <Field label="Email">{children}</Field>;\nexport const A = () => (\n  <${wrapper}>\n    ${input}\n    <p className="help">Required</p>\n  </${wrapper}>\n);\n`
+      );
+    expect(wrapped('<input className="input" type="email" />').rules).toEqual([
+      'context:InputBase',
+    ]);
+    expect(
+      wrapped('<input id="email" className="input" type="email" />').output
+    ).toContain('<InputBase id="email" type="email" />');
+    expect(
+      wrapped('<input className="input" type="email" />', 'React.Fragment')
+        .rules
+    ).toEqual([]);
+  });
+
+  it('converts a horizontal field once its label and body do', () => {
+    const { output, rules } = migrate(
+      'export const A = () => (\n  <div className="field is-horizontal">\n    <div className="field-label">\n      <label className="label">Name</label>\n    </div>\n    <div className="field-body">x</div>\n  </div>\n);\n'
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Field horizontal>');
+    expect(
+      migrate(
+        'export const A = () => <div className="field is-horizontal">x</div>;\n'
+      ).rules
+    ).toEqual(['children:Field']);
+  });
+});
+
 describe('printing', () => {
   it('keeps JSX text exactly as written inside return ( … )', () => {
     const body =
diff --git a/bestax-migrate/src/sources/bulma-classes/class-map.ts b/bestax-migrate/src/sources/bulma-classes/class-map.ts
index d3bd28fbe..4619d7858 100644
--- a/bestax-migrate/src/sources/bulma-classes/class-map.ts
+++ b/bestax-migrate/src/sources/bulma-classes/class-map.ts
@@ -78,7 +78,20 @@ export interface RootEntry {
     readonly in: string;
     readonly unless: readonly string[];
     readonly whenEmpty?: boolean;
+    /** Only when the element carries this class (`Field` with `is-horizontal`). */
+    readonly when?: string;
   };
+  /**
+   * The target provides context bestax's form controls read to skip wrappers
+   * of their own, so an element around a bestax component already in the file
+   * stays markup: that component would render differently.
+   */
+  readonly providesContext?: boolean;
+  /**
+   * Inside one of these bestax components already in the file, the target
+   * takes a generated `id` when the element has none of its own.
+   */
+  readonly adoptsIdFrom?: readonly string[];
   /** The target takes no helper props, so every helper class stays a class. */
   readonly noHelpers?: boolean;
   /**
@@ -699,6 +712,172 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     ],
     passThrough: ['onClick'],
   },
+  // Form markup. `Field` and `Control` tell the bestax form controls inside
+  // them to skip wrappers of their own, and `InputBase` / `TextAreaBase` are
+  // the controls without wrappers (a `Field` with no `label` hands them no id).
+  field: {
+    ...BASE,
+    target: 'Field',
+    tag: 'div',
+    // `has-addons-centered`, `is-grouped-right` and the like stay classes:
+    // the prop values that render them render `has-addons` too.
+    modifiers: flags({
+      'is-horizontal': 'horizontal',
+      'is-grouped': 'grouped',
+      'has-addons': 'hasAddons',
+      'is-narrow': 'narrow',
+    }),
+    wrapsChildren: {
+      in: 'field-body',
+      unless: ['Field.Label', 'Field.Body'],
+      whenEmpty: true,
+      when: 'is-horizontal',
+    },
+    providesContext: true,
+    ownProps: [
+      'horizontal',
+      'grouped',
+      'hasAddons',
+      'narrow',
+      'label',
+      'labelSize',
+      'labelProps',
+      'textColor',
+      'color',
+      'bgColor',
+    ],
+  },
+  // Field.Label, Field.Body and Control spread their raw props onto the
+  // element as well, so a helper prop would reach it as an attribute too.
+  'field-label': {
+    status: 'mapped',
+    target: 'Field.Label',
+    tag: 'div',
+    textColor: null,
+    bgColor: null,
+    noHelpers: true,
+    modifiers: tokens('is-', ['small', 'normal', 'medium', 'large'], 'size'),
+    ownProps: ['size', 'textColor', 'color', 'bgColor'],
+  },
+  'field-body': {
+    status: 'mapped',
+    target: 'Field.Body',
+    tag: 'div',
+    textColor: null,
+    bgColor: null,
+    noHelpers: true,
+    ownProps: ['textColor', 'color', 'bgColor'],
+  },
+  control: {
+    status: 'mapped',
+    target: 'Control',
+    tag: 'div',
+    as: ['div', 'p'],
+    textColor: null,
+    bgColor: null,
+    noHelpers: true,
+    modifiers: {
+      ...flags({
+        'has-icons-left': 'hasIconsLeft',
+        'has-icons-right': 'hasIconsRight',
+        'is-loading': 'isLoading',
+        'is-expanded': 'isExpanded',
+      }),
+      ...tokens('is-', ['small', 'medium', 'large'], 'size'),
+    },
+    providesContext: true,
+    ownProps: [
+      'as',
+      'hasIconsLeft',
+      'hasIconsRight',
+      'isLoading',
+      'isExpanded',
+      'size',
+      'textColor',
+      'color',
+      'bgColor',
+      'iconLeft',
+      'iconRight',
+      'iconLeftName',
+      'iconLeftSize',
+      'iconRightName',
+      'iconRightSize',
+    ],
+    passThrough: ['ref'],
+  },
+  input: {
+    ...BASE,
+    target: 'InputBase',
+    tag: 'input',
+    // No text color prop, and `backgroundColor` is the one the base reads.
+    textColor: null,
+    bgColor: 'backgroundColor',
+    modifiers: {
+      ...tokens('is-', ['small', 'medium', 'large'], 'size'),
+      ...flags({
+        'is-rounded': 'isRounded',
+        'is-static': 'isStatic',
+        'is-hovered': 'isHovered',
+        'is-focused': 'isFocused',
+        'is-loading': 'isLoading',
+      }),
+    },
+    omits: Object.fromEntries(
+      COMPONENT_COLORS.map(color => [
+        `is-${color}`,
+        '`color` renders `has-text-<color>` on the input as well',
+      ])
+    ),
+    adoptsIdFrom: ['Field'],
+    ownProps: [
+      'color',
+      'size',
+      'isRounded',
+      'isStatic',
+      'isHovered',
+      'isFocused',
+      'isLoading',
+    ],
+    passThrough: ['disabled', 'readOnly', 'ref'],
+  },
+  textarea: {
+    ...BASE,
+    target: 'TextAreaBase',
+    tag: 'textarea',
+    textColor: null,
+    bgColor: 'backgroundColor',
+    // `isLoading` renders nothing here: Bulma puts `is-loading` on the control.
+    modifiers: {
+      ...tokens('is-', ['small', 'medium', 'large'], 'size'),
+      ...flags({
+        'is-rounded': 'isRounded',
+        'is-static': 'isStatic',
+        'is-hovered': 'isHovered',
+        'is-focused': 'isFocused',
+        'is-active': 'isActive',
+        'has-fixed-size': 'hasFixedSize',
+      }),
+    },
+    omits: Object.fromEntries(
+      COMPONENT_COLORS.map(color => [
+        `is-${color}`,
+        '`color` renders `has-text-<color>` on the textarea as well',
+      ])
+    ),
+    adoptsIdFrom: ['Field'],
+    ownProps: [
+      'color',
+      'size',
+      'isRounded',
+      'isStatic',
+      'isHovered',
+      'isFocused',
+      'isLoading',
+      'isActive',
+      'hasFixedSize',
+    ],
+    passThrough: ['disabled', 'readOnly', 'rows', 'ref'],
+  },
   footer: {
     ...BASE,
     target: 'Footer',
@@ -1066,21 +1245,6 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     'Radios',
     'bestax `Radios` renders its own `.field` and `.control` wrappers'
   ),
-  field: todo(
-    'Field',
-    'bestax form controls render their own `.field` and `.control` wrappers; see the unmappables reference'
-  ),
-  'field-label': part(),
-  'field-body': part(),
-  control: part(),
-  input: todo(
-    'Input',
-    'bestax `Input` renders its own `.field` and `.control` wrappers'
-  ),
-  textarea: todo(
-    'TextArea',
-    'bestax `TextArea` renders its own `.field` and `.control` wrappers'
-  ),
   select: todo(
     'Select',
     'bestax `Select` renders the `.select` wrapper and the `<select>` together'
@@ -1255,6 +1419,12 @@ export const PRECEDENCE: readonly string[] = [
   'navbar-item',
   'navbar-dropdown',
   'navbar-divider',
+  'field',
+  'field-label',
+  'field-body',
+  'control',
+  'input',
+  'textarea',
   'buttons',
   'tags',
   'button',
@@ -1276,6 +1446,9 @@ export const FORWARDS_REF: readonly string[] = [
   'Link',
   'Navbar',
   'Navbar.Item',
+  'Control',
+  'InputBase',
+  'TextAreaBase',
 ];
 
 /**
diff --git a/bestax-migrate/src/sources/bulma-classes/plan.ts b/bestax-migrate/src/sources/bulma-classes/plan.ts
index 5a7d69997..09501c2f9 100644
--- a/bestax-migrate/src/sources/bulma-classes/plan.ts
+++ b/bestax-migrate/src/sources/bulma-classes/plan.ts
@@ -44,6 +44,15 @@ export interface ElementFacts {
    * counts: one in an expression may not render.
    */
   childTargets?: readonly string[];
+  /** The bestax components already in the file inside this element. */
+  bestaxInside?: readonly string[];
+  /** The bestax components already in the file around this element. */
+  bestaxAround?: readonly string[];
+  /**
+   * The other components around this element (not bestax, not a fragment),
+   * any of which could render a bestax component around it.
+   */
+  componentsAround?: readonly string[];
   /**
    * The component this element is the only child of, if any (`Link` for
    * `<Link href="/x"><a className="button">`), since that component can
@@ -228,9 +237,31 @@ export function plan(facts: ElementFacts): Plan {
       `bestax \`${target}\` requires children, and this element has none; keep it as markup`
     );
   }
+  if (entry.providesContext && facts.bestaxInside?.length) {
+    return refuse(
+      'context',
+      target,
+      `bestax \`${target}\` tells the bestax form controls inside it to skip wrappers of their own, and this element already holds \`${facts.bestaxInside[0]}\`, which could render differently inside it; keep this element as markup, or convert it and check that component by hand`
+    );
+  }
+  if (entry.adoptsIdFrom && !facts.attributes.has('id')) {
+    // Context follows the render tree, not the file: a component of the app
+    // around the element can render a labelled `Field` around it just as well.
+    const around =
+      facts.bestaxAround?.find(name => entry.adoptsIdFrom!.includes(name)) ??
+      facts.componentsAround?.[0];
+    if (around) {
+      return refuse(
+        'context',
+        target,
+        `this element has no \`id\` and sits inside \`<${around}>\`, which is or could render a bestax \`${entry.adoptsIdFrom.join('` or `')}\` with a \`label\`; bestax \`${target}\` would then take that generated \`id\`; give the element an \`id\` of its own, then re-run`
+      );
+    }
+  }
   const wraps = entry.wrapsChildren;
   if (
     wraps &&
+    (!wraps.when || tokens.includes(wraps.when)) &&
     (facts.hasChildren || wraps.whenEmpty) &&
     !facts.childTargets?.some(child => wraps.unless.includes(child))
   ) {
diff --git a/bestax-migrate/src/sources/bulma-classes/rules.ts b/bestax-migrate/src/sources/bulma-classes/rules.ts
index bbb744b5e..5e607f9ea 100644
--- a/bestax-migrate/src/sources/bulma-classes/rules.ts
+++ b/bestax-migrate/src/sources/bulma-classes/rules.ts
@@ -22,6 +22,7 @@ import {
 export const KINDS: ReadonlySet<string> = new Set([
   'attr',
   'children',
+  'context',
   'defaults',
   'drops',
   'dynamic-class',
diff --git a/bestax-migrate/src/sources/bulma-classes/transform.ts b/bestax-migrate/src/sources/bulma-classes/transform.ts
index 8a91825b5..95f68ca82 100644
--- a/bestax-migrate/src/sources/bulma-classes/transform.ts
+++ b/bestax-migrate/src/sources/bulma-classes/transform.ts
@@ -367,21 +367,66 @@ export default function transform(
   // a child that is one of its parts.
   const planned = new Map<object, Plan>();
   const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
+  /**
+   * The bestax component an element already is, when its name is the bestax
+   * import and not a local that shadows it; `scopePath` is where the name is
+   * looked up.
+   */
+  const bestaxTarget = (
+    element: any,
+    scopePath: ASTPath<any>
+  ): string | undefined => {
+    const parts = jsxNameParts(element.openingElement.name);
+    const owner = parts && bestaxNames.get(parts[0]);
+    if (!owner || !resolvesToBinding(scopePath, parts[0], programScope)) {
+      return undefined;
+    }
+    return [...owner, ...parts.slice(1)].join('.');
+  };
   const childTargets = (elementPath: ASTPath<any>): string[] =>
     (elementPath.node.children ?? []).flatMap((child: any) => {
       if (child.type !== 'JSXElement') return [];
-      const target = planned.get(child)?.conversion?.target;
-      if (target) return [target];
-      // A part the file already uses counts when its name is the bestax
-      // import, not a local that shadows it. A direct child is looked up in
-      // the element's own scope, which is the child's.
-      const parts = jsxNameParts(child.openingElement.name);
-      const owner = parts && bestaxNames.get(parts[0]);
-      if (!owner || !resolvesToBinding(elementPath, parts[0], programScope)) {
-        return [];
-      }
-      return [[...owner, ...parts.slice(1)].join('.')];
+      const target =
+        planned.get(child)?.conversion?.target ??
+        // A direct child is looked up in the element's own scope, the child's.
+        bestaxTarget(child, elementPath);
+      return target ? [target] : [];
     });
+  // For each element, the bestax components already in the file inside it:
+  // `Field` and `Control` change how bestax's form controls render.
+  const bestaxInside = new Map<object, string[]>();
+  root.find(j.JSXElement).forEach(elementPath => {
+    const target = bestaxTarget(elementPath.node, elementPath);
+    if (!target) return;
+    for (let up = elementPath.parent; up; up = up.parent) {
+      if (up.node?.type !== 'JSXElement') continue;
+      bestaxInside.set(up.node, [...(bestaxInside.get(up.node) ?? []), target]);
+    }
+  });
+  /**
+   * The components around an element: the bestax ones already in the file,
+   * and the rest (not an HTML tag, not a fragment), which could render one.
+   */
+  const around = (
+    elementPath: ASTPath<any>
+  ): { bestax: string[]; other: string[] } => {
+    const bestax: string[] = [];
+    const other: string[] = [];
+    for (let up = elementPath.parent; up; up = up.parent) {
+      if (up.node?.type !== 'JSXElement') continue;
+      const target = bestaxTarget(up.node, up);
+      if (target) {
+        bestax.push(target);
+        continue;
+      }
+      const parts = jsxNameParts(up.node.openingElement.name);
+      const name = parts?.join('.');
+      if (name && !INTRINSIC.test(name) && !name.includes('-')) {
+        if (!PASS_THROUGH_PARENTS.has(name)) other.push(name);
+      }
+    }
+    return { bestax, other };
+  };
 
   // `converts` is whether the element would become a component with its
   // classes written out, so it holds for a computed className too.
@@ -403,6 +448,7 @@ export default function transform(
       attributes.set(attributeName(attr), attributeValue(attr));
     }
     const className = staticClassName(classAttr);
+    const surrounding = around(elementPath);
     const facts: ElementFacts = {
       tag: name.name,
       tokens:
@@ -416,6 +462,9 @@ export default function transform(
       hasRef: attributes.has('ref'),
       hasChildren: (element.children ?? []).some(reachesReact),
       childTargets: childTargets(elementPath),
+      bestaxInside: bestaxInside.get(element) ?? [],
+      bestaxAround: surrounding.bestax,
+      componentsAround: surrounding.other,
       onlyChildOf: onlyChildOf(elementPath, bestaxLocals),
     };
     let result = plan(facts);
diff --git a/docs/docs/guides/getting-started/migration/bulma-classes.md b/docs/docs/guides/getting-started/migration/bulma-classes.md
index d34ac0c99..00658fe2b 100644
--- a/docs/docs/guides/getting-started/migration/bulma-classes.md
+++ b/docs/docs/guides/getting-started/migration/bulma-classes.md
@@ -70,8 +70,8 @@ stock stylesheet.
 - **Components**: `button`, `buttons`, `columns`, `column`, `container`, `section`, `hero` and
   its parts, `title`, `subtitle`, `box`, `content`, `block`, `notification`, `tag`, `tags`,
   `level` and its parts, `media` and its parts, `card` and its parts, `navbar` and most of its
-  parts, `delete`, `progress`,
-  `footer` and `table` become their bestax components, with their modifier classes as props
+  parts, `field` and its parts, `control`, `input`, `textarea`, `delete`, `progress`, `footer`
+  and `table` become their bestax components, with their modifier classes as props
   (`is-primary` → `color="primary"`, `is-half` → `size="half"`).
 - **Helper classes** become helper props on those components (`mt-4` → `mt="4"`,
   `has-text-centered` → `textAlign="centered"`), and on the plain tags bestax wraps:
@@ -101,6 +101,10 @@ A couple of results look odd until you see why:
   `Navbar.Item` that keeps the class. Switching those to `Navbar.Burger` and `Navbar.Dropdown`
   is how the navbar gets bestax's toggle and keyboard handling, and it's a change you make by
   hand.
+- A form converts piece by piece into `Field`, `Control`, `InputBase` and `TextAreaBase`, not
+  into `Input` or `TextArea`: those render a `.field` and a `.control` of their own, and the
+  markup already has them. The `.label` and `.help` stay as written, and so does an input's
+  color class (`is-danger`), since bestax's `color` also sets the text color.
 
 ## What it leaves for you
 
@@ -109,9 +113,12 @@ Anything that would change the markup stays as written:
 - **Computed classNames.** `clsx(...)`, ternaries and templates with expressions are flagged
   with the component the element would become (`dynamic-class:<Target>`). Converting them
   means turning each condition into a prop, which is quick by hand and risky to guess at.
-- **Components that render parts of their own.** `Modal` adds dialog attributes, bestax's form
-  controls render their own `.field` and `.control`, and so on. These families are flagged
-  once each (`family:<class>`) and converted by hand.
+- **Components that render parts of their own.** `Modal` adds dialog attributes, `Select` and
+  `File` render their own wrappers, and so on. These families are flagged once each
+  (`family:<class>`) and converted by hand.
+- **Form markup around bestax already.** `Field` and `Control` tell bestax's form controls
+  inside them to skip their own wrappers, so a `.field` or `.control` that already holds one
+  (from an earlier migration by hand) stays as it is (`context:<Target>`).
 - **Elements bestax would render differently**: a `ref` on a component that doesn't forward one,
   a spread, a tag the component can't render (`<div className="section">`), an attribute the
   component reads as a prop, or an element that is the only child of another component, which
diff --git a/eslint-plugin/src/generated/metadata.ts b/eslint-plugin/src/generated/metadata.ts
index ade28ad66..15bf40b55 100644
--- a/eslint-plugin/src/generated/metadata.ts
+++ b/eslint-plugin/src/generated/metadata.ts
@@ -196,9 +196,6 @@ export const BULMA_COMPONENT_CLASSES: ReadonlyMap<string, BulmaComponentClass> =
     ['checkboxes', { component: 'Checkboxes', converts: false }],
     ['radio', { component: 'Radio', converts: false }],
     ['radios', { component: 'Radios', converts: false }],
-    ['field', { component: 'Field', converts: false }],
-    ['input', { component: 'Input', converts: false }],
-    ['textarea', { component: 'TextArea', converts: false }],
     ['select', { component: 'Select', converts: false }],
     ['file', { component: 'File', converts: false }],
     ['dropdown', { component: 'Dropdown', converts: false }],
@@ -249,6 +246,12 @@ export const BULMA_COMPONENT_CLASSES: ReadonlyMap<string, BulmaComponentClass> =
     ['navbar-item', { component: 'Navbar.Item', converts: true }],
     ['navbar-dropdown', { component: 'Navbar.DropdownMenu', converts: true }],
     ['navbar-divider', { component: 'Navbar.Divider', converts: true }],
+    ['field', { component: 'Field', converts: true }],
+    ['field-label', { component: 'Field.Label', converts: true }],
+    ['field-body', { component: 'Field.Body', converts: true }],
+    ['control', { component: 'Control', converts: true }],
+    ['input', { component: 'InputBase', converts: true }],
+    ['textarea', { component: 'TextAreaBase', converts: true }],
     ['buttons', { component: 'Buttons', converts: true }],
     ['tags', { component: 'Tags', converts: true }],
     ['button', { component: 'Button', converts: true }],
diff --git a/eval/agent-loop/briefs/bulma-migrate.completeness.md b/eval/agent-loop/briefs/bulma-migrate.completeness.md
index 4d99c7de3..bfecefa58 100644
--- a/eval/agent-loop/briefs/bulma-migrate.completeness.md
+++ b/eval/agent-loop/briefs/bulma-migrate.completeness.md
@@ -24,15 +24,15 @@ its numbers.
 
 ## Where each section should land — feeds rubric-migrate §2, §4 and §5
 
-| Section (file)                | bestax components a full migration uses                                                                                                                                         |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Navigation (`SiteNavbar.tsx`) | `Navbar` with `Navbar.Brand`, `Navbar.Item`, `Navbar.Burger`, `Navbar.Menu`, `Navbar.Start`, `Navbar.End`; `Buttons`, `Button`                                                  |
-| Hero (`Hero.tsx`)             | `Hero`, `Hero.Body`, `Container`, `Title`, `SubTitle`, `Buttons`, `Button` (an `as="a"` one for the link)                                                                       |
-| Features (`Features.tsx`)     | `Section`, `Container`, `Title`, `SubTitle`, `Columns`, `Column`, `Card` with `Card.Header`, `Card.Header.Title`, `Card.Content`; `Content`, `Tags`, `Tag`                      |
-| Pricing (`Pricing.tsx`)       | `Section`, `Container`, `Title`, `Tabs` with its items for the billing switch, `Table`, `Level`, `Level.Item`, `Tag`, `Progress`                                                |
-| Team (`Team.tsx`)             | `Section`, `Container`, `Title`, `Notification`, `Delete`, `Media`, `Media.Left`, `Media.Content`, `Image`, `Content`                                                           |
-| Contact (`Contact.tsx`)       | `Section`, `Columns`, `Column`, `Title`, `Field`, `Input`, `Select`, `TextArea`, `Checkbox`, `Buttons`/`Button`; `Modal` with its card parts, or `Dialog`, for the confirmation |
-| Footer (`SiteFooter.tsx`)     | `Footer`, `Content`, `Paragraph`                                                                                                                                                |
+| Section (file)                | bestax components a full migration uses                                                                                                                                                                                                       |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Navigation (`SiteNavbar.tsx`) | `Navbar` with `Navbar.Brand`, `Navbar.Item`, `Navbar.Burger`, `Navbar.Menu`, `Navbar.Start`, `Navbar.End`; `Buttons`, `Button`                                                                                                                |
+| Hero (`Hero.tsx`)             | `Hero`, `Hero.Body`, `Container`, `Title`, `SubTitle`, `Buttons`, `Button` (an `as="a"` one for the link)                                                                                                                                     |
+| Features (`Features.tsx`)     | `Section`, `Container`, `Title`, `SubTitle`, `Columns`, `Column`, `Card` with `Card.Header`, `Card.Header.Title`, `Card.Content`; `Content`, `Tags`, `Tag`                                                                                    |
+| Pricing (`Pricing.tsx`)       | `Section`, `Container`, `Title`, `Tabs` with its items for the billing switch, `Table`, `Level`, `Level.Item`, `Tag`, `Progress`                                                                                                              |
+| Team (`Team.tsx`)             | `Section`, `Container`, `Title`, `Notification`, `Delete`, `Media`, `Media.Left`, `Media.Content`, `Image`, `Content`                                                                                                                         |
+| Contact (`Contact.tsx`)       | `Section`, `Columns`, `Column`, `Title`, `Field`, `Input`, `Select`, `TextArea` (or `Control` with `InputBase`, `SelectBase`, `TextAreaBase`), `Checkbox`, `Buttons`/`Button`; `Modal` with its card parts, or `Dialog`, for the confirmation |
+| Footer (`SiteFooter.tsx`)     | `Footer`, `Content`, `Paragraph`                                                                                                                                                                                                              |
 
 Accept an equivalent where one renders the same thing (`Dialog` for the modal, a `Field`
 laid out a different way that still labels each control). A class with no bestax prop may
@@ -42,10 +42,12 @@ leftover.
 **Families**, for rubric-migrate §5: the navbar, the feature card, the pricing tabs, the
 form controls, the confirmation modal, and the avatar image. The `bestax-migrate` codemod
 leaves all or part of each as markup with a `TODO(bestax-migrate)`, so each is finished by
-hand, from the component and its parts. Two are partial. On the feature card the codemod
+hand, from the component and its parts. Three are partial. On the feature card the codemod
 converts `Card` and `Card.Content`, but bestax renders `Card.Header.Title` on a `<div>`, so the
 `<p>` title and the header around it stay. On the navbar it converts the root, the brand, the
-items, start and end, and leaves the burger and the menu, whose `is-active` is computed.
+items, start and end, and leaves the burger and the menu, whose `is-active` is computed. On the
+contact form it converts each `.field`, `.control`, input and textarea, and leaves the select
+and the checkbox.
 
 ## What must survive — feeds rubric-migrate §3
 
diff --git a/skills/bestax-migrate/references/bulma-classes/component-map.md b/skills/bestax-migrate/references/bulma-classes/component-map.md
index 71ed51730..6467845d9 100644
--- a/skills/bestax-migrate/references/bulma-classes/component-map.md
+++ b/skills/bestax-migrate/references/bulma-classes/component-map.md
@@ -38,6 +38,12 @@ The **Tags** column is what the component can render: an element on any other ta
 | `.container`         | `Container`           | `<div>` only                                                   |
 | `.content`           | `Content`             | `<div>` only                                                   |
 | `.delete`            | `Delete`              | `<button>` only                                                |
+| `.field`             | `Field`               | `<div>` only                                                   |
+| `.field-label`       | `Field.Label`         | `<div>` only                                                   |
+| `.field-body`        | `Field.Body`          | `<div>` only                                                   |
+| `.control`           | `Control`             | `<div>`, `<p>` via `as`                                        |
+| `.input`             | `InputBase`           | `<input>` only                                                 |
+| `.textarea`          | `TextAreaBase`        | `<textarea>` only                                              |
 | `.footer`            | `Footer`              | `<footer>`, `<div>` via `as`                                   |
 | `.hero`              | `Hero`                | `<section>` only                                               |
 | `.hero-head`         | `Hero.Head`           | `<div>` only                                                   |
@@ -89,6 +95,16 @@ a `family:<class>` TODO; converting either means building the dropdown or the to
 by hand. A `.navbar-divider` converts only when it carries no other class, since
 `Navbar.Divider` drops its own class for a `className` it's given.
 
+Form markup converts piece by piece: `.field` to `Field`, `.control` to `Control`, and the
+input and textarea to `InputBase` and `TextAreaBase`, the controls without wrappers of their own.
+A `.label` and a `.help` stay as they are. An input's color (`is-danger`) stays a class, because
+`color` renders `has-text-<color>` on it too. A `.field.is-horizontal` converts once its
+`.field-label` and `.field-body` do, since `Field` wraps anything else in a `.field-body` of its
+own. `Field` and `Control` tell bestax's form controls inside them to skip their own wrappers, so a
+`.field` or `.control` that already holds a bestax component stays markup with a
+`context:<Target>` TODO, and so does an input with no `id` inside a bestax `Field` or any other
+component, which could hand it a labelled Field's generated one.
+
 ## Plain tags with helper classes
 
 A tag bestax wraps becomes that wrapper when at least one of its classes converts to a helper
@@ -116,7 +132,7 @@ no TODO: it is valid Bulma, and nothing unsafe was skipped.
 Their markup doesn't map element by element (the bestax component renders parts of its own, or
 adds attributes), so the family's outermost class gets a `family:<class>` TODO and the markup
 stays. [unmappables.md](unmappables.md) has the recipe for each. The families are Breadcrumb,
-Checkbox, Checkboxes, Dropdown, Field (and Input, TextArea, Select, File), Grid and Cell,
+Checkbox, Checkboxes, Dropdown, Select, File, Grid and Cell,
 Icon and IconText, Image, Menu, Message, Modal, the navbar's burger and dropdown link,
 Pagination, Panel, Radio, Radios, Skeleton, `.table-container` and Tabs.
 
diff --git a/skills/bestax-migrate/references/bulma-classes/prop-map.md b/skills/bestax-migrate/references/bulma-classes/prop-map.md
index 9f3be72ec..29fb95026 100644
--- a/skills/bestax-migrate/references/bulma-classes/prop-map.md
+++ b/skills/bestax-migrate/references/bulma-classes/prop-map.md
@@ -76,28 +76,35 @@ renders the same `<h2>`.
 
 ### Other components
 
-| Component                                                      | Classes                                                                                                                    | Prop                                                                |
-| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
-| `.card-header-title` → `Card.Header.Title`                     | `is-centered`                                                                                                              | `centered`                                                          |
-| `.content` → `Content`                                         | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
-| `.delete` → `Delete`                                           | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
-| `.hero` → `Hero`                                               | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-light`, `is-dark` | `color`                                                             |
-| `.hero` → `Hero`                                               | `is-small`, `is-medium`, `is-large`, `is-fullheight`, `is-fullheight-with-navbar`                                          | `size`                                                              |
-| `.level` → `Level`                                             | `is-mobile`                                                                                                                | `isMobile`                                                          |
-| `.navbar` → `Navbar`                                           | the ten `.hero` colors                                                                                                     | `color`                                                             |
-| `.navbar` → `Navbar`                                           | `is-fixed-top`, `is-fixed-bottom`                                                                                          | `fixed` (`top`, `bottom`)                                           |
-| `.navbar` → `Navbar`                                           | `is-transparent`                                                                                                           | `transparent`                                                       |
-| `.navbar-menu` → `Navbar.Menu`, `.navbar-item` → `Navbar.Item` | `is-active`                                                                                                                | `active`                                                            |
-| `.navbar-dropdown` → `Navbar.DropdownMenu`                     | `is-right`, `is-up`                                                                                                        | `right`, `up`                                                       |
-| `.notification` → `Notification`                               | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-dark`             | `color`                                                             |
-| `.notification` → `Notification`                               | `is-light`                                                                                                                 | `isLight`                                                           |
-| `.progress` → `Progress`                                       | the ten `.hero` colors                                                                                                     | `color`                                                             |
-| `.progress` → `Progress`                                       | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
-| `.section` → `Section`                                         | `is-medium`, `is-large`                                                                                                    | `size`                                                              |
-| `.table` → `Table`                                             | `is-bordered`, `is-striped`, `is-narrow`, `is-hoverable`, `is-fullwidth`                                                   | `isBordered`, `isStriped`, `isNarrow`, `isHoverable`, `isFullwidth` |
-| `.tag` → `Tag`                                                 | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-dark`, `is-white`             | `color`                                                             |
-| `.tag` → `Tag`                                                 | `is-light`, `is-rounded`, `is-hoverable`                                                                                   | `isLight`, `isRounded`, `isHoverable`                               |
-| `.tag` → `Tag`                                                 | `is-medium`, `is-large`                                                                                                    | `size`                                                              |
+| Component                                                                    | Classes                                                                                                                    | Prop                                                                |
+| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `.card-header-title` → `Card.Header.Title`                                   | `is-centered`                                                                                                              | `centered`                                                          |
+| `.content` → `Content`                                                       | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
+| `.delete` → `Delete`                                                         | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
+| `.field` → `Field`                                                           | `is-horizontal`, `is-grouped`, `has-addons`, `is-narrow`                                                                   | `horizontal`, `grouped`, `hasAddons`, `narrow`                      |
+| `.field-label` → `Field.Label`                                               | `is-small`, `is-normal`, `is-medium`, `is-large`                                                                           | `size`                                                              |
+| `.control` → `Control`                                                       | `has-icons-left`, `has-icons-right`, `is-loading`, `is-expanded`                                                           | `hasIconsLeft`, `hasIconsRight`, `isLoading`, `isExpanded`          |
+| `.control` → `Control`, `.input` → `InputBase`, `.textarea` → `TextAreaBase` | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
+| `.input` → `InputBase`, `.textarea` → `TextAreaBase`                         | `is-rounded`, `is-static`, `is-hovered`, `is-focused`                                                                      | `isRounded`, `isStatic`, `isHovered`, `isFocused`                   |
+| `.input` → `InputBase`                                                       | `is-loading`                                                                                                               | `isLoading`                                                         |
+| `.textarea` → `TextAreaBase`                                                 | `is-active`, `has-fixed-size`                                                                                              | `isActive`, `hasFixedSize`                                          |
+| `.hero` → `Hero`                                                             | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-light`, `is-dark` | `color`                                                             |
+| `.hero` → `Hero`                                                             | `is-small`, `is-medium`, `is-large`, `is-fullheight`, `is-fullheight-with-navbar`                                          | `size`                                                              |
+| `.level` → `Level`                                                           | `is-mobile`                                                                                                                | `isMobile`                                                          |
+| `.navbar` → `Navbar`                                                         | the ten `.hero` colors                                                                                                     | `color`                                                             |
+| `.navbar` → `Navbar`                                                         | `is-fixed-top`, `is-fixed-bottom`                                                                                          | `fixed` (`top`, `bottom`)                                           |
+| `.navbar` → `Navbar`                                                         | `is-transparent`                                                                                                           | `transparent`                                                       |
+| `.navbar-menu` → `Navbar.Menu`, `.navbar-item` → `Navbar.Item`               | `is-active`                                                                                                                | `active`                                                            |
+| `.navbar-dropdown` → `Navbar.DropdownMenu`                                   | `is-right`, `is-up`                                                                                                        | `right`, `up`                                                       |
+| `.notification` → `Notification`                                             | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-dark`             | `color`                                                             |
+| `.notification` → `Notification`                                             | `is-light`                                                                                                                 | `isLight`                                                           |
+| `.progress` → `Progress`                                                     | the ten `.hero` colors                                                                                                     | `color`                                                             |
+| `.progress` → `Progress`                                                     | `is-small`, `is-medium`, `is-large`                                                                                        | `size`                                                              |
+| `.section` → `Section`                                                       | `is-medium`, `is-large`                                                                                                    | `size`                                                              |
+| `.table` → `Table`                                                           | `is-bordered`, `is-striped`, `is-narrow`, `is-hoverable`, `is-fullwidth`                                                   | `isBordered`, `isStriped`, `isNarrow`, `isHoverable`, `isFullwidth` |
+| `.tag` → `Tag`                                                               | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-dark`, `is-white`             | `color`                                                             |
+| `.tag` → `Tag`                                                               | `is-light`, `is-rounded`, `is-hoverable`                                                                                   | `isLight`, `isRounded`, `isHoverable`                               |
+| `.tag` → `Tag`                                                               | `is-medium`, `is-large`                                                                                                    | `size`                                                              |
 
 `Progress` takes `value` and `max` as numbers: `value="40"` becomes `value={40}`. An
 expression (`value={percent}`) carries over as written, so if it holds a string the migrated
@@ -107,7 +114,10 @@ and a `type="button"` is dropped, since bestax renders it by itself. `Card.Heade
 converts only with an `aria-label`, since it renders `aria-label="more options"` otherwise.
 `.tag`'s `is-delete` stays a class: `isDelete` turns the tag into a `<button>`. `.navbar`'s
 `is-spaced` and `has-shadow`, and a `.navbar-item`'s `has-dropdown` and `is-hoverable`, stay
-classes too: bestax has no prop for them on those components.
+classes too: bestax has no prop for them on those components. So do a `.field`'s
+`has-addons-centered`, `has-addons-right` and `is-grouped-*`, because the `hasAddons` and
+`grouped` values that render them render `has-addons` and `is-grouped` as well, and an input's or
+textarea's color, because `color` renders `has-text-<color>` on it too.
 
 ## Helper classes
 
@@ -122,7 +132,7 @@ Colors are `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `
 | `m-{n}`, `mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}`, `mx-{n}`, `my-{n}` (`0` to `6`, `auto`)                  | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`                                     |
 | `p-{n}`, `pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}`, `px-{n}`, `py-{n}`                                       | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`                                     |
 | `has-text-{color}`                                                                                        | `textColor` (on `Table`, `color`)                                           |
-| `has-background-{color}`                                                                                  | `bgColor` (on `Tag`, `backgroundColor`)                                     |
+| `has-background-{color}`                                                                                  | `bgColor` (on `Tag`, `InputBase` and `TextAreaBase`, `backgroundColor`)     |
 | `is-size-1` … `is-size-7`, and `-{viewport}`                                                              | `textSize`, `textSize{Viewport}`                                            |
 | `has-text-centered`, `-justified`, `-left`, `-right`, and `-{viewport}`                                   | `textAlign`, `textAlign{Viewport}`                                          |
 | `is-capitalized`, `is-lowercase`, `is-uppercase`, `is-italic`                                             | `textTransform`                                                             |
@@ -143,10 +153,12 @@ Colors are `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `
 
 Where a component renders a color class through no typed prop, the class stays: `has-text-*`
 on `Hero`, `Navbar.Menu`, `Navbar.Start`, `Navbar.End`, `Navbar.DropdownMenu`,
-`Navbar.Divider`, `Progress`, `Tag` and `Tags`; `has-background-*` on `Navbar.Brand`,
-`Navbar.Menu`, `Navbar.Start`, `Navbar.End`, `Navbar.DropdownMenu`, `Navbar.Divider`,
-`Notification`, `Progress`, `Table` and `Tags`. `Navbar.DropdownMenu` and `Navbar.Divider` take
-no helper props at all, so every helper class on them stays.
+`Navbar.Divider`, `Field.Label`, `Field.Body`, `Control`, `InputBase`, `TextAreaBase`,
+`Progress`, `Tag` and `Tags`; `has-background-*` on `Navbar.Brand`, `Navbar.Menu`,
+`Navbar.Start`, `Navbar.End`, `Navbar.DropdownMenu`, `Navbar.Divider`, `Field.Label`,
+`Field.Body`, `Control`, `Notification`, `Progress`, `Table` and `Tags`. `Navbar.DropdownMenu`,
+`Navbar.Divider`, `Field.Label`, `Field.Body` and `Control` take no helper props the way the
+codemod needs, so every helper class on them stays.
 
 Some classes stay put because of how bestax renders them:
 
diff --git a/skills/bestax-migrate/references/bulma-classes/unmappables.md b/skills/bestax-migrate/references/bulma-classes/unmappables.md
index d63a80407..00c4cf706 100644
--- a/skills/bestax-migrate/references/bulma-classes/unmappables.md
+++ b/skills/bestax-migrate/references/bulma-classes/unmappables.md
@@ -82,6 +82,24 @@ header convert on the next run. A card whose content sits straight inside it, wi
 is what you want, or keep the markup. A part inside an expression (`{open && <div className="card-content">}`)
 doesn't count, because it may not render.
 
+### `context:<Target>`
+
+`Field` and `Control` tell bestax's form controls inside them to skip their own `.field` and
+`.control` wrappers. A `.field` or `.control` that already holds a bestax component (an `Input`
+from an earlier, partial migration) would change how that component renders once converted, so
+it stays markup. Convert it by hand and check that the component inside still renders what you
+want, or leave it.
+
+On an input or textarea it's the other direction: inside a bestax `Field` with a `label`,
+`InputBase` and `TextAreaBase` take the Field's generated `id` when they have none, which the
+element didn't have. Context follows what renders, not what the file says, so an input with no
+`id` inside any other component of the app stays markup too, since that component could render
+a labelled `Field` around it. Give the element its own `id`, then re-run.
+
+The codemod reads one file at a time, so it can't see a component in another file that renders
+a bestax `Field` or form control around this markup. If the app already uses them that way, give
+its inputs ids before running the codemod, and check its forms afterwards.
+
 ### `only-child:<Target>`
 
 The element is the only child of another component (`<Link href="/x"><a className="button">`),
@@ -119,10 +137,12 @@ in the browser:
   `aria-expanded` and keyboard handling. The codemod turned the `.has-dropdown` item around it
   into a `Navbar.Item` that keeps the class; to get the dropdown behavior, replace that item
   with `Navbar.Dropdown` (`hoverable` for `is-hoverable`) and the link with `Navbar.Link`.
-- **`family:field`**, **`family:input`**, **`family:textarea`**, **`family:select`**,
-  **`family:file`**: bestax's form controls render their own `.field` and `.control` wrappers
-  (and `File` its whole `.file-label` tree). Replace the whole `.field` block with the
-  control, not each element in it. See the `bestax-form` skill.
+- **`family:select`**: `SelectBase` renders the `.select` wrapper and the `<select>` together,
+  with the element's attributes on the `<select>`. Replace the pair with one `SelectBase`
+  inside the `Control`, keeping the `<option>`s as its children. See the `bestax-form` skill.
+- **`family:file`**: `File` renders the whole `.file-label` tree itself, and a `.field` around
+  it unless it's already inside one. Replace the `.file` block with one `File`; its API page
+  lists the props for the button text, the file name and the icons.
 - **`family:checkbox`**, **`family:radio`**, **`family:checkboxes`**, **`family:radios`**:
   bestax renders its own styled checkbox and radio markup, not Bulma's.
 - **`family:modal`**: `Modal` renders its own background and content parts, and adds dialog