-
-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathAPI.html
More file actions
16 lines (15 loc) · 50.5 KB
/
API.html
File metadata and controls
16 lines (15 loc) · 50.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html><html><head><meta charSet="utf-8"/><title>API | react-verification-input</title><meta name="robots" content="index,follow"/><meta property="og:title" content="API | react-verification-input"/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)"/><style>
:root {
--nextra-primary-hue: 212deg;
--nextra-navbar-height: 4rem;
--nextra-menu-height: 3.75rem;
--nextra-banner-height: 2.5rem;
}
.dark {
--nextra-primary-hue: 204deg;
}
</style><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta property="og:title" content="react-verification-input"/><meta property="og:description" content="Customizable, masked input for React."/><meta name="next-head-count" content="9"/><link rel="preload" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" as="style"/><link rel="stylesheet" href="/react-verification-input/_next/static/css/dddea6f693da53a1.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/react-verification-input/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/react-verification-input/_next/static/chunks/webpack-a75dfb0dcf3ea940.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/main-b79e7c1db0d22be6.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/_app-00abc3efdcbf2bff.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/799-4fdf2e1c55cc217b.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/781-17aee8ca8d36b475.js" defer=""></script><script src="/react-verification-input/_next/static/chunks/pages/API-ecff9f1840f1ebc5.js" defer=""></script><script src="/react-verification-input/_next/static/1zE2a0ainoORoYSPBpi7g/_buildManifest.js" defer=""></script><script src="/react-verification-input/_next/static/1zE2a0ainoORoYSPBpi7g/_ssgManifest.js" defer=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div dir="ltr"><script>document.documentElement.setAttribute('dir','ltr')</script><div class="nextra-nav-container nx-sticky nx-top-0 nx-z-20 nx-w-full nx-bg-transparent"><div class="nextra-nav-container-blur nx-pointer-events-none nx-absolute nx-z-[-1] nx-h-full nx-w-full nx-bg-white dark:nx-bg-dark nx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] dark:nx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:nx-shadow-[0_0_0_1px_#000] contrast-more:dark:nx-shadow-[0_0_0_1px_#fff]"></div><nav class="nx-mx-auto nx-flex nx-h-[var(--nextra-navbar-height)] nx-max-w-[90rem] nx-items-center nx-justify-end nx-gap-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nx-flex nx-items-center hover:nx-opacity-75 ltr:nx-mr-auto rtl:nx-ml-auto" href="/react-verification-input"><svg xmlns="http://www.w3.org/2000/svg" width="150px" viewBox="0 0 670 214" fill="none"><path d="M624.697 24.5H617.071C616.709 24.5 616.467 24.8716 616.613 25.2021L655.015 112.085C655.413 112.986 655.413 114.014 655.015 114.915L616.613 201.798C616.467 202.128 616.709 202.5 617.071 202.5H624.697C624.895 202.5 625.075 202.383 625.155 202.202L664.271 113.702C664.328 113.573 664.328 113.427 664.271 113.298L625.155 24.7979C625.075 24.6168 624.895 24.5 624.697 24.5Z" fill="#CA33FF" stroke="#CA33FF" stroke-width="3"></path><rect x="503.5" y="121.5" width="87" height="91" rx="6.5" stroke="#CA33FF" stroke-width="3"></rect><rect x="509" y="127" width="76" height="80" rx="2" fill="white"></rect><path d="M533.92 152.841V149.091H560.102V152.841H549.124V184H544.897V152.841H533.92Z" fill="black"></path><rect x="397.5" y="121.5" width="87" height="91" rx="6.5" stroke="#CA33FF" stroke-width="3"></rect><rect x="403" y="127" width="76" height="80" rx="2" fill="white"></rect><path d="M450.347 149.091H454.575V172.205C454.575 174.591 454.012 176.722 452.887 178.597C451.773 180.46 450.2 181.932 448.165 183.011C446.131 184.08 443.745 184.614 441.006 184.614C438.268 184.614 435.881 184.08 433.847 183.011C431.813 181.932 430.234 180.46 429.109 178.597C427.995 176.722 427.438 174.591 427.438 172.205V149.091H431.665V171.864C431.665 173.568 432.04 175.085 432.79 176.415C433.54 177.733 434.609 178.773 435.995 179.534C437.393 180.284 439.063 180.659 441.006 180.659C442.95 180.659 444.62 180.284 446.018 179.534C447.415 178.773 448.484 177.733 449.222 176.415C449.972 175.085 450.347 173.568 450.347 171.864V149.091Z" fill="black"></path><rect x="291.5" y="121.5" width="87" height="91" rx="6.5" stroke="#CA33FF" stroke-width="3"></rect><rect x="297" y="127" width="76" height="80" rx="2" fill="white"></rect><path d="M323.993 184V149.091H335.788C338.527 149.091 340.766 149.585 342.504 150.574C344.254 151.551 345.55 152.875 346.391 154.545C347.232 156.216 347.652 158.08 347.652 160.136C347.652 162.193 347.232 164.062 346.391 165.744C345.561 167.426 344.277 168.767 342.538 169.767C340.8 170.756 338.572 171.25 335.857 171.25H327.402V167.5H335.72C337.595 167.5 339.101 167.176 340.237 166.528C341.374 165.881 342.197 165.006 342.709 163.903C343.232 162.79 343.493 161.534 343.493 160.136C343.493 158.739 343.232 157.489 342.709 156.386C342.197 155.284 341.368 154.42 340.22 153.795C339.072 153.159 337.55 152.841 335.652 152.841H328.22V184H323.993Z" fill="black"></path><rect x="185.5" y="121.5" width="87" height="91" rx="6.5" stroke="#CA33FF" stroke-width="3"></rect><rect x="191" y="127" width="76" height="80" rx="2" fill="white"></rect><path d="M242.839 149.091V184H238.748L219.725 156.591H219.384V184H215.157V149.091H219.248L238.339 176.568H238.68V149.091H242.839Z" fill="black"></path><rect x="79.5" y="121.5" width="87" height="91" rx="6.5" stroke="#CA33FF" stroke-width="3"></rect><rect x="85" y="127" width="76" height="80" rx="2" fill="white"></rect><path d="M125.103 149.091V184H120.876V149.091H125.103Z" fill="black"></path><path d="M89.3182 13.1818L110.045 71.9545H110.864L131.591 13.1818H140.455L114.818 83H106.091L80.4545 13.1818H89.3182ZM167.318 84.0909C162.273 84.0909 157.92 82.9773 154.261 80.75C150.625 78.5 147.818 75.3636 145.841 71.3409C143.886 67.2955 142.909 62.5909 142.909 57.2273C142.909 51.8636 143.886 47.1364 145.841 43.0455C147.818 38.9318 150.568 35.7273 154.091 33.4318C157.636 31.1136 161.773 29.9545 166.5 29.9545C169.227 29.9545 171.92 30.4091 174.58 31.3182C177.239 32.2273 179.659 33.7045 181.841 35.75C184.023 37.7727 185.761 40.4545 187.057 43.7955C188.352 47.1364 189 51.25 189 56.1364V59.5455H148.636V52.5909H180.818C180.818 49.6364 180.227 47 179.045 44.6818C177.886 42.3636 176.227 40.5341 174.068 39.1932C171.932 37.8523 169.409 37.1818 166.5 37.1818C163.295 37.1818 160.523 37.9773 158.182 39.5682C155.864 41.1364 154.08 43.1818 152.83 45.7045C151.58 48.2273 150.955 50.9318 150.955 53.8182V58.4545C150.955 62.4091 151.636 65.7614 153 68.5114C154.386 71.2386 156.307 73.3182 158.761 74.75C161.216 76.1591 164.068 76.8636 167.318 76.8636C169.432 76.8636 171.341 76.5682 173.045 75.9773C174.773 75.3636 176.261 74.4545 177.511 73.25C178.761 72.0227 179.727 70.5 180.409 68.6818L188.182 70.8636C187.364 73.5 185.989 75.8182 184.057 77.8182C182.125 79.7955 179.739 81.3409 176.898 82.4545C174.057 83.5455 170.864 84.0909 167.318 84.0909ZM201.239 83V30.6364H209.011V38.5455H209.557C210.511 35.9545 212.239 33.8523 214.739 32.2386C217.239 30.625 220.057 29.8182 223.193 29.8182C223.784 29.8182 224.523 29.8295 225.409 29.8523C226.295 29.875 226.966 29.9091 227.42 29.9545V38.1364C227.148 38.0682 226.523 37.9659 225.545 37.8295C224.591 37.6705 223.58 37.5909 222.511 37.5909C219.966 37.5909 217.693 38.125 215.693 39.1932C213.716 40.2386 212.148 41.6932 210.989 43.5568C209.852 45.3977 209.284 47.5 209.284 49.8636V83H201.239ZM236.957 83V30.6364H245.003V83H236.957ZM241.048 21.9091C239.48 21.9091 238.128 21.375 236.991 20.3068C235.878 19.2386 235.321 17.9545 235.321 16.4545C235.321 14.9545 235.878 13.6705 236.991 12.6023C238.128 11.5341 239.48 11 241.048 11C242.616 11 243.957 11.5341 245.071 12.6023C246.207 13.6705 246.776 14.9545 246.776 16.4545C246.776 17.9545 246.207 19.2386 245.071 20.3068C243.957 21.375 242.616 21.9091 241.048 21.9091ZM283.057 30.6364V37.4545H254.83V30.6364H283.057ZM263.284 83V23.4091C263.284 20.4091 263.989 17.9091 265.398 15.9091C266.807 13.9091 268.636 12.4091 270.886 11.4091C273.136 10.4091 275.511 9.90909 278.011 9.90909C279.989 9.90909 281.602 10.0682 282.852 10.3864C284.102 10.7045 285.034 11 285.648 11.2727L283.33 18.2273C282.92 18.0909 282.352 17.9205 281.625 17.7159C280.92 17.5114 279.989 17.4091 278.83 17.4091C276.17 17.4091 274.25 18.0795 273.068 19.4205C271.909 20.7614 271.33 22.7273 271.33 25.3182V83H263.284ZM294.332 83V30.6364H302.378V83H294.332ZM298.423 21.9091C296.855 21.9091 295.503 21.375 294.366 20.3068C293.253 19.2386 292.696 17.9545 292.696 16.4545C292.696 14.9545 293.253 13.6705 294.366 12.6023C295.503 11.5341 296.855 11 298.423 11C299.991 11 301.332 11.5341 302.446 12.6023C303.582 13.6705 304.151 14.9545 304.151 16.4545C304.151 17.9545 303.582 19.2386 302.446 20.3068C301.332 21.375 299.991 21.9091 298.423 21.9091ZM338.386 84.0909C333.477 84.0909 329.25 82.9318 325.705 80.6136C322.159 78.2955 319.432 75.1023 317.523 71.0341C315.614 66.9659 314.659 62.3182 314.659 57.0909C314.659 51.7727 315.636 47.0795 317.591 43.0114C319.568 38.9205 322.318 35.7273 325.841 33.4318C329.386 31.1136 333.523 29.9545 338.25 29.9545C341.932 29.9545 345.25 30.6364 348.205 32C351.159 33.3636 353.58 35.2727 355.466 37.7273C357.352 40.1818 358.523 43.0455 358.977 46.3182H350.932C350.318 43.9318 348.955 41.8182 346.841 39.9773C344.75 38.1136 341.932 37.1818 338.386 37.1818C335.25 37.1818 332.5 38 330.136 39.6364C327.795 41.25 325.966 43.5341 324.648 46.4886C323.352 49.4205 322.705 52.8636 322.705 56.8182C322.705 60.8636 323.341 64.3864 324.614 67.3864C325.909 70.3864 327.727 72.7159 330.068 74.375C332.432 76.0341 335.205 76.8636 338.386 76.8636C340.477 76.8636 342.375 76.5 344.08 75.7727C345.784 75.0455 347.227 74 348.409 72.6364C349.591 71.2727 350.432 69.6364 350.932 67.7273H358.977C358.523 70.8182 357.398 73.6023 355.602 76.0795C353.83 78.5341 351.477 80.4886 348.545 81.9432C345.636 83.375 342.25 84.0909 338.386 84.0909ZM386.148 84.2273C382.83 84.2273 379.818 83.6023 377.114 82.3523C374.409 81.0795 372.261 79.25 370.67 76.8636C369.08 74.4545 368.284 71.5455 368.284 68.1364C368.284 65.1364 368.875 62.7045 370.057 60.8409C371.239 58.9545 372.818 57.4773 374.795 56.4091C376.773 55.3409 378.955 54.5455 381.341 54.0227C383.75 53.4773 386.17 53.0455 388.602 52.7273C391.784 52.3182 394.364 52.0114 396.341 51.8068C398.341 51.5795 399.795 51.2045 400.705 50.6818C401.636 50.1591 402.102 49.25 402.102 47.9545V47.6818C402.102 44.3182 401.182 41.7045 399.341 39.8409C397.523 37.9773 394.761 37.0455 391.057 37.0455C387.216 37.0455 384.205 37.8864 382.023 39.5682C379.841 41.25 378.307 43.0455 377.42 44.9545L369.784 42.2273C371.148 39.0455 372.966 36.5682 375.239 34.7955C377.534 33 380.034 31.75 382.739 31.0455C385.466 30.3182 388.148 29.9545 390.784 29.9545C392.466 29.9545 394.398 30.1591 396.58 30.5682C398.784 30.9545 400.909 31.7614 402.955 32.9886C405.023 34.2159 406.739 36.0682 408.102 38.5455C409.466 41.0227 410.148 44.3409 410.148 48.5V83H402.102V75.9091H401.693C401.148 77.0455 400.239 78.2614 398.966 79.5568C397.693 80.8523 396 81.9545 393.886 82.8636C391.773 83.7727 389.193 84.2273 386.148 84.2273ZM387.375 77C390.557 77 393.239 76.375 395.42 75.125C397.625 73.875 399.284 72.2614 400.398 70.2841C401.534 68.3068 402.102 66.2273 402.102 64.0455V56.6818C401.761 57.0909 401.011 57.4659 399.852 57.8068C398.716 58.125 397.398 58.4091 395.898 58.6591C394.42 58.8864 392.977 59.0909 391.568 59.2727C390.182 59.4318 389.057 59.5682 388.193 59.6818C386.102 59.9545 384.148 60.3977 382.33 61.0114C380.534 61.6023 379.08 62.5 377.966 63.7045C376.875 64.8864 376.33 66.5 376.33 68.5455C376.33 71.3409 377.364 73.4545 379.432 74.8864C381.523 76.2955 384.17 77 387.375 77ZM447.605 30.6364V37.4545H420.469V30.6364H447.605ZM428.378 18.0909H436.423V68C436.423 70.2727 436.753 71.9773 437.412 73.1136C438.094 74.2273 438.957 74.9773 440.003 75.3636C441.071 75.7273 442.196 75.9091 443.378 75.9091C444.264 75.9091 444.991 75.8636 445.56 75.7727C446.128 75.6591 446.582 75.5682 446.923 75.5L448.56 82.7273C448.014 82.9318 447.253 83.1364 446.276 83.3409C445.298 83.5682 444.06 83.6818 442.56 83.6818C440.287 83.6818 438.06 83.1932 435.878 82.2159C433.719 81.2386 431.923 79.75 430.491 77.75C429.082 75.75 428.378 73.2273 428.378 70.1818V18.0909ZM459.707 83V30.6364H467.753V83H459.707ZM463.798 21.9091C462.23 21.9091 460.878 21.375 459.741 20.3068C458.628 19.2386 458.071 17.9545 458.071 16.4545C458.071 14.9545 458.628 13.6705 459.741 12.6023C460.878 11.5341 462.23 11 463.798 11C465.366 11 466.707 11.5341 467.821 12.6023C468.957 13.6705 469.526 14.9545 469.526 16.4545C469.526 17.9545 468.957 19.2386 467.821 20.3068C466.707 21.375 465.366 21.9091 463.798 21.9091ZM503.761 84.0909C499.034 84.0909 494.886 82.9659 491.318 80.7159C487.773 78.4659 485 75.3182 483 71.2727C481.023 67.2273 480.034 62.5 480.034 57.0909C480.034 51.6364 481.023 46.875 483 42.8068C485 38.7386 487.773 35.5795 491.318 33.3295C494.886 31.0795 499.034 29.9545 503.761 29.9545C508.489 29.9545 512.625 31.0795 516.17 33.3295C519.739 35.5795 522.511 38.7386 524.489 42.8068C526.489 46.875 527.489 51.6364 527.489 57.0909C527.489 62.5 526.489 67.2273 524.489 71.2727C522.511 75.3182 519.739 78.4659 516.17 80.7159C512.625 82.9659 508.489 84.0909 503.761 84.0909ZM503.761 76.8636C507.352 76.8636 510.307 75.9432 512.625 74.1023C514.943 72.2614 516.659 69.8409 517.773 66.8409C518.886 63.8409 519.443 60.5909 519.443 57.0909C519.443 53.5909 518.886 50.3295 517.773 47.3068C516.659 44.2841 514.943 41.8409 512.625 39.9773C510.307 38.1136 507.352 37.1818 503.761 37.1818C500.17 37.1818 497.216 38.1136 494.898 39.9773C492.58 41.8409 490.864 44.2841 489.75 47.3068C488.636 50.3295 488.08 53.5909 488.08 57.0909C488.08 60.5909 488.636 63.8409 489.75 66.8409C490.864 69.8409 492.58 72.2614 494.898 74.1023C497.216 75.9432 500.17 76.8636 503.761 76.8636ZM547.815 51.5V83H539.77V30.6364H547.543V38.8182H548.224C549.452 36.1591 551.315 34.0227 553.815 32.4091C556.315 30.7727 559.543 29.9545 563.497 29.9545C567.043 29.9545 570.145 30.6818 572.804 32.1364C575.463 33.5682 577.531 35.75 579.009 38.6818C580.486 41.5909 581.224 45.2727 581.224 49.7273V83H573.179V50.2727C573.179 46.1591 572.111 42.9545 569.974 40.6591C567.838 38.3409 564.906 37.1818 561.179 37.1818C558.611 37.1818 556.315 37.7386 554.293 38.8523C552.293 39.9659 550.713 41.5909 549.554 43.7273C548.395 45.8636 547.815 48.4545 547.815 51.5Z" fill="#CA33FF"></path><path d="M45.3027 24.5H52.9294C53.2908 24.5 53.5328 24.8716 53.3867 25.2021L14.9854 112.085C14.5871 112.986 14.5871 114.014 14.9854 114.915L53.3867 201.798C53.5328 202.128 53.2908 202.5 52.9294 202.5H45.3027C45.1047 202.5 44.9254 202.383 44.8453 202.202L5.72932 113.702C5.67242 113.573 5.67242 113.427 5.72932 113.298L44.8453 24.7979C44.9254 24.6168 45.1047 24.5 45.3027 24.5Z" fill="#CA33FF" stroke="#CA33FF" stroke-width="3"></path></svg></a><div class="nextra-search nx-relative md:nx-w-64 nx-hidden md:nx-inline-block mx-min-w-[200px]"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div><a href="https://github.com/andreaswilli/react-verification-input" target="_blank" rel="noreferrer" class="nx-p-2 nx-text-current"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg><span class="nx-sr-only">GitHub</span><span class="nx-sr-only"> (opens in a new tab)</span></a><button type="button" aria-label="Menu" class="nextra-hamburger -nx-mr-2 nx-rounded nx-p-2 active:nx-bg-gray-400/20 md:nx-hidden"><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="nx-mx-auto nx-flex nx-max-w-[90rem]"><div class="motion-reduce:nx-transition-none [transition:background-color_1.5s_ease] nx-bg-transparent"></div><aside class="nextra-sidebar-container nx-flex nx-flex-col md:nx-top-16 md:nx-shrink-0 motion-reduce:nx-transform-none nx-transform-gpu nx-transition-all nx-ease-in-out md:nx-w-64 md:nx-sticky md:nx-self-start max-md:[transform:translate3d(0,-100%,0)]"><div class="nx-px-4 nx-pt-4 md:nx-hidden"><div class="nextra-search nx-relative md:nx-w-64"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div></div><div class="nx-overflow-y-auto nx-p-4 nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-3.75rem)] nextra-scrollbar"><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-p-2 nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100"><ul class="nx-flex nx-flex-col nx-gap-1 max-md:nx-hidden"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input">Demo</a></li><li class="nx-flex nx-flex-col nx-gap-1 active"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-bg-primary-50 nx-font-bold nx-text-primary-600 dark:nx-bg-primary-500/10 contrast-more:nx-border-primary-500 contrast-more:dark:nx-border-primary-500" href="/react-verification-input/API">API</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/styling">Styling</a></li><li class="open"><a class="nx-items-center nx-justify-between nx-gap-2 nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50">Migration Guide<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180 ltr:nx-rotate-90 rtl:nx-rotate-[-270deg]"></path></svg></a><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-p-2 nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100 ltr:nx-pr-0 rtl:nx-pl-0"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1.5 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-1 rtl:nx-mr-1"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v4">Migrating to Version 4</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v3">Migrating to Version 3</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v2">Migrating to Version 2</a></li></ul></div></div></li></ul></div></div><ul class="nx-flex nx-flex-col nx-gap-1 md:nx-hidden"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input">Demo</a></li><li class="nx-flex nx-flex-col nx-gap-1 active"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-bg-primary-50 nx-font-bold nx-text-primary-600 dark:nx-bg-primary-500/10 contrast-more:nx-border-primary-500 contrast-more:dark:nx-border-primary-500" href="/react-verification-input/API">API</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/styling">Styling</a></li><li class="open"><a class="nx-items-center nx-justify-between nx-gap-2 nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50">Migration Guide<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180 ltr:nx-rotate-90 rtl:nx-rotate-[-270deg]"></path></svg></a><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-p-2 nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100 ltr:nx-pr-0 rtl:nx-pl-0"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1.5 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-1 rtl:nx-mr-1"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v4">Migrating to Version 4</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v3">Migrating to Version 3</a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-500 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-neutral-500 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/react-verification-input/migration/v2">Migrating to Version 2</a></li></ul></div></div></li></ul></div><div class="nx-sticky nx-bottom-0 nx-bg-white dark:nx-bg-dark nx-mx-4 nx-border-t nx-py-4 nx-shadow-[0_-12px_16px_#fff] nx-flex nx-items-center nx-gap-2 dark:nx-border-neutral-800 dark:nx-shadow-[0_-12px_16px_#111] contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-shadow-none"><div class="nx-relative"><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:Rlsr6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">light</span></div></button></div></div></aside><nav class="nextra-toc nx-order-last nx-hidden nx-w-64 nx-shrink-0 xl:nx-block nx-px-4" aria-label="table of contents"><div class="nextra-scrollbar nx-sticky nx-top-16 nx-overflow-y-auto nx-pr-4 nx-pt-8 nx-text-sm [hyphens:auto] nx-max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:-nx-mr-4 rtl:-nx-ml-4"><div class="nx-sticky nx-bottom-0 nx-flex nx-flex-col nx-items-start nx-gap-2 nx-pb-8 dark:nx-border-neutral-800 contrast-more:nx-border-t contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-border-neutral-400"><a href="https://github.com/andreaswilli/react-verification-input/issues/new?title=Feedback%20for%20%E2%80%9CAPI%E2%80%9D&labels=feedback" target="_blank" rel="noreferrer" class="nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50">Question? Give us feedback →<span class="nx-sr-only"> (opens in a new tab)</span></a><a class="nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50" href="https://github.com/andreaswilli/react-verification-input/tree/master/docs-src/pages/API.mdx">Edit this page</a></div></div></nav><div id="reach-skip-nav"></div><article class="nextra-content nx-flex nx-min-h-[calc(100vh-4rem)] nx-w-full nx-min-w-0 nx-max-w-full nx-justify-center nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pt-4 md:nx-px-12"><div class="nextra-breadcrumb nx-mt-2.5 nx-flex nx-items-center nx-gap-1 nx-overflow-hidden nx-text-sm nx-text-gray-500 contrast-more:nx-text-current"><div class="nx-whitespace-nowrap nx-transition-colors nx-font-medium nx-text-gray-700 contrast-more:nx-font-bold contrast-more:nx-text-current dark:nx-text-gray-400 contrast-more:dark:nx-text-current" title="API">API</div></div><h1 class="nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100">API</h1>
<!-- -->
<p class="nx-mt-6 nx-leading-7 first:nx-mt-0">All of these props are optional and some also come with a default value. However, it's recommended to use at least the <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">length</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">validChars</code> and <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">onChange</code>/<code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">onComplete</code> props.</p>
<table class="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0"><thead><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600">Option</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600">Type</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600">Default</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600">Description</th></tr></thead><tbody><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">value</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">String</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">-</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">The value of the verification input. Behaves like the value prop of a regular input element. This is necessary if the value needs to be changed from the outside (e.g. clearing the value). If you pass this prop, you are responsible to manage the value state. Otherwise the state will be kept inside the component.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">length</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Number</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">6</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Number of characters the input should allow.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">validChars</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">String</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">'A-Za-z0-9'</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Set of characters the input should allow. The string is inserted into a regexp character set ( <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">/[]/</code> ) for input validation.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">placeholder</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">String</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">'·'</code> (U+00B7)</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">The character to display in empty fields. In order to use the blank character as a placeholder, specify this option as <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">' '</code> or <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">''</code>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">autoFocus</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Boolean</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">false</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Focus the input automatically as soon as it is rendered.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">passwordMode</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Boolean</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">false</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Hide the input value by displaying <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">*</code> instead.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">inputProps</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Object</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">{}</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">The properties of this object get forwarded as props to the input element. In particular, you can use this prop to assign an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">id</code> attribute to the input field to connect it to a <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">label</code> element. Use <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">aria-label</code> for internationalization of the input field.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">containerProps</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Object</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">{}</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">The properties of this object get forwarded as props to the container element.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">classNames</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Object</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">{}</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Object with CSS class names to add to the specified elements. Supported elements (= object-keys) are <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">container</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">character</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">characterInactive</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">characterSelected</code>, <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 " dir="ltr">characterFilled</code></td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">onChange</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Function</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">-</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Callback function that gets called with the string value whenever it changes.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">onComplete</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Function</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">-</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Callback function that gets called with the string value when the input is fully filled.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">onFocus</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Function</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">-</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Callback function that gets called when the component obtains focus.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">onBlur</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Function</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">-</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">Callback function that gets called when the component loses focus.</td></tr></tbody></table>
<div class="nx-mt-16"></div><div class="nx-mb-8 nx-flex nx-items-center nx-border-t nx-pt-8 dark:nx-border-neutral-800 contrast-more:nx-border-neutral-400 dark:contrast-more:nx-border-neutral-400"><a title="Demo" class="nx-flex nx-max-w-[50%] nx-items-center nx-gap-1 nx-py-4 nx-text-base nx-font-medium nx-text-gray-600 nx-transition-colors [word-break:break-word] hover:nx-text-primary-600 dark:nx-text-gray-300 md:nx-text-lg ltr:nx-pr-4 rtl:nx-pl-4" href="/react-verification-input"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-inline nx-h-5 nx-shrink-0 ltr:nx-rotate-180"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>Demo</a><a title="Styling" class="nx-flex nx-max-w-[50%] nx-items-center nx-gap-1 nx-py-4 nx-text-base nx-font-medium nx-text-gray-600 nx-transition-colors [word-break:break-word] hover:nx-text-primary-600 dark:nx-text-gray-300 md:nx-text-lg ltr:nx-ml-auto ltr:nx-pl-4 ltr:nx-text-right rtl:nx-mr-auto rtl:nx-pr-4 rtl:nx-text-left" href="/react-verification-input/styling">Styling<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-inline nx-h-5 nx-shrink-0 rtl:nx-rotate-180"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a></div></main></article></div><footer class="nx-bg-gray-100 nx-pb-[env(safe-area-inset-bottom)] dark:nx-bg-neutral-900"><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-gap-2 nx-py-2 nx-px-4 nx-hidden"><div class="nx-relative"><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:Rkt6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">light</span></div></button></div></div><hr class="dark:nx-border-neutral-800"/><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center nx-py-12 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">MIT 2024 © Nextra.</div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/API","query":{},"buildId":"1zE2a0ainoORoYSPBpi7g","assetPrefix":"/react-verification-input","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>