3 of 4 stops · click a board to take it down
Shortcut
Taken by other commands
- New note⌘N
- Find⌘F
- Sidebar⌘\
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldShortcut(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-shortcutAbout this component
A shortcut recorder: hold the keys and each modifier rises into the field as a full-size keycap that stays pressed while held, the last key drops in and the chord clicks down as it saves; a chord another command uses shakes and lights that command.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Focus
- Keyframe
Techniques3
- State machine
- Keyframes
- CSS transition
Accessibility
Keyboard and screen readers
The native input is labelled "Open search" and its value is the spoken chord ("Shift Command K"); a polite live region announces what was saved or refused.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all4 of 10 letters, fished out of the soup
13 words · about 5 seconds read aloud
$12.50 · Enter to ring it up