Adding close buttons / 'x' clear text icons to Bootstrap5 Form Floating and Form Control input fields

Question

With Bootstrap 5 I'd like to add a close button to form floating and form control input fields so users can easily clear text on mobile, but it's not working as expected. I'm after a simple 'x' on the right end that'll show after text input, as shown in the search field in this example.

Minimal reproduction of examples from docs with the close button I expected to work inserted:

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
</div>
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</html>

What am I doing wrong?

I might be doing something stupid, but I can't find any examples on this for Bootstrap 5, so please forgive the dumb question.

I guess you might need to add that manually. I don't came across any official docs from bootstrap providing that functionality. — Abin Thaha, Aug 27 '21 at 05:50

score 2 · Answer 1 · edited Mar 10 '23 at 09:31

2

"I'm after a simple 'x' on the right end that'll show after text input, as shown in the search field in this example."

The 'X' in that example is simply a search type input...

<div class="form-floating mb-3">
  <input type="search" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

Or, use an input group as explained in this similar question

       <div>
            <label for="exampleFormControlInput2" class="form-label">Email address</label>
            <div class="input-group">
                <input class="form-control border-end-0 border" type="email" placeholder="name@example.com" id="exampleFormControlInput2">
                <span class="input-group-append">
                    <button class="btn btn-white border-start-0 border" type="button">
                        <i class="bi bi-search"></i>
                    </button>
                </span>
            </div>
       </div>

Codeply

edited Mar 10 '23 at 09:31

robsch

9,358
9
63
104

answered Aug 27 '21 at 09:40

Carol Skelly

351,302
90
710
624

This code doesn't seem to show "x" nor can I find `type="search"` anywhere in the docs. Could you please elaborate? – for_all_intensive_purposes Aug 27 '21 at 10:08
Yes it does show the X when you enter text in the input. It's the standard [HTML5 search input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search).. it has nothing to do with Bootstrap – Carol Skelly Aug 27 '21 at 10:18
2

Chrome adds the x, other browsers don't. How can we enforce the x when using Bootstrap? – for_all_intensive_purposes Aug 27 '21 at 10:39

score 0 · Accepted Answer · answered Sep 28 '22 at 13:09

<div class="input-group position-relative d-inline-flex align-items-center">
            <input class="form-control " formControlName="textInput" type="text" value="">
            <i class="bi bi-search position-absolute" 
            style="
              right: 10px;
              cursor: pointer;
              z-index: 100;">
            </i>
</div>

https://codesandbox.io/s/bootstrap-5-playground-forked-z65ldi?file=/index.html

Adding close buttons / 'x' clear text icons to Bootstrap5 Form Floating and Form Control input fields

2 Answers2