Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Search
Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes.
Example #
Get started with the default example of a search input component including and icon and submit button.
<div class="position-relative search-bar">
<input type="search" class="form-control form-control-search" placeholder="Search for" />
<div class="position-absolute top-0 bottom-0 d-flex align-items-center px-3">
<i class="fa fa-search"></i>
</div>
<div class="position-absolute top-0 bottom-0 search-mic d-flex align-items-center px-3 gap-4">
<span class="search-avatar">
<img src="/assets/img/icon/s-avatar.svg" class="rounded-circle" alt="user avatar" />
</span>
<span>
<img src="/assets/img/icon/micro-phone.svg" alt="micro phone" />
</span>
</div>
</div>
RESULT
Search Disabled #
<div class="position-relative search-bar">
<input type="search" class="form-control form-control-search disabled" placeholder="Search for" />
<div class="position-absolute top-0 bottom-0 d-flex align-items-center px-3 disabled">
<i class="fa fa-search"></i>
</div>
<div class="position-absolute top-0 bottom-0 search-mic d-flex align-items-center px-3 gap-4">
<span class="search-avatar">
<img src="/assets/img/icon/s-avatar.svg" class="rounded-circle disabled" alt="user avatar" />
</span>
<span>
<img src="/assets/img/icon/micro-phone.svg" alt="micro phone" class="disabled" />
</span>
</div>
</div>
RESULT
