chrome/browser/resources/md_extensions/toggle_row.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">

<dom-module id="extensions-toggle-row">
  <template>
    <style>
      :host {
        flex-direction: column;
        touch-action: none;
      }

      input {
        display: none;
      }

      label {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex: 1;
        padding: 0 var(--toggle-row-label-padding, 0);
        width: 100%;
      }

      cr-toggle {
        display: inline-block;
      }

      :host ::slotted(*) {
        flex: 1;
        margin-inline-end: 20px;
      }
    </style>
    <label id="label">
      <input id="native" type="checkbox" checked="[[checked]]"
          on-change="onNativeChange_" on-click="onNativeClick_"
          disabled="[[disabled]]">
      <slot></slot>
      <cr-toggle id="crToggle" checked="{{checked}}" aria-labelledby="label"
          on-change="onCrToggleChange_" disabled="[[disabled]]"></cr-toggle>
    </label>
  </template>
  <script src="toggle_row.js"></script>
</dom-module>