chromium/chrome/browser/resources/settings/people_page/sync_controls.html

    <style include="cr-shared-style settings-shared iron-flex">
      #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
        border-top: var(--cr-separator-line);
      }

      .list-item {
        display: flex;
      }

      .list-item > div:not(.separator) {
        flex: 1;
      }

      cr-policy-indicator {
        margin-inline-end: var(--cr-controlled-by-spacing);
      }
    </style>

<if expr="is_chromeos">
    <div class="settings-box first">
      <localized-link class="secondary"
          localized-string="$i18n{browserSyncFeatureLabel}"
          link-url="$i18n{osSyncSettingsUrl}">
      </localized-link>
    </div>
</if>

    <div id="sync-data-radio" class="cr-row first">
      <cr-radio-group
          selected="[[selectedSyncDataRadio_(syncPrefs)]]"
          on-selected-changed="onSyncDataRadioSelectionChanged_">
        <cr-radio-button name="sync-everything">
          $i18n{syncEverythingCheckboxLabel}
        </cr-radio-button>
        <cr-radio-button name="customize-sync">
          $i18n{customizeSyncLabel}
        </cr-radio-button>
      </cr-radio-group>
    </div>

    <div class="cr-row first">
      <h2 class="cr-title-text flex">$i18n{syncData}</h2>
    </div>

    <div class="list-frame" id="sync-data-types">
      <div class="list-item" hidden="[[!syncPrefs.appsRegistered]]">
<if expr="not chromeos_lacros">
      <div id="appCheckboxLabel">$i18n{appCheckboxLabel}</div>
      <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.appsManaged]]">
      </cr-policy-indicator>
      <cr-toggle checked="{{syncPrefs.appsSynced}}"
          on-change="onSingleSyncDataTypeChanged_"
          disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes, syncPrefs.appsManaged)]]"
          aria-labelledby="appCheckboxLabel">
      </cr-toggle>
</if>
<if expr="chromeos_lacros">
      <div id="appCheckboxLabel" hidden="[[showSyncSettingsRevamp_]]">
        $i18n{appCheckboxLabel}
      </div>
      <cr-link-row id="osSyncSettingsLink"
          embedded
          label="$i18n{appCheckboxLabel}"
          sub-label="$i18n{appCheckboxSublabel}"
          on-click="onOsSyncSettingsLinkClick_"
          hidden="[[!showSyncSettingsRevamp_]]"
          external>
      </cr-link-row>
      <div class="separator" hidden="[[!showSyncSettingsRevamp_]]"></div>
      <cr-policy-indicator indicator-type="userPolicy"
          id="appsSyncPolicyIndicator"
          hidden="[[!showAppsPolicyIndicator_(
            syncPrefs.appsManaged, showSyncSettingsRevamp_)]]">
      </cr-policy-indicator>
      <cr-toggle id="appsSyncToggle"
          checked="{{syncPrefs.appsSynced}}"
          on-change="onSingleSyncDataTypeChanged_"
          disabled="[[disableAppsToggle_(
            syncPrefs.syncAllDataTypes, showSyncSettingsRevamp_,
            syncPrefs.appsManaged)]]"
          aria-labelledby="appCheckboxLabel">
      </cr-toggle>
