01 / 13
Expanding Search Field with Focus-Within
A search icon that expands into a full input field using only CSS `:focus-within` and `width` transitions, saving space until activated.
animationcssforminputtransitionfocus-within
The library
Techniques, not templates
Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
02 / 13
OTP Input with Individual Digit Boxes
A sleek verification code input where each digit resides in its own box. Digits pop in with animation, the active box glows with a blinking caret, and the entire set changes to a success state when complete.
animationcssinputfocusotpverification
03 / 13
Chip / Tag Input Field
An interactive input field that converts typed entries into visible, removable 'chips' upon pressing Enter. Chips are styled as rounded pills and can be individually dismissed by clicking an 'x' button or by pressing Backspace when the input field is empty. Includes accessibility for screen readers.
accessibilityinputjavascriptflexboxchipstags
04 / 13
Auto-growing Textarea with field-sizing
A textarea that automatically expands and contracts its height to fit its content as the user types, without needing any JavaScript. It uses the modern `field-sizing: content` CSS property, paired with `min-height` and `max-height` for sane bounds.
cssresponsiveauto-sizingtextareainputforms
05 / 13
OTP Input with Focus Style
A clean, responsive OTP (One-Time Password) input component featuring individual boxes with distinct focus styling, built purely with HTML and CSS.
csslayoutforminputdesignfocus
06 / 13
Range Slider Gradient Fill
A custom-styled range slider where the track fills with a gradient color from the left as the slider thumb is moved, using a CSS background-size trick and a JavaScript-driven custom property.
cssinputgradientjavascriptsliderrange
07 / 13
Custom Drag & Drop File Input
Transforms a standard HTML file input into an interactive drag-and-drop zone with a visual upload progress bar and a clear success state. It demonstrates handling file selection, simulating progress, and providing visual feedback for drag-and-drop interactions.
animationprogress barinputjavascriptfile uploaddrag & drop
08 / 13
Pure CSS Toggle Switch
An iOS-style toggle switch implemented purely with CSS, using an input checkbox, pseudo-elements, and the :checked selector for state changes and animation, without any JavaScript.
animationtoggleswitchcssforminput
09 / 13
Dynamic Tag Input with Chips
An interactive input field where users can type text, press Enter to create a tag chip, and click '×' to remove a tag. The input field dynamically adjusts its width and wraps as tags are added or removed, offering a smooth user experience.
forminputjavascriptdynamicchipstags
10 / 13
Autocomplete Combobox with Filtering & Keyboard Navigation
An interactive combobox that filters suggestions in real-time as you type, highlights matched text within the results, and allows selection via arrow keys and Enter, or a direct mouse click.
inputuijavascriptkeyboard navigationfilteringautocompletecombobox
11 / 13
Animated Stepper Quantity Input
A quantity stepper component featuring smoothly rolling digits when the value changes and an animated highlight for the total price update. This effect is achieved using CSS transforms and transitions controlled by JavaScript.
animationcssinputjavascriptsteppercounter
12 / 13
Auto-Advancing OTP Input
An OTP (One-Time Password) input field that automatically advances focus to the next box as digits are typed. It supports pasting an entire OTP string, which intelligently fills all fields, and displays a 'verified' state when complete.
animationforminputjavascriptotpauto-fill