SearchBar

Molecule

role="searchbox" with search icon and clear button. Works in controlled and uncontrolled modes.

Preview

Code

<%- include('modules/ui/SearchBar', { placeholder: 'Search..' }) %>

Preview

Code

<%- include('modules/ui/SearchBar', { value: 'Button' }) %>

Preview

Code

<%- include('modules/ui/SearchBar', { size: 'sm', placeholder: 'Search…' }) %>

Preview

Code

<%- include('modules/ui/SearchBar', { placeholder: 'Search is disabled', disabled: true }) %>

<%
  var _id          = locals.id          || 'search';
  var _placeholder = locals.placeholder || 'Search…';
  var _val         = (locals.value !== undefined && locals.value !== null) ? String(locals.value) : '';
%>

  
    
  
  
  <% if (_val) { %>
    
  <% } %>

SearchBar

Default

With value (clear button)

Small size

Disabled