30+ JavaScript Input Text - Free Code + Demos

After creating Input Racetrack, my mind started chugging with other ideas for animating input labels. So here are a few new creations with GSAP and Splitting!

I was a little rush on this so the code is not the greatest but this is a little concept of a ghost reading your input text and "hiding" when you are typing out your message.

This pen demonstrates how to create Material Design like form input text fields.

Based on the input on https://webflow.com/cms. Changed to make use of pseudo elements and flexbox layout.

Input mask for React, Angular, Ember, Vue, & plain JavaScript

Expanding text input inspired by : https://dribbble.com/shots/2695463-Expanding-Bar-Animation

Type to have the input generate pixie dust. Happy happy joy joy input.

:balloon: Effortless, dynamic-width text boxes in vanilla JavaScript

Trying to make input field that is a bit more fancy than the regular boring box. Works nicely on Chrome/FF/Safari but requires some tweaking on iOS and IE.

Just some practice with CSS transitions and using Javascript to display input value.

Passing the input element as a parameter to Tagify will transform it into a tags-component. Without any settings, the user will be allowed to create any tags they want, without a count limit. The input has a pre-defined value which Tagify creates two from tags. (Double-click on a tag to ...

Read More

this is a simple javascript quiz based on the Netflix seires Dark.

Registration form with pure CSS animations. Idea by Gal Shir.

custom styled input type number

Interaction test for form field inputs

OOP Datepicker [ES6]

A fun custom input concept. When the input is focused a trapped door opens and swallows the label.