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):
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.
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:
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.
