Searchbar

<div class="searchbar searchbar-has-value">
  <div class="searchbar-container">
    <span class="searchbar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
    <input class="searchbar-input" type="search" placeholder="Search..." value="components" />
    <button class="searchbar-clear"><svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex items-center w-full p-2">
  <div class="flex items-center flex-1 px-3 bg-base-200 rounded-field" style="min-height:44px">
    <svg class="size-5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input class="flex-1 h-11 px-2 bg-transparent border-none outline-none" type="search" placeholder="Search..." />
    <button class="flex items-center justify-center size-5 rounded-full bg-base-content/40 text-white">
      <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </div>
</div>

Requires: tw.min.css

// Show clear button: add .searchbar-has-value when input has text
// Clear: input.value = ''; remove .searchbar-has-value
// Focus: add .searchbar-focused on container

<div class="searchbar searchbar-focused searchbar-has-value">
  <div class="searchbar-container">
    <span class="searchbar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
    <input class="searchbar-input" type="search" value="button" />
    <button class="searchbar-clear"><svg xmlns="http://www.w3.org/2000/svg" class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
  </div>
  <button class="searchbar-cancel">Cancel</button>
  <div class="searchbar-results">
    <div class="searchbar-result">
      <span class="searchbar-result-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
      <div class="searchbar-result-content">
        <div class="searchbar-result-title"><span class="searchbar-highlight">Button</span> Component</div>
        <div class="searchbar-result-subtitle">Primary, outline, and glass variants</div>
      </div>
    </div>
    <div class="searchbar-result">
      <span class="searchbar-result-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
      <div class="searchbar-result-content">
        <div class="searchbar-result-title"><span class="searchbar-highlight">Button</span> Group</div>
        <div class="searchbar-result-subtitle">Group of related buttons</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative flex items-center w-full p-2">
  <div class="flex items-center flex-1 px-3 bg-base-100 rounded-field" style="min-height:44px; box-shadow: 0 0 0 2px var(--color-primary);">
    <svg class="size-5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input class="flex-1 h-11 px-2 bg-transparent border-none outline-none" type="search" value="button" />
    <button class="flex items-center justify-center size-5 rounded-full bg-base-content/40 text-white">
      <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
  </div>
  <button class="px-3 text-base bg-transparent border-none cursor-pointer whitespace-nowrap text-primary">Cancel</button>
  <div class="absolute left-2 right-2 top-[calc(100%+4px)] bg-base-100 border border-base-300 rounded-field shadow-lg overflow-y-auto z-100 max-h-75">
    <div class="flex items-center px-4 py-3 cursor-pointer hover:bg-base-200">
      <span class="size-5 mr-3 text-base-content/60"><svg xmlns="http://www.w3.org/2000/svg" class="size-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
      <div class="flex-1 min-w-0">
        <div class="text-base text-base-content truncate"><mark class="bg-warning/30 rounded-sm">Button</mark> Component</div>
        <div class="text-sm text-base-content/60 mt-0.5 truncate">Primary, outline, and glass variants</div>
      </div>
    </div>
    <div class="flex items-center px-4 py-3 cursor-pointer hover:bg-base-200">
      <span class="size-5 mr-3 text-base-content/60"><svg xmlns="http://www.w3.org/2000/svg" class="size-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg></span>
      <div class="flex-1 min-w-0">
        <div class="text-base text-base-content truncate"><mark class="bg-warning/30 rounded-sm">Button</mark> Group</div>
        <div class="text-sm text-base-content/60 mt-0.5 truncate">Group of related buttons</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Cancel: blur input, clear value, remove .searchbar-focused
// Result click: handle selection, close results

<!-- Rounded -->
<div class="searchbar searchbar-rounded mb-4">
  <div class="searchbar-container">
    <span class="searchbar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
    <input class="searchbar-input" type="search" placeholder="Rounded search..." />
  </div>
</div>

<!-- Outline -->
<div class="searchbar searchbar-outline mb-4">
  <div class="searchbar-container">
    <span class="searchbar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
    <input class="searchbar-input" type="search" placeholder="Outline search..." />
  </div>
</div>

<!-- Small -->
<div class="searchbar searchbar-sm">
  <div class="searchbar-container">
    <span class="searchbar-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
    <input class="searchbar-input" type="search" placeholder="Small search..." />
  </div>
</div>

Requires: ux.min.css

<!-- Rounded -->
<div class="relative flex items-center w-full p-2 mb-4">
  <div class="flex items-center flex-1 px-3 bg-base-200" style="min-height:44px; border-radius:18px;">
    <svg class="size-5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input class="flex-1 h-11 px-2 bg-transparent border-none outline-none" type="search" placeholder="Rounded search..." />
  </div>
</div>

<!-- Outline -->
<div class="relative flex items-center w-full p-2 mb-4">
  <div class="flex items-center flex-1 px-3 bg-transparent border border-base-300 rounded-field" style="min-height:44px;">
    <svg class="size-5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input class="flex-1 h-11 px-2 bg-transparent border-none outline-none" type="search" placeholder="Outline search..." />
  </div>
</div>

<!-- Small -->
<div class="relative flex items-center w-full p-2">
  <div class="flex items-center flex-1 px-3 bg-base-200 rounded-field" style="min-height:32px;">
    <svg class="size-5 text-base-content/40 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input class="flex-1 h-8 px-2 text-sm bg-transparent border-none outline-none" type="search" placeholder="Small search..." />
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for static variants