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 {
        flex: 1;
      }
    </style>

    <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]]">
        <div id="appCheckboxLabel">
          $i18n{appCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.appsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="appCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.bookmarksRegistered]]">
        <div id="bookmarksCheckboxLabel">
          $i18n{bookmarksCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.bookmarksSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="bookmarksCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.extensionsRegistered]]">
        <div id="extensionsCheckboxLabel">
          $i18n{extensionsCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.extensionsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="extensionsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.typedUrlsRegistered]]">
        <div id="historyCheckboxLabel">
          $i18n{historyCheckboxLabel}
        </div>
        <!-- TypedUrls has a special on-change handler to deal with user
             events. -->
        <cr-toggle id="historyToggle"
            checked="{{syncPrefs.typedUrlsSynced}}"
            on-change="onTypedUrlsDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="historyCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.preferencesRegistered]]">
        <div id="settingsCheckboxLabel">
          $i18n{settingsCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.preferencesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="settingsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.themesRegistered]]">
        <div id="themesAndWallpapersCheckboxLabel">
          $i18n{themesAndWallpapersCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.themesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="themesAndWallpapersCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.readingListRegistered]]">
        <div id="readingListCheckboxLabel">
          $i18n{readingListCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.readingListSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="readingListCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.tabsRegistered]]">
        <div id="openTabsCheckboxLabel">
          $i18n{openTabsCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.tabsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="openTabsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.passwordsRegistered]]">
        <div id="passwordsCheckboxLabel">
          $i18n{passwordsCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.passwordsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="passwordsCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.autofillRegistered]]">
        <div id="autofillCheckboxLabel">
          $i18n{autofillCheckboxLabel}
        </div>
        <!-- Autofill has a special on-change handler to deal with
             Payments integration. -->
        <cr-toggle checked="{{syncPrefs.autofillSynced}}"
            on-change="onAutofillDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="autofillCheckboxLabel">
        </cr-toggle>
      </div>

      <div class="list-item" hidden="[[!syncPrefs.autofillRegistered]]">
        <!-- The Payments integration checkbox is a special case in many
             ways. It's visible only if autofill is registered. It's
             disabled and unchecked if autofill is unchecked.-->
        <div>
          $i18n{enablePaymentsIntegrationCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.paymentsIntegrationEnabled}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[shouldPaymentsCheckboxBeDisabled_(
                syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]"
            aria-label="$i18n{enablePaymentsIntegrationCheckboxLabel}">
        </cr-toggle>
      </div>

<if expr="chromeos">
      <div class="list-item"
           hidden="[[!syncPrefs.wifiConfigurationsRegistered]]">
        <div id="wifiConfigurationsCheckboxLabel">
          $i18n{wifiConfigurationsCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.wifiConfigurationsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="wifiConfigurationsCheckboxLabel">
        </cr-toggle>
      </div>
    </div>
</if>