Search

<input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).

<search> by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Because search is a form of navigation, we’ve placed it in the navigation organism (which itself is part of the header organism).

On smaller screens and mobile devices the search form is hidden until the user taps the hamburger icon to reveal the navigation. On screens wider than 48rem, the navigation is fully exposed, and we use a trigger <button> to reveal the search form.

Note that as of Version 2.2, the search functions should be keyboard accessible.

html

<button class="search-toggle" aria-expanded="false">
  <svg class="search-toggle-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9zm0 16c3.867 0 7-3.133 7-7 0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7zm8.485.071l2.829 2.828-1.415 1.415-2.828-2.829 1.414-1.414z"/></svg>            
  <svg class="search-toggle-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<form class="search" role="search" aria-hidden="true">
  <fieldset>
    <input type="search" name="q" id="search-input" placeholder="Search" aria-label="Search site content">
    <label for="search-input">Search</label>
  </fieldset>
  <button type="submit">Search</button>
</form>

script

$('button.search-toggle svg.search-toggle-open').click(function() {
  $('nav .search').addClass('open').attr('aria-hidden',false);
  $('button.search-toggle').addClass('open').attr('aria-expanded',true);
});
$('button.search-toggle svg.search-toggle-close').click(function() {
  $('nav .search').removeClass('open').attr('aria-hidden',true);
  $('button.search-toggle').removeClass('open').attr('aria-expanded',false);
});