diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
index c7f2b8efcbd..f4ec63694fa 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/api-keys-new.gjs
@@ -13,7 +13,6 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n } from "discourse-i18n";
 import ApiKeyUrlsModal from "admin/components/modal/api-key-urls";
 import EmailGroupUserChooser from "select-kit/components/email-group-user-chooser";
-import DTooltip from "float-kit/components/d-tooltip";
 
 export default class AdminConfigAreasApiKeysNew extends Component {
   @service router;
@@ -239,7 +238,6 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                   <table class="scopes-table grid">
                     <thead>
                       <tr>
-                        <td></td>
                         <td></td>
                         <td>{{i18n "admin.api.scopes.allowed_urls"}}</td>
                         <td>{{i18n
@@ -265,28 +263,18 @@ export default class AdminConfigAreasApiKeysNew extends Component {
                             <topicsCollection.Field
                               @name="enabled"
                               @title={{collectionData.key}}
-                              @showTitle={{false}}
-                              as |field|
-                            >
-                              <field.Checkbox />
-                            </topicsCollection.Field>
-                          </td>
-                          <td>
-                            <div
-                              class="scope-name"
-                            >{{collectionData.name}}</div>
-                            <DTooltip
-                              @icon="circle-question"
-                              @content={{i18n
+                              @tooltip={{i18n
                                 (concat
                                   "admin.api.scopes.descriptions."
                                   scopeName
                                   "."
                                   collectionData.key
                                 )
-                                class="scope-tooltip"
                               }}
-                            />
+                              as |field|
+                            >
+                              <field.Checkbox />
+                            </topicsCollection.Field>
                           </td>
                           <td>
                             <DButton
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
index 22996e8831b..7d19f2b8f85 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/webhooks-form.gjs
@@ -257,13 +257,11 @@ export default class AdminConfigAreasWebhookForm extends Component {
                   </field.Custom>
                 </form.Field>
 
-                <span>
-                  <PluginOutlet
-                    @name="web-hook-fields"
-                    @connectorTagName="div"
-                    @outletArgs={{hash model=this.webhook}}
-                  />
-                </span>
+                <PluginOutlet
+                  @name="web-hook-fields"
+                  @connectorTagName="div"
+                  @outletArgs={{hash model=this.webhook}}
+                />
 
                 <form.Field
                   @name="verify_certificate"
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
index e1dbdc02412..9d7f0ca5cd9 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
@@ -1,31 +1,28 @@
 import Component from "@glimmer/component";
 import { concat, fn } from "@ember/helper";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { eq } from "truth-helpers";
 import FKLabel from "discourse/form-kit/components/fk/label";
 import FKMeta from "discourse/form-kit/components/fk/meta";
+import FKOptional from "discourse/form-kit/components/fk/optional";
 import FKText from "discourse/form-kit/components/fk/text";
+import FKTooltip from "discourse/form-kit/components/fk/tooltip";
 import concatClass from "discourse/helpers/concat-class";
-import { i18n } from "discourse-i18n";
-import DTooltip from "float-kit/components/d-tooltip";
 
 export default class FKControlWrapper extends Component {
   get controlType() {
     if (this.args.component.controlType === "input") {
-      return this.args.component.controlType + "-" + (this.args.type || "text");
+      return this.args.field.type + "-" + (this.args.type || "text");
     }
 
-    return this.args.component.controlType;
+    return this.args.field.type;
   }
 
   get error() {
     return (this.args.errors ?? {})[this.args.field.name];
   }
 
-  get isComponentTooltip() {
-    return typeof this.args.field.tooltip === "object";
-  }
-
   get titleFormat() {
     return this.args.field.titleFormat || this.args.field.format;
   }
@@ -52,42 +49,34 @@ export default class FKControlWrapper extends Component {
       data-disabled={{@field.disabled}}
       data-name={{@field.name}}
       data-control-type={{this.controlType}}
+      {{didInsert (fn @registerField @field.name @field)}}
       {{willDestroy (fn @unregisterField @field.name)}}
     >
-      {{#if @field.showTitle}}
-        <FKLabel
-          class={{concatClass
-            "form-kit__container-title"
-            (if this.titleFormat (concat "--" this.titleFormat))
-          }}
-          @fieldId={{@field.id}}
-        >
-          <span>{{@field.title}}</span>
+      {{#unless (eq @field.type "checkbox")}}
+        {{#if @field.showTitle}}
+          <FKLabel
+            class={{concatClass
+              "form-kit__container-title"
+              (if this.titleFormat (concat "--" this.titleFormat))
+            }}
+            @fieldId={{@field.id}}
+          >
+            <span>{{@field.title}}</span>
 
-          {{#unless @field.required}}
-            <span class="form-kit__container-optional">({{i18n
-                "form_kit.optional"
-              }})</span>
-          {{/unless}}
+            <FKOptional @field={{@field}} />
+            <FKTooltip @field={{@field}} />
+          </FKLabel>
+        {{/if}}
 
-          {{#if @field.tooltip}}
-            {{#if this.isComponentTooltip}}
-              <@field.tooltip />
-            {{else}}
-              <DTooltip @icon="circle-question" @content={{@field.tooltip}} />
-            {{/if}}
-          {{/if}}
-        </FKLabel>
-      {{/if}}
-
-      {{#if @field.description}}
-        <FKText
-          class={{concatClass
-            "form-kit__container-description"
-            (if this.descriptionFormat (concat "--" this.descriptionFormat))
-          }}
-        >{{@field.description}}</FKText>
-      {{/if}}
+        {{#if @field.description}}
+          <FKText
+            class={{concatClass
+              "form-kit__container-description"
+              (if this.descriptionFormat (concat "--" this.descriptionFormat))
+            }}
+          >{{@field.description}}</FKText>
+        {{/if}}
+      {{/unless}}
 
       <div
         class={{concatClass
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
index eecb2d11de2..ef5486ed34a 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/checkbox.gjs
@@ -3,6 +3,8 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { eq } from "truth-helpers";
 import FKLabel from "discourse/form-kit/components/fk/label";
+import FKOptional from "discourse/form-kit/components/fk/optional";
+import FKTooltip from "discourse/form-kit/components/fk/tooltip";
 
 export default class FKControlCheckbox extends Component {
   static controlType = "checkbox";
@@ -24,7 +26,9 @@ export default class FKControlCheckbox extends Component {
       />
       <span class="form-kit__control-checkbox-content">
         <span class="form-kit__control-checkbox-title">
-          {{@field.title}}
+          <span>{{@field.title}}</span>
+          <FKOptional @field={{@field}} />
+          <FKTooltip @field={{@field}} />
         </span>
         {{#if (has-block)}}
           <span class="form-kit__control-checkbox-description">{{yield}}</span>
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
index fcfac8293ed..10ff02c8743 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import ValidationParser from "discourse/form-kit/lib/validation-parser";
 import Validator from "discourse/form-kit/lib/validator";
@@ -8,6 +9,12 @@ import uniqueId from "discourse/helpers/unique-id";
  * Represents a field in a form with validation, registration, and field data management capabilities.
  */
 export default class FKFieldData extends Component {
+  /**
+   * Type of the field.
+   * @type {string}
+   */
+  @tracked type;
+
   /**
    * Unique identifier for the field.
    * @type {string}
@@ -20,12 +27,6 @@ export default class FKFieldData extends Component {
    */
   errorId = uniqueId();
 
-  /**
-   * Type of the field.
-   * @type {string}
-   */
-  type;
-
   /**
    * Initializes the FKFieldData component.
    * Validates the presence of required arguments and registers the field.
@@ -37,8 +38,6 @@ export default class FKFieldData extends Component {
     if (!this.args.title?.length) {
       throw new Error("@title is required on `<form.Field />`.");
     }
-
-    this.args.registerField(this.name, this);
   }
 
   /**
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
index 4c161dffa35..7f36dbcdb7a 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
@@ -1,5 +1,8 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import curryComponent from "ember-curry-component";
 import FKControlCheckbox from "discourse/form-kit/components/fk/control/checkbox";
 import FKControlCode from "discourse/form-kit/components/fk/control/code";
 import FKControlComposer from "discourse/form-kit/components/fk/control/composer";
@@ -40,6 +43,30 @@ export default class FKField extends Component {
     }
   }
 
+  @action
+  componentFor(component, field) {
+    const instance = this;
+    const baseArguments = {
+      get errors() {
+        return instance.args.errors;
+      },
+      unregisterField: instance.args.unregisterField,
+      registerField: instance.args.registerField,
+      component,
+      field,
+    };
+
+    if (!component.controlType) {
+      throw new Error(
+        `Static property \`controlType\` is required on component:\n\n ${component}`
+      );
+    }
+
+    field.type = component.controlType;
+
+    return curryComponent(FKControlWrapper, baseArguments, getOwner(this));
+  }
+
   <template>
     <FKFieldData
       @name={{@name}}
@@ -66,104 +93,20 @@ export default class FKField extends Component {
       <this.wrapper @size={{@size}}>
         {{yield
           (hash
-            Custom=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCustom
-              field=field
-            )
-            Code=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCode
-              field=field
-            )
-            Question=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlQuestion
-              field=field
-            )
-            Textarea=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlTextarea
-              field=field
-            )
-            Checkbox=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlCheckbox
-              field=field
-            )
-            Image=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlImage
-              field=field
-            )
-            Password=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlPassword
-              field=field
-            )
-            Composer=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlComposer
-              field=field
-            )
-            Icon=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlIcon
-              field=field
-            )
-            Toggle=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlToggle
-              field=field
-            )
-            Menu=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlMenu
-              field=field
-            )
-            Select=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlSelect
-              field=field
-            )
-            Input=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlInput
-              field=field
-            )
-            RadioGroup=(component
-              FKControlWrapper
-              unregisterField=@unregisterField
-              errors=@errors
-              component=FKControlRadioGroup
-              field=field
-            )
+            Custom=(this.componentFor FKControlCustom field)
+            Code=(this.componentFor FKControlCode field)
+            Question=(this.componentFor FKControlQuestion field)
+            Textarea=(this.componentFor FKControlTextarea field)
+            Checkbox=(this.componentFor FKControlCheckbox field)
+            Image=(this.componentFor FKControlImage field)
+            Password=(this.componentFor FKControlPassword field)
+            Composer=(this.componentFor FKControlComposer field)
+            Icon=(this.componentFor FKControlIcon field)
+            Toggle=(this.componentFor FKControlToggle field)
+            Menu=(this.componentFor FKControlMenu field)
+            Select=(this.componentFor FKControlSelect field)
+            Input=(this.componentFor FKControlInput field)
+            RadioGroup=(this.componentFor FKControlRadioGroup field)
             errorId=field.errorId
             id=field.id
             name=field.name
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs
new file mode 100644
index 00000000000..ce3f88694c0
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/optional.gjs
@@ -0,0 +1,11 @@
+import { i18n } from "discourse-i18n";
+
+const FKOptional = <template>
+  {{#unless @field.required}}
+    <span class="form-kit__container-optional">({{i18n
+        "form_kit.optional"
+      }})</span>
+  {{/unless}}
+</template>;
+
+export default FKOptional;
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs
new file mode 100644
index 00000000000..4dc4e279563
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/tooltip.gjs
@@ -0,0 +1,22 @@
+import Component from "@glimmer/component";
+import DTooltip from "float-kit/components/d-tooltip";
+
+export default class FKTooltip extends Component {
+  get isComponentTooltip() {
+    return typeof this.args.field.tooltip === "object";
+  }
+
+  <template>
+    {{#if @field.tooltip}}
+      {{#if this.isComponentTooltip}}
+        <@field.tooltip />
+      {{else}}
+        <DTooltip
+          class="form-kit__tooltip"
+          @icon="circle-question"
+          @content={{@field.tooltip}}
+        />
+      {{/if}}
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
index b14132765ab..7d0700aadfa 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/checkbox-test.gjs
@@ -44,5 +44,31 @@ module(
 
       assert.dom(".form-kit__control-checkbox").hasAttribute("disabled");
     });
+
+    test("@tooltip", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @tooltip="test" @name="foo" @title="Foo" as |field|>
+            <field.Checkbox />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__control-checkbox-content .form-kit__tooltip")
+        .exists();
+    });
+
+    test("optional", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Checkbox />
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert.form().field("foo").hasTitle("Foo (optional)");
+    });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
index 33435eb23a4..02508d36e44 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
@@ -83,8 +83,8 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
     await render(<template>
       <Form as |form|>
-        <form.Field @name="foo.bar" @title="Foo" @size={{8}}>
-          Test
+        <form.Field @name="foo.bar" @title="Foo" @size={{8}} as |field|>
+          <field.Input />
         </form.Field>
       </Form>
     </template>);
@@ -102,8 +102,8 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
     await render(<template>
       <Form as |form|>
-        <form.Field @name="foo" @size={{8}}>
-          Test
+        <form.Field @name="foo" @size={{8}} as |field|>
+          <field.Input />
         </form.Field>
       </Form>
     </template>);
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
index bf0548cc530..c785a7ec655 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/layout/checkbox-group-test.gjs
@@ -22,9 +22,41 @@ module(
         </Form>
       </template>);
 
-      assert.form().field("foo").hasTitle("Foo");
-      assert.form().field("bar").hasTitle("Bar");
+      assert.form().field("foo").hasTitle("Foo (optional)");
+      assert.form().field("bar").hasTitle("Bar (optional)");
       assert.form().field("bar").hasDescription("A description");
     });
+
+    test("@title", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.CheckboxGroup @title="bar" as |checkboxGroup|>
+            <checkboxGroup.Field @name="foo" @title="Foo" as |field|>
+              <field.Checkbox />
+            </checkboxGroup.Field>
+          </form.CheckboxGroup>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__checkbox-group .form-kit__fieldset-title")
+        .hasText("bar");
+    });
+
+    test("@description", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.CheckboxGroup @description="bar" as |checkboxGroup|>
+            <checkboxGroup.Field @name="foo" @title="Foo" as |field|>
+              <field.Checkbox />
+            </checkboxGroup.Field>
+          </form.CheckboxGroup>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__checkbox-group .form-kit__fieldset-description")
+        .hasText("bar");
+    });
   }
 );
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 0695d6870ce..3ec363b9acb 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -811,14 +811,6 @@ $mobile-breakpoint: 700px;
   }
 }
 
-.badges,
-.web-hook-container {
-  input[type="text"],
-  textarea {
-    min-width: 350px;
-  }
-}
-
 .text-successful {
   color: var(--success);
 }
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 0445f9ab3e0..1110353cfcc 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -24,6 +24,10 @@
 
 // Api keys
 .admin-api-keys {
+  .form-kit__container-optional {
+    display: none;
+  }
+
   .api-key-show {
     .form-element,
     .form-element-desc {
@@ -136,16 +140,6 @@
     display: none;
   }
 
-  input {
-    max-width: calc(100% - 10px);
-  }
-
-  .select-kit,
-  .select-kit.multi-select {
-    width: 100%;
-    max-width: 360px;
-  }
-
   .event-selector {
     display: grid;
     grid-template-columns: auto auto;
diff --git a/app/assets/stylesheets/common/form-kit/_index.scss b/app/assets/stylesheets/common/form-kit/_index.scss
index 76c6b570259..d807c0a1e74 100644
--- a/app/assets/stylesheets/common/form-kit/_index.scss
+++ b/app/assets/stylesheets/common/form-kit/_index.scss
@@ -30,3 +30,4 @@
 @import "_row";
 @import "_section";
 @import "_variables";
+@import "_tooltip";
diff --git a/app/assets/stylesheets/common/form-kit/_tooltip.scss b/app/assets/stylesheets/common/form-kit/_tooltip.scss
new file mode 100644
index 00000000000..3e3f21f7b70
--- /dev/null
+++ b/app/assets/stylesheets/common/form-kit/_tooltip.scss
@@ -0,0 +1,3 @@
+.form-kit__tooltip {
+  color: var(--primary-medium);
+}