SearchBar

Molecule

role="searchbox" + arama ikonu + temizle butonu. Controlled veya uncontrolled modda kullanılabilir.

Default

Preview

Code

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

With value (clear button)

Preview

Code

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

Small size

Preview

Code

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

Disabled

Preview

Code

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

Source modules/ui/SearchBar.ejs

<%
  var _id          = locals.id          || 'search-' + Math.random().toString(36).substr(2, 9);
  var _placeholder = locals.placeholder || 'Search…';
  var _val         = locals.value       || '';
  var _sz          = locals.size        || 'md';

  var sc = {
    sm: 'py-1.5 text-sm pl-8 pr-3',
    md: 'py-2 text-sm pl-9 pr-3',
    lg: 'py-3 text-base pl-10 pr-4',
  }[_sz] || 'py-2 text-sm pl-9 pr-3';

  var iconSc = { sm: 'left-2.5 text-xs', md: 'left-3 text-sm', lg: 'left-3.5 text-base' }[_sz] || 'left-3 text-sm';
%>

  
    
  
  name="<%= locals.name %>"<% } %>
    class="block w-full rounded-md border border-border bg-surface-base text-text-primary placeholder:text-text-disabled focus:outline-none focus:ring-2 focus:ring-border-focus hover:border-border-strong transition-colors <%= sc %> <%= _val ? 'pr-8' : '' %>"
  >
  <% if (_val) { %>
    
  <% } %>