# 14 React Input Components for Tailwind CSS

> Form inputs beyond the basics: floating labels, OTP boxes with paste support, tag chips, password reveal with strength, number steppers, credit card and currency formatting, phone with country codes and @mention autocomplete.

3 of 14 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Input Credit Card](https://pixelpapa.com/components/inputs/input-credit-card.md) (Pro): A payment form with a live card preview: digits group in fours, a highlight glides to the part you are editing, and the card flips over for the security code.
- [Input Currency Format](https://pixelpapa.com/components/inputs/input-currency-format.md) (Pro): A large amount field that groups thousands as you type without losing the caret, pads cents on blur, and grows to hug its digits.
- [Input Floating Label](https://pixelpapa.com/components/inputs/input-floating-label.md): Text fields whose label rests as a placeholder, then springs up into a small caption on focus or when filled; inset and underline variants.
- [Input Inline Edit](https://pixelpapa.com/components/inputs/input-inline-edit.md): Text that turns into a field in place with no layout shift; Enter or blur saves with a brief tick, Escape puts the old value back.
- [Input Mention Autocomplete](https://pixelpapa.com/components/inputs/input-mention-autocomplete.md) (Pro): A comment box that opens a people list when you type @, filters as you go, inserts the handle with Enter or Tab and tints finished mentions inline.
- [Input Number Stepper](https://pixelpapa.com/components/inputs/input-number-stepper.md) (Pro): A spinbutton whose digits roll up or down like an odometer; hold a button to repeat with acceleration, or use the arrow keys.
- [Input OTP Boxes](https://pixelpapa.com/components/inputs/input-otp-boxes.md) (Pro): One-time-code boxes that auto-advance, accept a pasted code, step back on Backspace, pop each digit in and shake or hop on error or success.
- [Input Password Reveal Strength](https://pixelpapa.com/components/inputs/input-password-reveal-strength.md) (Pro): A password field with a morphing show/hide eye, a four-segment strength meter that fills with springs, and a checklist that ticks off rules as you type.
- [Input Phone Country](https://pixelpapa.com/components/inputs/input-phone-country.md) (Pro): A phone field with a flag and dial-code picker; choosing a country rolls the flag over and re-masks the number, and the list is fully keyboard driven with typeahead.
- [Input Search Expand](https://pixelpapa.com/components/inputs/input-search-expand.md) (Pro): A round search icon that springs open into a full field, shows a ⌘K hint while empty, and collapses again on Escape or blur.
- [Input Tag Chips](https://pixelpapa.com/components/inputs/input-tag-chips.md) (Pro): A tag field where chips spring in, reflow with layout animation when one is removed, and a duplicate makes the existing chip pulse instead of adding twice.
- [Input Textarea Autogrow Counter](https://pixelpapa.com/components/inputs/input-textarea-autogrow-counter.md) (Pro): A textarea that eases taller as you write, with a progress ring that fills toward the limit, turns amber near it and counts the overflow in red.
- [Input URL Prefix Copy](https://pixelpapa.com/components/inputs/input-url-prefix-copy.md): A URL field with a fixed prefix segment that strips pasted protocols, plus a copy button that morphs to a tick while a highlight sweeps the field.
- [Input With Validation States](https://pixelpapa.com/components/inputs/input-with-validation-states.md) (Pro): A field that debounces a sync or async validator and moves through checking, valid and invalid states with a morphing status icon and a sliding message.