{

react input placeholder attribute examples


Placeholders are a piece of text displayed in input controls on a form. This was introduced in Html5. Ideally, these can be used to have a better user experience during form handling. Let’s declare place holder in Html5

<input type="text" placeholde="placeholder text">

Placeholder attributes can be defined for input form controls like text, text area, and select.

You can check my previous available post:

This tutorial covers the following examples with an explanation.

{{ }}

How to change placeholder text from react props dynamically.

You need to pass placeholder text from Parent to child component when you are designing reusable input components like text controls. In this example, placeholder text is passed from parent to child component via react props object.

Let’s define a child component called TextControl.js

import React, { Component } from 'react';

export default class TextControl extends Component {
    constructor(props) {
        super(props);
    };

    render() {
        const { name, placeholderString } = this.props.data;
        return <input type="text" name={name} placeholder={placeholderString} />
    }
}

In the parent component - InputForm.js uses TextControl component.

In the parent component,

  • Placeholder text and name are initialized in state object with input control name and placeholder text

  • name and placeholder are passed to the text control component as props.

  • In the TextControl component, read these values from the prop and assign these values in an input component.

  • This is how props values are updated to placeholder text dynamically

    name={name} 
    placeholder={placeholderString} 
    

Here is the complete component code

import React, { Component } from 'react';
import TextControl from './TextControl';

export default class InputForm extends Component {
    constructor() {
        super();
        this.state = {
            name: 'email',
            placeholder: 'Please enter email'
        };
    }

    render() {
        return <TextControl name={this.state.email} placeholderString={this.state.placeholder} />
    }
}

change input placeholder text color styles in react

Changing Placeholder color is not simple, as a placeholder is a non-standard implementation

placeholder CSS pseudo-class enables to change the styles of a displayed default text in input form control. It has different vendor implements that you need to declare separately.

Create a style.css file for styles

/* for Opera,webkit chrome browsers */
input::-webkit-input-placeholder { 
    color: red;
}
/*firefox 19+ versions*/
input::-moz-placeholder {
    color: red;
}
/*IE  versions*/
input::-ms-placeholder {
    color: red;
}
/*Latest modern browsers */

input::placeholder {
    color: red;
}
import React, { Component } from 'react';
import "../index.css"
export default class TextControl extends Component {
    constructor(props) {
        super(props);
    };

    render() {
        const { name, placeholderString } = this.props;
        return <input type="text" name={name} placeholder={placeholderString} />
    }
}

Adding font awesome icon to input placeholder in react

This example is to add a font awesome icon inside an input form placeholder text.

First, Install font-awesome dependency in an application using npm command

npm install --save font-awesome

Next, include font awesome CSS files into index.js or your component.

import '../node_modules/font-awesome/css/font-awesome.min.css';

Finally, In a component, Placeholder text add with fontawesome icon unicode inside placeholder text.

import React, { Component } from 'react';
import "../index.css"
export default class IconINput extends Component {
  
    render() {
        return <input type="text" placeholder="&#xF199; Username" />

    }
}

Add below font-family to style file index.css

input {
    font-family: FontAwesome;
}

Output : React fontawesome icon placeholder example

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React