Checkbox

<zn-checkbox>Accept terms and conditions</zn-checkbox>

<zn-checkbox>Financial products access</zn-checkbox>

<zn-checkbox checked>I agree to the terms</zn-checkbox>

<zn-checkbox indeterminate>Select all items</zn-checkbox>

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

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

<zn-checkbox color="default" checked>Default</zn-checkbox>
<br />
<zn-checkbox color="primary" checked>Primary</zn-checkbox>
<br />
<zn-checkbox color="secondary" checked>Secondary</zn-checkbox>
<br />
<zn-checkbox color="info" checked>Info</zn-checkbox>
<br />
<zn-checkbox color="success" checked>Success</zn-checkbox>
<br />
<zn-checkbox color="warning" checked>Warning</zn-checkbox>
<br />
<zn-checkbox color="error" checked>Error</zn-checkbox>

<zn-checkbox checked-color="success" unchecked-color="error" checked>Checked color (success)</zn-checkbox>
<br />
<zn-checkbox checked-color="success" unchecked-color="error">Unchecked color (error)</zn-checkbox>

<zn-checkbox description="Grants access to cash account and charge card features">Financial products access</zn-checkbox>
<br /><br />
<zn-checkbox>
  Advanced settings
  <div slot="description">
    This option enables <strong>advanced features</strong> that require additional permissions.
  </div>
</zn-checkbox>

<zn-checkbox label="User Preferences" label-tooltip="Configure your account settings">
  Enable notifications
</zn-checkbox>

<zn-checkbox checked-icon="favorite" color="error" checked>Add to favorites</zn-checkbox>
<br />
<zn-checkbox checked-icon="thumb_up" unchecked-icon="thumb_down" color="success">Like this</zn-checkbox>

<zn-checkbox description="Grants access to cash account and charge card features" contained>Financial products access</zn-checkbox>
<br/><br/>
<zn-checkbox-group label="Financial products permissions" contained>
  <zn-checkbox description="Requires separate initiators and approvers">Initiate outbound transfers</zn-checkbox>
  <zn-checkbox description="Requires separate initiators and approvers">Approve outbound transfers</zn-checkbox>
  <zn-checkbox description="Applies to both cash account and charge card" disabled>Export transactions</zn-checkbox>
</zn-checkbox-group>

<zn-checkbox-group
  label="Choose benefits"
  help-text="Select all that apply"
  name="benefits"
  contained
  horizontal>
  <zn-checkbox
    value="health"
    card-title="Health insurance"
    description="Medical and dental cover."
    image-position="top"
    control-position="top-right">
    <zn-icon slot="image" src="health_and_safety" size="64"></zn-icon>
  </zn-checkbox>
  <zn-checkbox
    value="pension"
    card-title="Pension"
    description="Employer contribution matching."
    image-position="top"
    control-position="top-right">
    <zn-icon slot="image" src="savings" size="64"></zn-icon>
  </zn-checkbox>
</zn-checkbox-group>

<zn-checkbox-group label="Choose add-ons" name="addons" contained horizontal wrap>
  <zn-checkbox value="support" card-title="Priority support" description="One hour response time" control-position="none"></zn-checkbox>
  <zn-checkbox value="backups" card-title="Daily backups" description="Retained for 30 days" control-position="none"></zn-checkbox>
  <zn-checkbox value="audit" card-title="Audit log" description="Exportable as CSV" control-position="none"></zn-checkbox>
</zn-checkbox-group>

<zn-checkbox borderless>Borderless checkbox</zn-checkbox>
<br />
<zn-checkbox borderless checked>Borderless checked</zn-checkbox>

<div style="display: flex; gap: 1rem;">
  <zn-checkbox horizontal>Option 1</zn-checkbox>
  <zn-checkbox horizontal>Option 2</zn-checkbox>
  <zn-checkbox horizontal>Option 3</zn-checkbox>
</div>

<zn-checkbox style="width:100%" contained>Grant financial products access
  <div slot="selected-content">
    <p>A mobile number is required to grant this user access to financial products. The number will be used for login verification.</p>
    <zn-input style="width: 280px;" label="Mobile number" type="tel" required optional-icon></zn-input>
  </div>
</zn-checkbox>
<style>
  zn-checkbox::part(selected-content) {
    font-size: 14px;
    font-weight: normal;
    color: #6D7176;
    margin-top: 1rem;
  }
</style>

<form id="checkbox-form">
  <zn-checkbox name="newsletter" value="yes">Subscribe to newsletter</zn-checkbox>
  <br />
  <zn-checkbox name="terms" value="accepted" required>I accept the terms and conditions</zn-checkbox>
  <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('#checkbox-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="unchecked-value-form">
  <zn-checkbox name="receive-emails" value="yes" unchecked-value="no" checked>
    Receive email updates
  </zn-checkbox>
  <br /><br />
  <zn-button type="submit" color="primary">Submit</zn-button>
</form>

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

<form id="required-form">
  <zn-checkbox name="agree" required>
    I agree to the terms and conditions
  </zn-checkbox>
  <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="custom-validity">
  <zn-checkbox>I understand the risks involved</zn-checkbox>
  <br/>
  <zn-button type="submit" color="primary" style="margin-top: 1rem;">Submit</zn-button>
</form>
<script type="module">
  const form = document.querySelector('.custom-validity');
  const checkbox = form.querySelector('zn-checkbox');
  const errorMessage = `You must acknowledge the risks before proceeding`;

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

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

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

<form id="submit-on-click-form">
  <zn-checkbox name="instant" submit-on-click>
    Apply changes immediately
  </zn-checkbox>
</form>

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

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

<br /><br />

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

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

<div>
  <zn-checkbox id="event-checkbox">Toggle me</zn-checkbox>
  <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 checkbox = document.querySelector('#event-checkbox');
  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);
    }
  }

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

  checkbox.addEventListener('zn-input', () => {
    logEvent('zn-input');
  });

  checkbox.addEventListener('zn-focus', () => {
    logEvent('zn-focus');
  });

  checkbox.addEventListener('zn-blur', () => {
    logEvent('zn-blur');
  });
</script>

<div>
  <zn-checkbox id="method-checkbox">Programmatic control</zn-checkbox>
  <br /><br />
  <zn-button id="click-btn">Click Checkbox</zn-button>
  <zn-button id="focus-btn" color="info">Focus Checkbox</zn-button>
  <zn-button id="blur-btn" color="secondary">Blur Checkbox</zn-button>
  <zn-button id="validate-btn" color="warning">Check Validity</zn-button>
</div>

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

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

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

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

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