Searchbar
Search input with icon, clear button, iOS cancel animation, results dropdown, and recent searches.
Basic Searchbar
Preview
<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 With Cancel & Results
Preview
Button Component
Primary, outline, and glass variants
Button Group
Group of related buttons
<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 Variants
Preview
<!-- 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 | Class | Description |
|---|---|
.searchbar | Outer wrapper |
.searchbar-container | Input container |
.searchbar-icon | Search icon |
.searchbar-input | Text input |
.searchbar-clear | Clear button (X) |
.searchbar-cancel | Cancel button (iOS) |
.searchbar-focused | Focused state |
.searchbar-has-value | Has text (shows clear) |
.searchbar-results | Results dropdown |
.searchbar-result | Result item |
.searchbar-highlight | Match highlight |
.searchbar-no-results | No results message |
.searchbar-recent | Recent searches section |
.searchbar-rounded | Rounded variant |
.searchbar-outline | Outline variant |
.searchbar-filled | Filled variant |
.searchbar-sm | Small size |
.searchbar-lg | Large size |
.searchbar-disabled | Disabled state |
.searchbar.glass | Glass variant |