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;
      }
    </style>

<if expr="is_chromeos">
    <!-- TODO(crbug.com/1231500): Remove this warning after Lacros side-by-side
      rollout stage. -->
    <template is="dom-if" if="[[shouldShowLacrosSideBySideWarning_()]]">
      <div class="cr-row first cr-padded-text">
        $i18n{syncSettingsLacrosSideBySideWarning}
      </div>
    </template>
    <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-toggle checked="{{syncPrefs.appsSynced}}"
          on-change="onSingleSyncDataTypeChanged_"
          disabled="[[syncPrefs.syncAllDataTypes]]"
          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-toggle id="appsSyncToggle"
          checked="{{syncPrefs.appsSynced}}"
          on-change="onSingleSyncDataTypeChanged_"
          disabled="[[shouldAppsToggleBeDisabled_(
            syncPrefs.syncAllDataTypes, showSyncSettingsRevamp_)]]"
          aria-labelledby="appCheckboxLabel">
      </cr-toggle>
</if>
      </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>
        <cr-toggle id="historyToggle"
            checked="{{syncPrefs.typedUrlsSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            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="themeCheckboxLabel">
          $i18n{themeCheckboxLabel}
        </div>
        <cr-toggle checked="{{syncPrefs.themesSynced}}"
            on-change="onSingleSyncDataTypeChanged_"
            disabled="[[syncPrefs.syncAllDataTypes]]"
            aria-labelledby="themeCheckboxLabel">
        </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_ash">
      <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>