</if>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.bookmarksRegistered]]">
        <div id="bookmarksCheckboxLabel">
          $i18n{bookmarksCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.bookmarksManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.bookmarksSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes, syncPrefs.bookmarksManaged)]]"
            aria-labelledby="bookmarksCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.extensionsRegistered]]">
        <div id="extensionsCheckboxLabel">
          $i18n{extensionsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.extensionsManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.extensionsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes , syncPrefs.extensionsManaged)]]"
            aria-labelledby="extensionsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.typedUrlsRegistered]]">
        <div id="historyCheckboxLabel">
          $i18n{historyCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.typedUrlsManaged]]">
        </cr-policy-indicator>
        <cr-toggle id="historyToggle"
            checked="{{syncPrefs.typedUrlsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes , syncPrefs.typedUrlsManaged)]]"
            aria-labelledby="historyCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.preferencesRegistered]]">
        <div id="settingsCheckboxLabel">
          $i18n{settingsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.preferencesManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.preferencesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes, syncPrefs.preferencesManaged)]]"
            aria-labelledby="settingsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.themesRegistered]]">
        <div id="themeCheckboxLabel">
          $i18n{themeCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.themesManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.themesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes ,syncPrefs.themesManaged)]]"
            aria-labelledby="themeCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.readingListRegistered]]">
        <div id="readingListCheckboxLabel">
          $i18n{readingListCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.readingListManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.readingListSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes ,syncPrefs.readingListManaged)]]"
            aria-labelledby="readingListCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.tabsRegistered]]">
        <div id="openTabsCheckboxLabel">
          $i18n{openTabsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.tabsManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.tabsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes,syncPrefs.tabsManaged)]]"
            aria-labelledby="openTabsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.savedTabGroupsRegistered]]">
        <div id="savedTabGroupsCheckboxLabel">
          $i18n{savedTabGroupsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.savedTabGroupsManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.savedTabGroupsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes, syncPrefs.savedTabGroupsManaged)]]"
            aria-labelledby="savedTabGroupsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.passwordsRegistered]]">
        <div id="passwordsCheckboxLabel">
          $i18n{passwordsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.passwordsManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.passwordsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes, syncPrefs.passwordsManaged)]]"
            aria-labelledby="passwordsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.autofillRegistered]]">
        <div id="autofillCheckboxLabel">
          $i18n{autofillCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
             hidden="[[!syncPrefs.autofillManaged]]">
         </cr-policy-indicator>
        <cr-toggle id="autofillCheckbox"
            checked="{{syncPrefs.autofillSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes,syncPrefs.autofillManaged)]]"
            aria-labelledby="autofillCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item"
           hidden="[[!syncPrefs.paymentsRegistered]]">
        <div>
          $i18n{paymentsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.paymentsManaged]]">
        </cr-policy-indicator>
        <cr-toggle id="paymentsCheckbox"
            checked="{{syncPrefs.paymentsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes, syncPrefs.paymentsManaged)]]"
            aria-label="$i18n{paymentsCheckboxLabel}">
        </cr-toggle>
      </div>

      <div class="list-item"
           hidden="[[!syncPrefs.productComparisonRegistered]]">
        <div id="productComparisonsCheckboxLabel">
          $i18n{productComparisonsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.productComparisonManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.productComparisonSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes, syncPrefs.productComparisonManaged)]]"
            aria-labelledby="productComparisonsCheckboxLabel">
        </cr-toggle>
      </div>

<if expr="chromeos_ash">
      <div class="list-item" id="cookiesSyncItem" hidden="[[hideCookieItem_(
        syncStatus.syncCookiesSupported, syncPrefs.cookiesRegistered)]]">
        <div>
          $i18n{cookiesCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.cookiesManaged]]">
        </cr-policy-indicator>
        <cr-toggle id="cookiesCheckbox"
            checked="{{syncPrefs.cookiesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
                syncPrefs.syncAllDataTypes, syncPrefs.cookiesManaged)]]"
            aria-label="$i18n{cookiesCheckboxLabel}">
        </cr-toggle>
      </div>

      <div class="list-item"
           hidden="[[!syncPrefs.wifiConfigurationsRegistered]]">
        <div id="wifiConfigurationsCheckboxLabel">
          $i18n{wifiConfigurationsCheckboxLabel}
        </div>
        <cr-policy-indicator indicator-type="userPolicy"
            hidden="[[!syncPrefs.wifiConfigurationsManaged]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{syncPrefs.wifiConfigurationsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[disableTypeCheckBox_(
              syncPrefs.syncAllDataTypes,syncPrefs.wifiConfigurationsManaged)]]"
            aria-labelledby="wifiConfigurationsCheckboxLabel">
        </cr-toggle>
      </div>
    </div>
</if>