On every tab · Enter takes one
File name
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldFilename(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-filenameAbout this component
Rename a file: typing a new extension flips the icon to its kind (image, video, audio, code or archive), focus selects the name without the extension, and characters a file name cannot have are refused with a nudge.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Focus
- Icon swap
Techniques3
- State machine
- Keyframes
- SVG
Accessibility
Keyboard and screen readers
One native input named "File name"; the icon is aria-hidden and the kind is announced in the text under it.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See allServer address
Waiting for a full address