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:

• Angular Placeholder Example
• Input placeholder styles in html

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 :