Opt Input

<sl-opt-input label="Enter verification code" help-text="Enter the 6-digit code sent to your device"></sl-opt-input>

<sl-opt-input label="Verification Code"></sl-opt-input>

<sl-opt-input label="4-digit PIN" length="4"></sl-opt-input>
<br />
<sl-opt-input label="6-digit PIN" length="6" numeric-only></sl-opt-input>
<br />
<sl-opt-input label="8-digit code" length="8"></sl-opt-input>

<sl-opt-input label="Alphanumeric Code" type="text" length="6"></sl-opt-input>

<sl-opt-input label="Numeric Code" numeric-only length="6"></sl-opt-input>

<sl-opt-input label="Letter Code" alpha-only length="6" type="text"></sl-opt-input>

<sl-opt-input label="Alphanumeric Code" alphanumeric-only length="6" type="text"></sl-opt-input>

<form class="auto-submit-form">
  <sl-opt-input 
    label="Verification Code" 
    auto-submit 
    numeric-only 
    length="6"
    class="auto-submit-input">
  </sl-opt-input>
  <br />
  <div class="submit-result" style="margin-top: 1rem; padding: 1rem; background: #f0f0f0; border-radius: 4px; display: none;">
    <strong>Form submitted!</strong> Code: <span class="submitted-code"></span>
  </div>
</form>

<script>
  const form = document.querySelector('.auto-submit-form');
  const input = document.querySelector('.auto-submit-input');
  const result = document.querySelector('.submit-result');
  const codeSpan = document.querySelector('.submitted-code');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    codeSpan.textContent = input.value;
    result.style.display = 'block';
    setTimeout(() => {
      result.style.display = 'none';
      input.clear();
    }, 2000);
  });
</script>

<div class="complete-event-demo">
  <sl-opt-input 
    label="Enter Code" 
    numeric-only
    class="complete-input">
  </sl-opt-input>
  <div class="complete-message" style="margin-top: 1rem; color: green; display: none;">
    ✓ Code complete! Value: <strong class="complete-value"></strong>
  </div>
</div>

<script>
  const completeInput = document.querySelector('.complete-input');
  const completeMessage = document.querySelector('.complete-message');
  const completeValue = document.querySelector('.complete-value');

  completeInput.addEventListener('sl-complete', (e) => {
    completeValue.textContent = e.detail.value;
    completeMessage.style.display = 'block';
  });

  completeInput.addEventListener('sl-input', () => {
    if (completeInput.value.length < 6) {
      completeMessage.style.display = 'none';
    }
  });
</script>

<sl-opt-input label="Security Code" help-text="Check your email for the 6-digit verification code"></sl-opt-input>

<sl-opt-input label="Verification Code">
  <sl-icon name="circle-info" slot="label-suffix"></sl-icon>
</sl-opt-input>

<sl-opt-input label="Verification Code" numeric-only>
  <sl-tooltip content="Enter the 6-digit code sent to your email or phone" slot="label-suffix">
    <sl-icon name="circle-info"></sl-icon>
  </sl-tooltip>
</sl-opt-input>

<br /><br />

<sl-opt-input label="Security PIN" numeric-only length="4">
  <sl-tooltip content="Your 4-digit PIN is used to secure your account" slot="label-suffix">
    <sl-icon name="fas-circle-info"></sl-icon>
  </sl-tooltip>
</sl-opt-input>

<sl-opt-input label="Verification Code" disabled value="123456"></sl-opt-input>

<sl-opt-input label="Verification Code" readonly value="123456"></sl-opt-input>

<div class="opt-input-value-example">
  <sl-opt-input label="Enter Code" class="opt-value"></sl-opt-input>
  <br />
  <sl-button onclick="document.querySelector('.opt-value').value = '123456'">Set Value</sl-button>
  <sl-button onclick="document.querySelector('.opt-value').clear()">Clear</sl-button>
  <sl-button onclick="alert(document.querySelector('.opt-value').value)">Get Value</sl-button>
</div>

<div class="opt-input-events">
  <sl-opt-input label="Enter Code" class="opt-events"></sl-opt-input>
  <div class="event-log"></div>
</div>

<script>
  const optInput = document.querySelector('.opt-events');
  const eventLog = document.querySelector('.event-log');

  optInput.addEventListener('sl-input', () => {
    eventLog.innerHTML = `<strong>sl-input:</strong> Value = "${optInput.value}"`;
  });

  optInput.addEventListener('sl-change', () => {
    eventLog.innerHTML += `<br><strong>sl-change:</strong> Value = "${optInput.value}"`;
  });
</script>