react input placeholder attribute examples

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 components 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 to 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 reactJS

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

placeholder CSS pseudo-class enables to change of 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 the 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