CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Leo Messi
Leo Messi

Reputation: 6176

Add icon inside text input in Material UI and React

I have a text input of this form:

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
  </FormControl>

It works fine functionally but I want to add a search icon on the left side of the input, to look like this:

enter image description here

I don't know where to add that code snippet, I tried inside input but it throws errors so I put it after but doesn't appear any icon on the screen.

  <FormControl className='searchOrder'>
    <input
      className='form-control'
      type='text'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
    />
    <span>
      <i class='fas fa-search'></i>
    </span>
  </FormControl>

Any ideas how to solve this?

If it's relevant, searchOrder css class:

.searchOrder {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 20%;
  max-width: 250px;
  height: 20%;
  left: 0px;
  top: 0px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
  border-radius: 4px;
}

Update:

I also tried with InputAdornment but still the icon does not appear.

  <FormControl className='searchOrder'>
    <InputLabel htmlFor='input-with-icon-adornment'></InputLabel>
    <input
      className='form-control'
      type='text'
      id='input-with-icon-adornment'
      placeholder='Search order'
      aria-label='Search'
      value={this.number}
      input={<Input />}
      onChange={this.handleChangeOrderNumber}
      startAdornment={
        <InputAdornment position='start'>
          <SearchIcon />
        </InputAdornment>
      }
    />
  </FormControl>

Upvotes: 2

Views: 25362

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

just use material ui Input Component like this:

 <Input
        id="input-with-icon-adornment"
        startAdornment={
          <InputAdornment position="start">
            <SearchIcon />
          </InputAdornment>
        }
  />

read more about it here

Upvotes: 12

Related Questions