Input Components
Free React input components: file upload, date and slot pickers, wheel picker, signature pad, card field, seat map and sliders, built with Tailwind CSS.
Form inputs that go beyond the text field: uploading files with progress, picking dates, time slots and seats, entering card details, signing, and choosing values on dials, wheels and sliders. Each one is a React component built with Tailwind CSS.
- IN-01File UploadUpdatedA multi-file upload queue with per-file progress, retry and cancel.
- IN-02Avatar PickerUpdatedGenerated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
- IN-03Team SelectorUpdatedSeat picker with a scrubbable number, generated avatars and an optional rolling price line.
- IN-04LoaderAnimated loading indicator with rotating gradient rings, size variants and customizable title text. Built with React and Tailwind CSS.
- IN-05Detent DialNewRotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.
- IN-06Wheel PickerNewiOS-style 3D drum picker with flick momentum, built with React and Motion.
- IN-07Liquid SliderNewA vertical slider you fill like a glass, with a sloshing surface and rising bubbles.
- IN-08Signature PadNewA signature field with a sprung pen tip, speed-weighted ink and SVG output.
- IN-09Time Zone PlannerNewFind a meeting time across time zones. Turn the meeting round a 24-hour dial where each ring is someone's day.
- IN-10Amount PadNewA keypad for sending money. Digits spring into place, commas slide them along, and the amount shrinks to fit as it grows.
- IN-11Seat MapNewPick seats for a show. Drag along a row to take several, and it points out any single seat you'd leave stranded.
- IN-12Card FieldNewA one-row card input for checkout. The number groups the way the brand prints it, then slides to its last four to make room for expiry and CVC.
- IN-13Stay PickerNewA date range picker for booking stays. Every night shows its price, sold-out nights are hatched, and your stay is one pill that wraps across weeks.
- IN-14Slot PickerNewBook a meeting on a day rail. Drag a meeting into a free gap; it hops over existing bookings, resizes in place and shows the host's local time.
- IN-15Tip SelectorNewA tip picker for checkout, set on a tape you drag and flick. The ticks you pass fill in, the amounts roll, and Round up makes the total a whole amount.
- IN-16Location PickerNewSet a pickup point the way ride apps do. Drag the map under a fixed pin; it lifts off its shadow, glides onto the nearest curb, drops, and the street rolls in.
