Easily create a nice looking search.
The Search component consists of a search form and the search input itself.
| Class/Attribute | Description |
|---|---|
.uk-search | Add this class to a container element to define the Search component. |
.uk-search-input | Add this class to an <input> element to create the search field. |
<form class="uk-search" aria-label="Search">
<input class="uk-search-input" type="search" placeholder="" aria-label="" />
</form>
By default, the search has no additional styling. In this example we are using the .uk-search-default modifier.
<form class="uk-search uk-search-default">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>To create a search icon, add the uk-search-icon attribute to a <span> element. To change the alignment, add the .uk-search-icon-flip class.
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input class="uk-search-input" type="search" placeholder="" aria-label="" />
</form>
<form class="uk-search uk-search-default">
<input class="uk-search-input" type="search" placeholder="" aria-label="" />
<span class="uk-search-icon-flip" uk-search-icon></span>
</form>
<div class="uk-margin">
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>
</div>
<div class="uk-margin">
<form class="uk-search uk-search-default">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
<span class="uk-search-icon-flip" uk-search-icon></span>
</form>
</div>To enable an action, use an <a> or <button> element to create the icon.
<form class="uk-search uk-search-default">
<button uk-search-icon></button>
<input class="uk-search-input" type="search" placeholder="" aria-label="" />
</form>
<form class="uk-search uk-search-default">
<input class="uk-search-input" type="search" placeholder="" aria-label="" />
<button class="uk-search-icon-flip" uk-search-icon></button>
</form>
<div class="uk-margin">
<form class="uk-search uk-search-default">
<button uk-search-icon></button>
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>
</div>
<div class="uk-margin">
<form class="uk-search uk-search-default">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="uk-search-icon-flip" uk-search-icon></button>
</form>
</div>To apply the default search styling, add the .uk-search-default class.
<form class="uk-search uk-search-default">…</form>
<form class="uk-search uk-search-default">
<span uk-search-icon></span>
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>To apply a dedicated search style when used in a navbar from the Navbar component, add the .uk-search-navbar class.
<form class="uk-search uk-search-navbar">…</form>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<div class="uk-navbar-item">
<form class="uk-search uk-search-navbar">
<span uk-search-icon></span>
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>
</div>
</div>
</nav>To increase the size of the search, for example when using the search in a fullscreen modal, add the .uk-search-large class.
<form class="uk-search uk-search-large">…</form>
<form class="uk-search uk-search-large">
<span uk-search-icon></span>
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
/>
</form>To apply a hover state to the search icon when using an <a> or <button> element, add the .uk-search-toggle class. To create the search icon itself, add the uk-search-icon attribute.
<a class="uk-search-toggle" href="" uk-search-icon></a>
The search icon can be used as a toggle to open the search inside a navbar – as an overlay, drop or dropdown – or outside in a modal. Just add the .uk-navbar-toggle class to the icon.
<div class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" uk-search-icon uk-toggle href=""></a>
</div>
</div>
<nav class="uk-margin uk-navbar-container" uk-navbar>
<div class="nav-overlay uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="nav-overlay uk-navbar-right">
<a
class="uk-navbar-toggle"
uk-search-icon
uk-toggle="target: .nav-overlay; animation: uk-animation-fade"
href="#"
></a>
</div>
<div class="nav-overlay uk-navbar-left uk-flex-1" hidden>
<div class="uk-navbar-item uk-width-expand">
<form class="uk-width-1-1 uk-search uk-search-navbar">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
autofocus
/>
</form>
</div>
<a
class="uk-navbar-toggle"
uk-close
uk-toggle="target: .nav-overlay; animation: uk-animation-fade"
href="#"
></a>
</div>
</nav><nav class="uk-margin uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<div>
<a class="uk-navbar-toggle" href uk-search-icon></a>
<div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0">
<form class="uk-width-1-1 uk-search uk-search-navbar">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
autofocus
/>
</form>
</div>
</div>
</div>
</nav><nav class="uk-margin uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<div>
<a class="uk-navbar-toggle" href uk-search-icon></a>
<div
class="uk-navbar-dropdown"
uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false"
>
<div class="uk-flex-middle uk-grid-small uk-padding-small" uk-grid>
<div class="uk-width-expand">
<form class="uk-width-1-1 uk-search uk-search-navbar">
<input
class="uk-search-input"
type="search"
placeholder="Search"
aria-label="Search"
autofocus
/>
</form>
</div>
<div class="uk-width-auto">
<a class="uk-drop-close" href="#" uk-close></a>
</div>
</div>
</div>
</div>
</div>
</nav><nav class="uk-margin uk-navbar uk-navbar-container">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">Logo</a>
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
</div>
</nav>
<div id="modal-full" class="uk-modal uk-modal-full" uk-modal>
<div
class="uk-flex uk-flex-center uk-flex-middle uk-modal-dialog"
uk-height-viewport
>
<button class="uk-modal-close-full" type="button" uk-close></button>
<form class="uk-search uk-search-large">
<input
class="uk-search-input uk-text-center"
type="search"
placeholder="Search"
aria-label="Search"
autofocus
/>
</form>
</div>
</div>Set the appropriate WAI-ARIA roles, states and properties to the Search component.
<label> element is associated with the search control, set the aria-label property to the search <input> element to describe its meaning.<input class="uk-search-input" type="search" aria-label="…" />
The Search component uses the following translation strings. Learn more about translating components.
| Key | Default | Description |
|---|---|---|
toggle | Open Search | aria-label attribute for toggle button. |
submit | Submit Search | aria-label attribute for submit button. |