Search

The Search component provides a user interface for searching content within an application. It typically includes an input field, search button, and often features additional functionality like autocomplete, search suggestions, or filtering options.

Installation

The Search component is part of the Casoon UI Library.

# Installation of the entire library
npm install @casoon/ui-lib

Import

/* Import all UI components */
@import '@casoon/ui-lib/ui.css';

/* Or just the Search component */
@import '@casoon/ui-lib/ui/components/search.css';

Basic Usage

<div class="search">
  <input type="text" class="search__input" placeholder="Search...">
  <button class="search__button">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </button>
</div>

Variants

Sizes

The Search component is available in different sizes.

<div class="search search--sm">
  <input type="text" class="search__input" placeholder="Small search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

<div class="search">
  <input type="text" class="search__input" placeholder="Default search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

<div class="search search--lg">
  <input type="text" class="search__input" placeholder="Large search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

Styles

Different visual styles for the Search component.

<div class="search search--pill">
  <input type="text" class="search__input" placeholder="Pill search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

<div class="search search--outline">
  <input type="text" class="search__input" placeholder="Outline search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

<div class="search search--minimal">
  <input type="text" class="search__input" placeholder="Minimal search">
  <button class="search__button">
    <svg><!-- Search icon --></svg>
  </button>
</div>

Usage Examples

Search with Autocomplete

A search component with autocomplete dropdown.

<div class="search-container">
  <div class="search">
    <input type="text" class="search__input" placeholder="Search products...">
    <button class="search__button">
      <svg><!-- Search icon --></svg>
    </button>
  </div>
  <div class="search__autocomplete">
    <ul class="search__suggestions">
      <li class="search__suggestion">Product One</li>
      <li class="search__suggestion">Product Two</li>
      <li class="search__suggestion">Product Three</li>
    </ul>
  </div>
</div>

• Product One
• Product Two
• Product Three

Search with Filters

A search component with filtering options.

<div class="search-with-filters">
  <div class="search">
    <input type="text" class="search__input" placeholder="Search...">
    <div class="search__filter-dropdown">
      <select class="search__filter">
        <option value="all">All</option>
        <option value="products">Products</option>
        <option value="articles">Articles</option>
      </select>
    </div>
    <button class="search__button">
      <svg><!-- Search icon --></svg>
    </button>
  </div>
</div>

AllProductsArticles

Customization

The Search component can be customized using CSS variables:

:root {
  --search-height: 2.5rem;
  --search-border: 1px solid var(--color-neutral-200);
  --search-border-radius: var(--radius-m);
  --search-bg: var(--color-white);
  --search-focus-ring: 0 0 0 2px var(--color-primary-200);
  
  --search-input-padding: 0.5rem 0.75rem;
  --search-input-color: var(--color-neutral-900);
  --search-input-placeholder-color: var(--color-neutral-400);
  
  --search-button-bg: var(--color-primary-500);
  --search-button-hover-bg: var(--color-primary-600);
  --search-button-color: var(--color-white);
  --search-button-padding: 0.5rem 0.75rem;
  
  --search-dropdown-bg: var(--color-white);
  --search-dropdown-border: 1px solid var(--color-neutral-200);
  --search-dropdown-shadow: var(--shadow-m);
  --search-dropdown-item-hover-bg: var(--color-neutral-100);
}

Accessibility

• Use appropriate ARIA attributes like role="search" for search containers
• Ensure the search input has a proper label (visible or aria-label)
• Add keyboard support for navigating autocomplete suggestions
• Provide clear visual feedback for focus states
• Include appropriate text for screen readers when showing/hiding autocomplete results

Browser Compatibility

The Search component is compatible with all modern browsers.

Feature	Chrome	Firefox	Safari	Edge
Basic functionality	✅	✅	✅	✅
Flexbox layout	29+	28+	9+	16+
Custom properties	49+	31+	9.1+	15+