Is it possible to use React icons in placeholder attribute of input field i-e input text for example?

If yes can some one give me an example?

I do it like this but instead of Icon I got [object object] in placeholder

var  emailIcon = <FaEnvelopeO  size={10}  />;
<Field
 placeholder={emailIcon}
 name="email"
 type="text"
 ponent={this.renderField}
/>

Is it possible to use React icons in placeholder attribute of input field i-e input text for example?

If yes can some one give me an example?

I do it like this but instead of Icon I got [object object] in placeholder

var  emailIcon = <FaEnvelopeO  size={10}  />;
<Field
 placeholder={emailIcon}
 name="email"
 type="text"
 ponent={this.renderField}
/>

• javascript
• html
• reactjs
• redux
• placeholder

4 Answers 4

Nope, placeholders are meant to contain text only. Look at the definition below:

The placeholder attribute places text inside the input in a light gray color. The text remains whenever the input has no value.

You can however use hexcodes like below:

<input type="text" placeholder="&#xF002;" style="font-family:Arial, FontAwesome" />

Here is an example using a functional React ponent, with the React-Icons and Styled-Components libraries. The key is the absolute and relative positioning on the icon and the container. Hope this helps!

import React from "react";

// libaries
import { IoMdSearch } from 'react-icons/io';
import styled from 'styled-ponents';

const SearchBarView = () => {
  return (
    <Search>
      <IoMdSearch style={{marginLeft: "1rem", position: "absolute"}} color="#623CEA" size="1.5em" />
      <SearchBar 
        id="search-bar" 
        type="text"
        placeholder="Search">
      </SearchBar>
    </Search>
  )
}

const Search = styled.div`
  padding: .5rem;
  position: relative;
  display: flex;  
  align-items: center;
  width: 100%;
`

const SearchBar = styled.input`
  padding: 1rem 1rem 1rem 3.5rem;
  width: 100%;
`

export default SearchBarView;

You can directly paste