Toggle

<zn-toggle checked>Enable notifications</zn-toggle>

<zn-toggle label="Settings">Dark mode</zn-toggle>

<zn-toggle checked>Auto-save enabled</zn-toggle>

<zn-toggle disabled>Disabled toggle</zn-toggle>
<br />
<zn-toggle disabled checked>Disabled and checked</zn-toggle>

<zn-toggle size="small">Small toggle</zn-toggle>
<br />
<zn-toggle size="medium">Medium toggle</zn-toggle>
<br />
<zn-toggle size="large">Large toggle</zn-toggle>

<zn-toggle label="User Preferences">Enable email notifications</zn-toggle>

<zn-toggle on-text="Notifications enabled" off-text="Notifications disabled" checked>
  Push notifications
</zn-toggle>
<br /><br />
<zn-toggle on-text="Available" off-text="Unavailable" label="Status">
  User availability
</zn-toggle>

<zn-toggle help-text="When enabled, you will receive real-time notifications">
  Enable real-time updates
</zn-toggle>

<zn-toggle checked>Try using arrow keys when focused</zn-toggle>

<form id="toggle-form">
  <zn-toggle name="notifications" value="enabled">Enable notifications</zn-toggle>
  <br />
  <zn-toggle name="auto-save" value="on" checked>Auto-save changes</zn-toggle>
  <br />
  <zn-toggle name="analytics" value="yes" required>Accept analytics (required)</zn-toggle>
  <br /><br />
  <zn-button type="submit" color="primary">Submit</zn-button>
  <zn-button type="reset" color="secondary">Reset</zn-button>
</form>

<script type="module">
  const form = document.querySelector('#toggle-form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    alert('Form submitted: ' + JSON.stringify(data, null, 2));
  });
</script>

<form id="fallback-form">
  <zn-toggle name="premium-features" value="enabled" fallback="disabled" checked>
    Premium features
  </zn-toggle>
  <br /><br />
  <zn-button type="submit" color="primary">Submit</zn-button>
</form>

<script type="module">
  const form = document.querySelector('#fallback-form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    alert('Value: ' + formData.get('premium-features'));
  });
</script>

<form id="required-form">
  <zn-toggle name="terms" required>
    I agree to the terms and conditions
  </zn-toggle>
  <br /><br />
  <zn-button type="submit" color="primary">Submit</zn-button>
</form>

<script type="module">
  const form = document.querySelector('#required-form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    alert('Form is valid!');
  });
</script>

<form class="toggle-custom-validity">
  <zn-toggle>I confirm that I have reviewed all settings</zn-toggle>
  <br/>
  <zn-button type="submit" color="primary" style="margin-top: 1rem;">Submit</zn-button>
</form>
<script type="module">
  const form = document.querySelector('.toggle-custom-validity');
  const toggle = form.querySelector('zn-toggle');
  const errorMessage = `You must confirm that you have reviewed the settings`;

  // Set initial validity as soon as the element is defined
  customElements.whenDefined('zn-toggle').then(async () => {
    await toggle.updateComplete;
    toggle.setCustomValidity(errorMessage);
  });

  // Update validity on change
  toggle.addEventListener('zn-change', () => {
    toggle.setCustomValidity(toggle.checked ? '' : errorMessage);
  });

  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('zn-toggle')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

<form id="trigger-submit-form">
  <zn-toggle name="instant" trigger-submit>
    Apply changes immediately
  </zn-toggle>
</form>

<script type="module">
  const form = document.querySelector('#trigger-submit-form');
  let submitCount = 0;
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    submitCount++;
    alert('Form submitted ' + submitCount + ' time(s)');
  });
</script>

<form id="external-toggle-form">
  <zn-button type="submit" color="primary">Submit External Form</zn-button>
</form>

<br /><br />

<zn-toggle form="external-toggle-form" name="external-option" value="selected">
  This toggle is associated with the form above
</zn-toggle>

<script type="module">
  const form = document.querySelector('#external-toggle-form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    alert('External option: ' + (formData.get('external-option') || 'not selected'));
  });
