Search

Easily create a nice looking search.

Usage

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>

Search icon

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>

Clickable

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>

Default modifier

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>

Large modifier

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>

Toggle

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>

<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>

Overlay

Logo
- Active
- Item

<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>

Drop

Logo
- Active
- Item

<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>

Logo
- Active
- Item

<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>

Logo
- Active
- Item

<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>

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Search component.

If no <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="…" />

Internationalization

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.

On This Page
Usage
Search icon
Default modifier
Navbar modifier
Large modifier
Toggle
Search in navbar
Accessibility

Request Web Components

Franken UI is an independent project. Help support it and expand its free component library.

Reach out