# Cadeado Boxes for the code that arrives by SMS, with paste support, auto-advance, animated states and a resend button. > Cadeado is an exclusive THM Componentes component for entering verification codes of 4 to 8 digits. A single real input sits under the boxes, so pasting, SMS autofill and screen readers work as in a normal field. It includes verifying, success and error states, a resend button with a countdown and a masked PIN variant. - Category: Forms and input - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/cadeado/ ## What it looks like It is a white card with an icon, a heading and six boxes side by side, split by a short dash in the middle. The active box gets a colored border and a blinking caret; each digit rises in slightly and the highlight moves to the next box by itself. While the code is checked, the boxes shimmer in sequence; on success they turn green one by one, and on failure they turn red and the row shakes from side to side. Below, the resend button shows a countdown. The interface text is in Brazilian Portuguese, and the heading and label can be changed through props. ## You may be looking for this if you asked for something like - “an input for the code that arrives by SMS” - “verification code boxes like banking apps have” - “a phone confirmation screen with a 6-digit code” - “paste the whole SMS code at once into the field” - “a resend code button with a countdown timer” - “a PIN field with dots instead of numbers” - “passwordless login with a code sent by email” ## Also known as one-time password field, one-time code input, verification code input, PIN input, 2FA code field, SMS code input ## When to use - Phone or email confirmation during sign-up - Passwordless login and two-factor authentication - A PIN to sign prescriptions, contracts or approve payments - Security screens in banking, health or fintech apps ## When to avoid - Codes with letters, since the field accepts digits only - Flows where an email sign-in link removes the need for a code ## How to ask your AI ```text Build the phone confirmation screen with a 6-digit code field split into boxes: a single input with one-time-code autocomplete, pasting the SMS code, auto-advance, error and success states, resend with a countdown and screen reader support. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Cadeado ### Does Cadeado fill in the SMS code automatically? On many phones, yes. Cadeado uses a real field with one-time-code autocomplete, which lets the system suggest the code received by SMS, and it accepts pasting a whole sentence, keeping only the code digits. On Chrome for Android, the webOtp prop can also read the SMS through the WebOTP API. ### How do I connect Cadeado to my verification API? Pass an async function to the verify prop: Cadeado calls it when the code is complete, shows the verifying state and handles the result, where true confirms and a string becomes the error message. The complete, verified, rejected and resend events notify your code, and v-model holds digits only. ### Is Cadeado accessible? Yes. Cadeado exposes a single labeled and described field that screen readers read like any input, announces verification, errors and resends in a live region, and supports arrows, Home, End and Enter. With reduced motion turned on, the shake and the digit animations are switched off. ## Related components - [Despachante](https://vibecode.thmtecnologia.com/en/components/despachante/): A multi-step sign-up form that formats and checks Brazilian CPF, CNPJ, phone, CEP and password as people type. - [Tabelião](https://vibecode.thmtecnologia.com/en/components/tabeliao/): An area to sign with a finger, stylus or mouse, with a baseline, the signer's name, the date and export. - [Tocha](https://vibecode.thmtecnologia.com/en/components/tocha/): A text field whose border lights up in blue right where the cursor passes, like a small flashlight on the frame. - [Balcão](https://vibecode.thmtecnologia.com/en/components/balcao/): A three-step payment screen with a Pix QR code, card installments and boleto, with the order summary alongside. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).