Adding a clear button to a Bootstrap Input element lets users clear text with a single click instead of clicking and tapping the delete key repeatedly. This is a much nicer experience.
I created two design examples of how to add a clear button to the Bootstrap Input (also known as FormControl in react-bootstrap):
![Bootstrap Input (FormControl) with Clear Button](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/06/image-23.png?resize=402%2C91&ssl=1)
We’ll examine the code for each and also explore the DOM to get a better understanding of how Bootstrap renders components.
There is a Code Sandbox link with a live demo in the Resources section. Here are additional useful resources:
- The Essential Guide to Bootstrap Accordion Icons
- The Ultimate Guide To Aligning Bootstrap Buttons
- The Ultimate Guide To Bootstrap Padding
Clear Bootstrap FormControl Input With InputGroup Button
The first option is to render a button next to the input and clear the input when the button is clicked.
In the code below we see that a Bootstrap InputGroup component wraps a FormControl (which renders as an input element) and Button. I used react and react-bootstrap because I wanted to use state values to clear the input value. This could also be done with vanilla bootstrap and jquery but it would take quite a bit more code.
const [value, setValue] = React.useState("");
const handleClick = (val) => {
setValue("");
};
const handleChange = (event) => {
setValue(event.target.value);
};
//JSX
<InputGroup className="mb-3">
<FormControl
id="myinput"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
type="text"
onChange={handleChange}
value={value}
/>
<Button onClick={handleClick}>Clear</Button>
</InputGroup>
The InputGroup causes the FormControl and Button to have complimentary styling. For example, notice how the corners of the button next to the input do not have (rounding) border radius.
![Bootstrap FormControl is an Input](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/06/image-24.png?resize=662%2C201&ssl=1)
This clear button example is simple and plays well with how Bootstrap intended InputGroups to be used. I recommend it as a clean approach.
Clear Bootstrap FormControl Input With Internal Button
The second option is to render a button HTML element inside the FormControl input. This can be done by absolute
positioning the button.
This example depends heavily on CSS. Take a look at the inner-btn
class below. Some of the code strips default HTML button styling, some of the code gives the button visual feedback for the user.
.inner-btn {
position: absolute;
width: 10px;
font-weight: 550;
border: none;
background-color: transparent;
line-height: 35px;
left: calc(100% - 30px);
z-index: 99999;
}
.inner-btn:hover {
color: blue;
}
//Use the state value and handlers from above
//JSX
<InputGroup className="mb-3">
<FormControl
id="myinput"
placeholder="Username"
type="text"
onChange={handleChange}
value={value}
/>
<button className="inner-btn" onClick={handleClick}>
X
</button>
</InputGroup>
Two important stylings: first, I had to add a z-index so the X button did not disappear when the input had focus. Second, my left positioning is dependent on the size of the button.
Here’s the DOM for this example:
![Clear Bootstrap Input](https://i0.wp.com/smartdevpreneur.com/wp-content/uploads/2022/06/image-25.png?resize=669%2C212&ssl=1)
You could also use an icon such as Font Awesome or Bootstrap 5 icons instead of a button. This would require less styling code but I always find it a challenge to get Bootstrap icons imported in Code Sandbox.
Another option is to use :after
pseudo class. However, this does not work on HTML input elements with type="text"
. Strangely, it does work on other input types.