OTP Input
A one-time code field: one real input drawn as cells. Digits rise into place, paste and SMS autofill just work, and the cells turn to ink once complete.
View codeThe library
Forms
15 form controls in plain HTML, CSS and JS. Each one keeps a real native input underneath, so the form submits like it's 2004.
Password
A password field with an eye that crosses itself out, a meter that fills as it gets stronger, a verdict that rolls and rules that tick themselves off.
View code
Text Field
A text field whose label folds up as you type. A button clears it, a check draws itself once it is valid, and the hint gives way to the error.
View code
Color Picker
A real colour input with a proper panel: saturation square, hue slider, hex field, presets, eyedropper and copy. Pick a preset and the handles glide to it.
View code
Date Picker
A real date input with a calendar: months slide the way you go, the month name rolls, and the ink mark travels to the day you pick. Full keyboard.
View code
File Upload
A drop zone over a real file input: the border marches when files hover, each file gets a row with a thumbnail and a rolling progress, too-big files say so.
View code
Multi Select
A real multiple select as a field of tags: type to filter, pick to add a tag. Removed tags shrink away while the others glide into their place.
View code
Range Slider
Real range inputs on a drawn track: a value bubble pops out of the handle, ticks darken as the fill passes, and two handles push each other instead of crossing.
View code
Search Autocomplete
A search field over a real datalist: suggestions unroll under it, grouped, with the letters you typed underlined. "/" jumps in, arrows and Enter drive.
View code
Star Rating
Real radio buttons drawn as stars: they light up one after the other under the pointer, the word rolls from Meh to Shipped it, and a static score fills in view.
View code
Switch
A real checkbox redrawn as a switch: the ink fills the track behind the thumb, the thumb stretches while pressed and springs into place. Labels, toolbars too.
View code
Textarea
A textarea whose label folds up, whose height eases to fit the text, and whose ring fills as you near the limit, with the characters left in the last fifth.
View code
Checkbox
Real checkboxes, redrawn: ink grows from the centre and the tick draws itself. A select-all box shows a dash when only some are checked. Cards too.
View code
Radio
Real radio buttons with one dot for the whole group: pick another option and the dot travels to it, stretching on the way like a drop of ink.
View code
Select
A real select, dressed up: the list unrolls from the field, a highlight slides between options and the value rolls to your choice. A pill for toolbars too.
View codeNothing here, but hey, clean page.
Try another word, or one of these:
Missing a component? Request it