Collection of free React input type text code examples: placeholders, float labels, etc. Update of December 2019 collection. 6 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Pass Strength Shield
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: gsap.js, react-dom.js
Links
About a code
React Native Phone Number Input
Performance oriented React native phone number input with typings and proper validation for any country.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS) / JS (TypeScript)
About a code
Animated Phone Input
A fancy phone number input with animated digits.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: react-dom.js
Links
About a code
React Native Places Input
Up to date working Google Places Input. Calling directly API not JS SDK.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
About a code
React Input Tags Using Hooks
A lightweight React component input tags.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
About a code
React Native Input Bar
Fully customizable, beautifully designed Input Bar for React Native.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: react-native-spinkit.js, react-native-androw.js, react-native-animated-spinkit.js, react-native-bounceable.js

Links
About a code
React Native Input Scroll View
Perfect text input scroll view.
Links
About a code
React Native Text Input Mask
Text input mask for React Native, Android and iOS.

Links
About a code
React Native Masked Text
This is a simple masked text (normal text and input text) component for React-Native.

Links
About a code
React Number Format
React component to format number in an input or as a text.
Links
About a code
React Phone Number Input
International phone number input
for React.
Links
About a code
React Native Text Input Effects
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Links
About a code
React Input Mask
Input masking component for React. Made with attention to UX.

Links
About a code
Text Mask
Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything.
Links
About a code
React Native Floating Label Text Input
This component will render an iOS styled text field with floating label animation. When there is no value, the placeholder will be centered. Once there is a value, the value will slide down and the label will fade in and slide up.
Links
About a code
React Input Autosize
Auto-resizing input field for React.