Input: Code

<div class="{% if status=='error' %}c-form--error{% elif status=='success' %}c-form--success{% endif %}">
    {% if label %}
      <label class="{% if small %}u-label-03{% else %}u-label-03{% endif %} c-form-label u-color-base" for="">{{ label }}</label>
    {% endif %}
    <div class="u-flex">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="{{fieldLabel}}">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="{{fieldLabel}}">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="{{fieldLabel}}">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall " data-label="{{fieldLabel}}">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="{{fieldLabel}}">
        <input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center" data-label="{{fieldLabel}}">
    </div>
    {% if helper %}
    <span class="c-form-helper">{{ helper }}</span>
    {% endif %}
</div>

<script>
const inputElements = [...document.querySelectorAll('input.code-input')]

inputElements.forEach((ele,index)=>{
  ele.addEventListener('keydown',(e)=>{
    if(e.keyCode === 8 && e.target.value==='') inputElements[Math.max(0,index-1)].focus()
  })
  ele.addEventListener('input',(e)=>{
    const [first,...rest] = e.target.value
    e.target.value = first ?? ''
    if(index!==inputElements.length-1 && first!==undefined) {
      inputElements[index+1].focus()
      inputElements[index+1].value = rest.join('')
      inputElements[index+1].dispatchEvent(new Event('input'))
    }
  })
})

{# function onSubmit(e){
  e.preventDefault()
  const code = [...document.getElementsByTagName('input')]
    .filter(({name})=>name)
    .map(({value})=>value)
    .join('')
  console.log(code)
} #}
</script>