</script>

<div>
  <zn-toggle id="event-toggle" checked>Toggle me</zn-toggle>
  <div id="event-output" style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px;">
    <strong>Events:</strong>
    <ul id="event-list" style="margin: 0.5rem 0 0 0; padding-left: 1.5rem;"></ul>
  </div>
</div>

<script type="module">
  const toggle = document.querySelector('#event-toggle');
  const eventList = document.querySelector('#event-list');

  function logEvent(eventName, detail = '') {
    const li = document.createElement('li');
    li.textContent = `${eventName}${detail ? ': ' + detail : ''}`;
    eventList.insertBefore(li, eventList.firstChild);

    // Keep only last 5 events
    while (eventList.children.length > 5) {
      eventList.removeChild(eventList.lastChild);
    }
  }

  toggle.addEventListener('zn-input', (e) => {
    logEvent('zn-input', `checked = ${e.target.checked}`);
  });

  toggle.addEventListener('focus', () => {
    logEvent('focus');
  });

  toggle.addEventListener('blur', () => {
    logEvent('blur');
  });

  // Monitor checked state changes
  let lastChecked = toggle.checked;
  toggle.addEventListener('click', () => {
    if (toggle.checked !== lastChecked) {
      logEvent('state-change', `checked = ${toggle.checked}`);
      lastChecked = toggle.checked;
    }
  });
</script>

<div>
  <zn-toggle id="method-toggle">Programmatic control</zn-toggle>
  <br /><br />
  <zn-button id="click-btn" size="small">Toggle State</zn-button>
  <zn-button id="focus-btn" size="small" color="info">Focus Toggle</zn-button>
  <zn-button id="blur-btn" size="small" color="secondary">Blur Toggle</zn-button>
  <zn-button id="validate-btn" size="small" color="warning">Check Validity</zn-button>
</div>

<script type="module">
  const toggle = document.querySelector('#method-toggle');

  document.querySelector('#click-btn').addEventListener('click', () => {
    toggle.click();
  });

  document.querySelector('#focus-btn').addEventListener('click', () => {
    toggle.focus();
  });

  document.querySelector('#blur-btn').addEventListener('click', () => {
    toggle.blur();
  });

  document.querySelector('#validate-btn').addEventListener('click', () => {
    const isValid = toggle.checkValidity();
    alert('Toggle is ' + (isValid ? 'valid' : 'invalid'));
  });
</script>

<form id="complete-form">
  <zn-toggle
    label="Notification Settings"
    name="email-notifications"
    value="enabled"
    fallback="disabled"
    on-text="Email notifications are ON"
    off-text="Email notifications are OFF"
    help-text="Receive email updates about your account"
    checked
  >
    Enable email notifications
  </zn-toggle>

  <br />

  <zn-toggle
    label="Privacy Settings"
    name="analytics"
    value="allowed"
    on-text="Analytics tracking enabled"
    off-text="Analytics tracking disabled"
    help-text="Help us improve by sharing anonymous usage data"
    size="medium"
  >
    Allow analytics
  </zn-toggle>

  <br />

  <zn-toggle
    name="terms"
    value="accepted"
    required
    size="small"
  >
    I agree to the terms and conditions (required)
  </zn-toggle>

  <br /><br />
  <zn-button type="submit" color="primary">Save Settings</zn-button>
  <zn-button type="reset" color="secondary">Reset</zn-button>
</form>

<div id="form-output" style="margin-top: 1rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; display: none;">
  <strong>Form Data:</strong>
  <pre id="form-data" style="margin-top: 0.5rem; white-space: pre-wrap;"></pre>
</div>

<script type="module">
  const form = document.querySelector('#complete-form');
  const output = document.querySelector('#form-output');
  const dataDisplay = document.querySelector('#form-data');

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    dataDisplay.textContent = JSON.stringify(data, null, 2);
    output.style.display = 'block';
  });

  form.addEventListener('reset', () => {
    output.style.display = 'none';
  });
</script>