React-Bootstrap FormControl with Icon

user_2263560 0
Viewed 27642

I am trying to add an icon to an input field using React Bootstrap and react-fa (font-awesome). Is there a prop I can set on the Form Control component? The code below I've inserted an icon but it's obviously above the input not inside.

<form>
    <FormGroup
        controlId="formBasicText"
        validationState={this.getValidationState()}
        className="login-form">
        <ControlLabel>Email address</ControlLabel>
        <Icon spin name="spinner" />
        <FormControl
            type="text"
            value={this.state.value}
            placeholder="Your email"
            onChange={this.handleChange}
            className="login-input" />
        <ControlLabel>Password</ControlLabel>
        <FormControl
            type="text"
            value={this.state.value}
            placeholder="Your password"
            onChange={this.handleChange}
            className="login-input" />
        <FormControl.Feedback />
    </FormGroup>
    <Button bsStyle="success btn-raised btn-block" bsSize="large" onClick={this.closeModal}>Let's Go</Button>
</form>
react-bootstrap reactjs css
4 Answers

There is a quick and easy "out of the box" solution to the problem. Just wrap your <Form.Control> in an <InputGroup> and add a <InputGroup.Prepend>, which will contain the icon you wish to include. The content of the <InputGroup.Prepend> is not restricted, it can be text, symbols, other components, etc.

Have in mind, the syntax has changed a bit since we're probably using different versions of react-bootstrap.

I am including an example of my code, which uses a react-fontawesome icon inside a text input field.

                 <Form.Row>
                    <Form.Group as={Col}>
                        <InputGroup>
                            <InputGroup.Prepend>
                                <InputGroup.Text>
                                    <FontAwesomeIcon icon="search" />
                                </InputGroup.Text>
                            </InputGroup.Prepend>
                            <Form.Control
                                type="text"
                                placeholder="Search here.."
                            />
                        </InputGroup>
                    </Form.Group>
                </Form.Row>

It looks like this: searchbar-example

An official example by react-bootstrap can be found here. Hope that helps! Cheers!

PS: libs used "react-bootstrap": "^1.0.0-beta.8" (bootstra 4.3) and "@fortawesome/react-fontawesome": "^0.1.4"

user_86145850

I use bootstrap only and package icons (react-icons)

<div className="input-group col-md-4">
                <input className="form-control py-2 border-right-0 border" type="search" defaultValue="search" id="example-search-input" />
                <span className="input-group-append">
                <div className="btn btn-outline-secondary border-left-0 border">
                <FaBeer/>
                </div>
                </span>
            </div>
user_119542950

Unfortunately, React Bootstrap doesn't have prop for icons for input component out of the box. Alternatively, React Semantic UI does have a prop icon for the input. See documentation here: https://react.semantic-ui.com/elements/input/

If you still want to use React Bootstrap, you can create a div element within the InputGroup, and style this element to position: absolute and use top and right css elements to make adjustments as needed. Here's the work around:

//Your JSX file

      <InputGroup>
        <FormControl
          type="text"
          placeholder="Search..."
          onChange={this.handleChange.bind(this)}
        />
        <div className="search-icon">
          <i class="fas fa-search" />
        </div>
      </InputGroup>

//CSS

.search-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 9999; /*this will keep the icon appearing all time, even when on input::focus*/
}
user_101514930
Related