chromium/chrome/browser/resources/ash/settings/internal/storybook/settings_toggle_v2_storybook.html

<style include="storybook-styles">
</style>

<h2>Basic</h2>
<settings-toggle-v2
    checked="[[checkedValue_]]"
    disabled="[[basicToggleDisabled_]]"
    on-change="onCheckedValueChange_">
</settings-toggle-v2>
<cr-checkbox checked="{{basicToggleDisabled_}}">Disabled</cr-checkbox>
<code>
  <div>Value: [[checkedValue_]]</div>
</code>

<h2>Managed (via pref)</h2>
<settings-toggle-v2
    pref="[[virtualManagedPref_]]">
</settings-toggle-v2>

<h2>Inverted (used with pref)</h2>
<settings-toggle-v2
    pref="[[virtualPref_]]"
    on-change="onInvertedToggleChanged_"
    inverted>
</settings-toggle-v2>
<code>
  <div>pref value: [[virtualPref_.value]]</div>
</code>

<h2>noSetPref (used with pref)</h2>
<settings-toggle-v2
    id="noSetPrefToggle"
    checked="[[prefCheckedValue_]]"
    pref="[[virtualPref_]]"
    on-change="enableDialog_"
    on-user-action-setting-pref-change="handlePrefChange_"
    no-set-pref>
</settings-toggle-v2>
<code>
  <div>pref value: [[virtualPref_.value]]</div>
</code>

<template is="dom-if" if="[[showBasicDialog_]]" restamp>
  <cr-dialog id="dialog" show-on-attach>
    <div slot="title">
      Basic Dialog
    </div>
    <div slot="body">
      <div id="secureDnsDialogDescription">
        <div>
          If cancel is clicked, the dialog will close and the value of the
          toggle resets to the original value (pref's value).
        </div>
        <div>
          If confirm is clicked, the dialog will close and the value of the
          toggle switches. The pref's value will sync to the toggle's value.
        </div>
      </div>
    </div>
    <div slot="button-container">
      <cr-button on-click="onCancelButtonClicked_">
        Cancel
      </cr-button>
      <cr-button on-click="onConfirmButtonClicked_">
        Confirm
      </cr-button>
    </div>
  </cr-dialog>
</template>