chromium/chrome/browser/resources/settings/controls/settings_checkbox.html

<style
<if expr="not chromeos_ash">
  include="cr-shared-style"
</if>
<if expr="chromeos_ash">
  include="cr-shared-style cros-color-overrides"
</if>
>
  #outerRow {
    align-items: center;
    display: flex;
    min-height: var(--cr-section-two-line-min-height);
    width: 100%;
  }

  #outerRow[noSubLabel] {
    min-height: var(--cr-section-min-height);
  }

  cr-checkbox {
    /* Additional margin in case subLabel needs more than one line. */
    margin-bottom: 4px;
    margin-top: var(--settings-checkbox-margin-top, 4px);
    width: 100%;
  }

  cr-policy-pref-indicator {
    margin-inline-start: var(--cr-controlled-by-spacing);
  }

  /* Style links that can appear within #subLabel. */
  a {
    color: var(--cr-link-color);
  }
</style>
<div id="outerRow" noSubLabel$="[[!hasSubLabel_(subLabel, subLabelHtml)]]">
  <cr-checkbox id="checkbox" checked="{{checked}}"
      on-change="notifyChangedByUserInteraction"
      disabled="[[controlDisabled(disabled, pref.*)]]"
      aria-label="[[label]]">
    <div id="label">[[label]] <slot></slot></div>
    <div id="subLabel" class="cr-secondary-text">
      <div inner-h-t-m-l="[[sanitizeInnerHtml_(subLabelHtml)]]"></div>
      [[subLabel]]
    </div>
  </cr-checkbox>
  <template is="dom-if" if="[[pref.controlledBy]]">
    <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
    </cr-policy-pref-indicator>
  </template>
</div>