react input placeholder attribute examples

Placeholders are piece of text displayed in input controls on a form. This was introduced in Html5. Ideally, these can be used to have 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 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 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 parent component,

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

• name and placeholder are passed to textControl component as a props.

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

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

  name={name} 
  placeholder={placeholderString} 
  

Here is 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 placeholder is a non standard implementation

placeholder css pseudo class enables to change the styles of an displayed default text in input form control. It has different vendor implements that you need to declare it 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 adding font awesome icon inside a input form placeholder text.

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

npm install --save font-awesome

Next, include fontawesome 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 :