Input Search

Default

This component provides an enhanced search experience that aligns with modern UI patterns. It utilizes the .input-search wrapper class to manage the absolute positioning of the icons relative to the standard Bootstrap form control.

The HTML structure for this component must always follow the pattern of [Search Icon] -> [Input Field] -> [Clear Icon] within the .input-search wrapper.

<div class="input-search" style="max-width: 400px;">
  <i class="ri-search-line"></i>
  <input type="text" class="form-control" placeholder="Type here..">
  <i class="ri-close-line" role="button"></i>
</div>