6 of 12 letters, cut in one piece
Keypad phone
132 characters left
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldMultitap(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/input-multitapAbout this component
A text message on a keypad phone: every letter presses its key the right number of times, the screen cycles through the letters on that key before it settles, and the counter runs down from 160.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Click
- Keyframe
Techniques3
- State machine
- Interval
- Keyframes
Accessibility
Keyboard and screen readers
One native input named "Text message"; the phone and the guide are aria-hidden, and the characters left are given as its description.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See allAlarm set for 07:30 · arrows nudge it
11 of 12 · two lines of six