Collection
Post cover
Created 4 month back

Top 16 React Input Text

Collection of free React input type text code examples: placeholders, float labels, etc.

React Input Tags Using Hooks

Author: Haikel Fazzani

Links: demo and code

A lightweight React component input tags.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Animated Phone Input

Author: Cory L

Links: demo and code, youtube

Made with: HTML / CSS (SCSS) / JS (TypeScript)

A fancy phone number input with animated digits.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: react-dom.js

React Native Floating Label Text Input

Author: Eyal Eizenberg

Links: github page

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.

Post cover

React Native Input Scroll View

Author: 白俊杰

Links: github page

Perfect text input scroll view.

React Native Text Input Effects

Author: Halil Bilir

Links: demo and code

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Input Autosize

Author: Jed Watson

Links: github page, demo page

Auto-resizing input field for React.

React Native Text Input Mask

Author: React Native Community

Links: github page

Text input mask for React Native, Android and iOS.

React Native Phone Number Input

Author: Anurag Garg

Links: demo and code

Performance oriented React native phone number input with typings and proper validation for any country.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

React Native Masked Text

Author: Ben-hur Santos Ott

Links: github page

This is a simple masked text (normal text and input text) component for React-Native.

Post cover

React Number Format

Author: Sudhanshu Yadav

Links: github page, codepen page

React component to format number in an input or as a text.

Pass Strength Shield

Author: Alex

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: gsap.js, react-dom.js

Post cover

React Input Mask

Author: Nikita Lobachev

Links: github page, demo page

Input masking component for React. Made with attention to UX.

React Native Input Bar

Author: Paraboly

Links: demo and code

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

React Native Places Input

Author: Kamil Thomas

Links: demo and code

Up to date working Google Places Input. Calling directly API not JS SDK.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Phone Number Input

Author: Nikolay

Links: github page, demo page

International phone number input for React.

Post cover

Text Mask

Author: Text Mask

Links: github page

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything.

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback