React-Bootstrap FormControl with Icon

Question

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>

Solution 1

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:

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"

Solution 2

It doesn't look like react-bootstrap supports font-awesome icons out of the box according to the docs. However, it appears you can cheat. It's possible to put a <FontAwesome> control inside the <FormControl.Feedback> react-bootstrap control and have it display the icon inside the text box.

I tested this using react-bootstrap version 0.31.0. I also used the react-fontawesome NPM package (here) to actually add the icon. You would do something like the following:

<ControlLabel>Email address</ControlLabel>
<FormControl
    type="text"
    value={this.state.value}
    placeholder="Your email"
    onChange={this.handleChange}
    className="login-input"
/>
<FormControl.Feedback>
    <span style={{ top: '5px' }}>
        <FontAwesome name="check" spin key="icon" />
    </span>
</FormControl.Feedback>

That addition of a <span> and inline style were needed to properly center the icon. I suspect that was necessary because I am breaking some rules for how the <FormControl.Feedback> renders icons. That wasn't needed when I used the <Glyphicon> instead. Unfortunately, there is no built in spin/rotate feature with the <Glyphicon>.

A bit of a hack, so use with caution.

Solution 3

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>

Comments

[Royal]

The question is how to do it with react-bootstrap. Not which framework is able to add an icon..