OTP ఇన్‌పుట్ స్లాట్‌ల వరుసలా కనిపిస్తుంది, కానీ దాని కింద ఉండేది ఒకే నేటివ్ <input>. SMS ఆటోఫిల్ (autocomplete="one-time-code"), పేస్ట్, పాస్‌వర్డ్ మేనేజర్‌లు, ఫారమ్‌లు, స్క్రీన్ రీడర్‌లు అన్నింటికీ అది మామూలు టెక్స్ట్ ఫీల్డ్‌గానే కనిపిస్తుంది.

పేస్ట్ చేసిన కోడ్‌లు శుభ్రపరచబడతాయి, కాబట్టి “123-456”, “123 456” రెండూ పనిచేస్తాయి; ప్యాటర్న్ అనుమతించని అక్షరాలు తిరస్కరించబడతాయి. Android లో SMS రాగానే webOtp దాని నుంచి కోడ్‌ను నింపుతుంది.

వెరిఫికేషన్

చివరి స్లాట్ నిండినప్పుడు (completed) ఫైర్ అవుతుంది. కోడ్‌ను తిరస్కరించడానికి ఇన్‌పుట్‌పై aria-invalid సెట్ చేయండి: స్లాట్‌లు ఎరుపు రంగులోకి మారి అటూ ఇటూ ఊగుతాయి.

Try 123456, or anything else.

అక్షరాలు, గ్రూపులు, మాస్కింగ్

pattern="alphanumeric" అక్షరాలను కూడా తీసుకుంటుంది, [groups] సెపరేటర్‌లను జోడిస్తుంది, masked చుక్కలను గీస్తుంది.