---
title: Verification Code Input
category: Application
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"code":"<div>\n    <label class=\"text-gray-600\">Verification code</label>\n    <div id=\"fields\" class=\"mt-2 flex items-center gap-x-2\">\n        <input type=\"text\" data-index=\"0\" placeholder=\"0\" class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\" />\n        <input type=\"text\" data-index=\"1\" placeholder=\"0\" class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\" />\n        <input type=\"text\" data-index=\"2\" placeholder=\"0\" class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\" />\n        <input type=\"text\" data-index=\"3\" placeholder=\"0\" class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\" />\n    </div>\n</div>\n\n<script>\n    const fieldsRef = document.getElementById(\"fields\");\n    const state = {\n        code1: \"\",\n        code2: \"\",\n        code3: \"\",\n        code4: \"\"\n    };\n\n    fieldsRef.addEventListener(\"keyup\", (e) => {\n        const target = e.target;\n        const dataIndex = +target.getAttribute(\"data-index\");\n\n        if ((e.key === \"Delete\" || e.key === \"Backspace\")) {\n            const next = dataIndex - 1;\n            if (next > -1) {\n                fieldsRef.children[next].focus();\n            }\n        } else {\n            const next = dataIndex + 1;\n            if (next < fieldsRef.children.length && target.value !== \" \" && target.value !== \"\" && e.key.length === 1) {\n                fieldsRef.children[next].focus();\n            }\n        }\n    });\n\n    fieldsRef.addEventListener(\"input\", (e) => {\n        const target = e.target;\n        const dataIndex = +target.getAttribute(\"data-index\");\n        const codeNumber = \"code\" + (dataIndex + 1);\n        const value = target.value.slice(target.value.length - 1);\n        state[codeNumber] = value;\n        target.value = state[codeNumber];\n    });\n</script>\n","label":"index.html"}]},"preview":"function App() {\n\n    const fieldsRef = useRef()\n    const [state, setState] = useState({ code1: \"\", code2: \"\", code3: \"\", code4: \"\" })\n\n    // Switch to input fields method\n    const inputFocus = (e) => {\n        const elements = fieldsRef.current.children\n        const dataIndex = +e.target.getAttribute(\"data-index\")\n        if ((e.key === \"Delete\" || e.key === \"Backspace\")) {\n            const next = dataIndex - 1;\n            if (next > -1) {\n                elements[next].focus()\n            }\n        } else {\n\n            const next = dataIndex + 1\n            if (next < elements.length && e.target.value != \" \" && e.target.value != \"\" && e.key.length == 1) {\n                elements[next].focus()\n            }\n        }\n    }\n\n    const handleChange = (e, codeNumber) => {\n        const value = e.target.value\n        setState({ ...state, [codeNumber]: value.slice(value.length - 1) })\n    }\n\n    return (\n        <div className=\"max-w-sm mx-auto mt-12\">\n            <label className=\"text-gray-600\">\n                Verification code\n            </label>\n            <div ref={fieldsRef} className=\"mt-2 flex items-center gap-x-2\">\n                <input type=\"text\" data-index=\"0\" placeholder=\"0\" value={state.code1} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code1\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"1\" placeholder=\"0\" value={state.code2} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code2\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"2\" placeholder=\"0\" value={state.code3} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code3\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"3\" placeholder=\"0\" value={state.code4} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code4\")}\n                    onKeyUp={inputFocus}\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"import { useRef, useState } from \"react\"\n\nexport default () => {\n\n    const fieldsRef = useRef()\n    const [state, setState] = useState({ code1: \"\", code2: \"\", code3: \"\", code4: \"\" })\n\n    // Switch to input fields method\n    const inputFocus = (e) => {\n        const elements = fieldsRef.current.children\n        const dataIndex = +e.target.getAttribute(\"data-index\")\n        if ((e.key === \"Delete\" || e.key === \"Backspace\")) {\n            const next = dataIndex - 1;\n            if (next > -1) {\n                elements[next].focus()\n            }\n        } else {\n\n            const next = dataIndex + 1\n            if (next < elements.length && e.target.value != \" \" && e.target.value != \"\" && e.key.length == 1) {\n                elements[next].focus()\n            }\n        }\n    }\n\n    const handleChange = (e, codeNumber) => {\n        const value = e.target.value\n        setState({ ...state, [codeNumber]: value.slice(value.length - 1) })\n    }\n\n    return (\n        <div>\n            <label className=\"text-gray-600\">\n                Verification code\n            </label>\n            <div ref={fieldsRef} className=\"mt-2 flex items-center gap-x-2\">\n                <input type=\"text\" data-index=\"0\" placeholder=\"0\" value={state.code1} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code1\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"1\" placeholder=\"0\" value={state.code2} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code2\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"2\" placeholder=\"0\" value={state.code3} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code3\")}\n                    onKeyUp={inputFocus}\n                />\n                <input type=\"text\" data-index=\"3\" placeholder=\"0\" value={state.code4} className=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n                    onChange={(e) => handleChange(e, \"code4\")}\n                    onKeyUp={inputFocus}\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <div>\n    <label class=\"text-gray-600\">\n      Verification code\n    </label>\n    <div ref=\"fieldsRef\" class=\"mt-2 flex items-center gap-x-2\">\n      <input\n        type=\"text\"\n        data-index=\"0\"\n        placeholder=\"0\"\n        v-model=\"state.code1\"\n        class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n        @input=\"handleChange('code1', $event)\"\n        @keyup=\"inputFocus\"\n      />\n      <input\n        type=\"text\"\n        data-index=\"1\"\n        placeholder=\"0\"\n        v-model=\"state.code2\"\n        class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n        @input=\"handleChange('code2', $event)\"\n        @keyup=\"inputFocus\"\n      />\n      <input\n        type=\"text\"\n        data-index=\"2\"\n        placeholder=\"0\"\n        v-model=\"state.code3\"\n        class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n        @input=\"handleChange('code3', $event)\"\n        @keyup=\"inputFocus\"\n      />\n      <input\n        type=\"text\"\n        data-index=\"3\"\n        placeholder=\"0\"\n        v-model=\"state.code4\"\n        class=\"w-12 h-12 rounded-lg border focus:border-indigo-600 outline-none text-center text-2xl\"\n        @input=\"handleChange('code4', $event)\"\n        @keyup=\"inputFocus\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      state: {\n        code1: \"\",\n        code2: \"\",\n        code3: \"\",\n        code4: \"\",\n      },\n    };\n  },\n  methods: {\n    inputFocus(e) {\n      const elements = this.$refs.fieldsRef.children;\n      const dataIndex = +e.target.getAttribute(\"data-index\");\n      if (e.key === \"Delete\" || e.key === \"Backspace\") {\n        const next = dataIndex - 1;\n        if (next > -1) {\n          elements[next].focus();\n        }\n      } else {\n        const next = dataIndex + 1;\n        if (\n          next < elements.length &&\n          e.target.value != \" \" &&\n          e.target.value != \"\" &&\n          e.key.length == 1\n        ) {\n          elements[next].focus();\n        }\n      }\n    },\n    handleChange(codeNumber, e) {\n      const value = e.target.value;\n      this.state[codeNumber] = value.slice(value.length - 1);\n    },\n  },\n};\n</script>"}],"vueCss":[]},"svelte":{"svelteTail":[]}}
slug: /inputs
id: 07824efa-505a-435d-8ea3-65adedb2e30a
created_at: 1668381651507
---

<FUIVerificationCodeInput />