Search Bar

A drop-in search box with a toggle between your native search and Nobi’s AI search. It provides multiple display modes, customizable styling, and merchant-friendly CSS classes.

When to use

Home, site header, high-intent landing pages.

Basic Usage


<nobi-search-bar
  default-mode="site"
  size="regular"
  cta-variant="auto"
  show-mode-toggle="true"
  show-hint-row="true">
</nobi-search-bar>

Configuration Options

Core Attributes

Attribute	Type	Default	Description
`default-mode`	string	"site"	Initial search mode: "site" or "ai"
`size`	string	"regular"	Component size: "regular" or "compact"
`cta-variant`	string	"auto"	Button style: "auto", "icon", or "button"
`placeholder`	string	-	The placeholder to use in the search bar
`show-mode-toggle`	`"true"` \| `"false"`	`true`	Whether to show the mode toggle
`show-hint-row`	`"true"` \| `"false"`	`true`	Whether to show hint row with shortcuts
`site-search-path`	string	"/search"	Path for site search navigation
`hide-quick-add`	`"true"` \| `"false"`	-	When set to true, the quick add overlay will not show
`enable-typeahead`	`"true"` \| `"false"`	`true`	Boolean attribute to enable/disable typeahead suggestions
`use-search-mode-at-launch`	`"true"` \| `"false"`	-	When true, Nobi will use the first message to run a fast, semantic search, rather than trying a slower (but possibly more accurate) conversational, reasoned response

“Search Mode”

When set to true, the attribute use-search-mode-at-launch will instruct Nobi to infer whether the user’s first message is more of a search query than a conversational message. If it is, Nobi will not use an LLM on the first message, and will instead perform a quick semantic search. This allows shoppers to get a fast and mostly accurate list of products that match their search request. That said, subsequent messages will be process by an LLM.

Icon Trigger Mode

Attribute	Type	Default	Description
`show-icon`	boolean	false	Enable icon trigger mode
`icon-url`	string	null	Custom icon URL (optional)
`start-collapsed`	boolean	false	Start collapsed in icon mode

Context Detection Attributes

Attribute	Type	Default	Description
`auto-detect-page-context`	boolean	`false`	Enables automatic detection of page context from URL
`collection-handle`	string	-	Explicitly sets the collection handle for context, used to help Nobi limit suggestions to only that collection
`search-query`	string	-	Explicitly sets the search query for context
`collection-title`	string	-	The title of the current collection that the shopper is looking at, used to help Nobi limit suggestions to only that collection
`collection-id`	string	-	The native ID of the current collection that the shopper is looking at, used to help Nobi limit suggestions to only that collection
`hide-typeahead-on-context-pages`	`"true"` \| `"false"`	`true`	Specifies whether typeahead options will be hidden on collections or search result pages.

Attribute Details & Behavior

Context detection attributes

Description

The search bar can help your shoppers filter through a large list of results on your collections and search results pages by providing you with context-aware filtering capabilities. These features help change the placeholder of the input bar to be more relevant to whatever your shoppers are looking for, and also provide better filtering capabilities and targeted followup suggestions based on the context of your page.

Use cases

Use this when you are on a collections or search results page and you’d like to make it easier for your customers to more easily filter and home in on the right product.

Features

Automatic hint row hiding: When context is detected, the hint row is automatically hidden to provide a cleaner, more focused
experience

Future context utilization: Context information will be used for personalized AI suggestions and contextual search
improvements

Dynamic placeholders: Used to create more enticing prompts to the shopper to help them find the exact items they want when on a collections page or search results page

Note: When any context is detected, show-hint-row defaults to false unless explicitly overridden.

Use search mode at launch

Description

Use for near-instantaneous search results using only semantic search (no LLMs or conversational reasoning for filtering)

Use cases

Use when implementing Nobi as a pure search engine

Behavior

use-search-mode-at-launch="true": Forces the chat to launch in search mode, which will use the shopper’s first message for a quick semantic search (usually useful when using Nobi as a search engine)

Not specified or invalid value: Uses the existing automatic logic based on context and user query (initial messages that “look like” searches will trigger search mode, and other, usually longer, messages will invoke a conversational response)

Examples

Dual Mode Search Bar


<nobi-search-bar
  default-mode="site"
  size="regular"
  cta-variant="auto">
</nobi-search-bar>

Compact Bar


<nobi-search-bar
  size="compact"
  cta-variant="icon"
  show-hint-row="false">
</nobi-search-bar>

Icon Triggers the Search Bar


<nobi-search-bar
  show-icon="true"
  start-collapsed="true"
  size="compact">
</nobi-search-bar>

Note: On mobile, when starting with the search bar closed, clicking on the trigger icon will reveal the search bar in a modal and the hint row will be automatically hidden, as shown below.

AI-First Mode


<nobi-search-bar
  default-mode="ai"
  cta-variant="button"
  site-search-path="/pages/search">
</nobi-search-bar>

Context-Aware Implementation (Collections/Search Pages)


<!-- These will generate a dynamic placeholder relevant to the search query and will also trigger using search mode if the shopper sends a message -->
<nobi-search-bar
  auto-detect-page-context="true"
  search-query="sale items">
</nobi-search-bar>

<nobi-search-bar
  collection-handle="mens-clothing"
  show-hint-row="true">
</nobi-search-bar>

Automatic Detection

When auto-detect-page-context="true" is set, the search bar automatically detects:

Collection Pages: URLs matching /collections/[handle]

Examples: /collections/mens-shirts, /collections/summer-sale

Search Results Pages: URLs with search parameters

Supported parameters: q, query, search, term

Examples: /search?q=shoes, /products?query=dresses

Priority Rules

Explicit attributes always override auto-detected values

Auto-detection fills in missing explicit attributes

Hint row is automatically hidden when context exists (unless show-hint-row="true")

Auto-detect with explicit override:


<nobi-search-bar
  auto-detect-page-context="true">
</nobi-search-bar>

Typeahead Suggestion Panel (Autocomplete)

What Is It

When the AI Search Bar is in suggestion mode, as the user types, a drop-down panel appears offering query or product suggestions. This helps speed input, reduce errors, and guide users toward relevant options.

Behavior & UI Flow

After a brief debounce (e.g. 300ms) of user input, the component fetches suggestions.

If results arrive, it displays them in a list beneath the input.

If no matches, it shows a “No suggestions found” message.

If the input is cleared or panel is dismissed (Escape, click-away, or after selection), the panel closes.

As users navigate via keyboard (ArrowUp / ArrowDown) or mouse, the highlighted item updates.

Pressing Enter or clicking a suggestion selects it (triggering a search or filling the input).

The panel does not trap focus — keyboard navigation stays on the input via aria-activedescendant.

Accessibility & ARIA Wiring

Below is how the typeahead panel is made accessible:

Feature	Implementation
Input ARIA attributes	`role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`, `aria-activedescendant`
Suggestion panel	`role="listbox"` container, children with `role="option"` and `aria-selected="true"` on active item
Loading state	Input uses `aria-busy="true"`; inside panel a child with `role="status"` and `aria-live="polite"` announces “Loading…”
No results	Panel stays `listbox`; child `role="status"` announces “No suggestions found”
Keyboard support	ArrowUp / ArrowDown, Home/End (if implemented), Enter to select, Escape to close & clear
Focus behavior	Focus remains on input; navigation is handled via `aria-activedescendant`
Closing & cleanup	On Escape, click-away, or selection: panel hides, `aria-expanded` set false, `aria-activedescendant` cleared or removed
Announcements	Hidden live region announces suggestion count, loading state, or “no suggestions” text

⚠️ Note to integrators: If you override styles or event handlers, do not remove or override these ARIA attributes or keyboard logic — doing so may break assistive support.

Styling

Public Class Names

The AI Search Bar provides numerous CSS classes for comprehensive styling customization. All public class names are prefixed with nobi- for consistency.

Main Container Classes


/* Style the main search bar container */
.nobi-search-bar {
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Size variants */
.nobi-search-bar-compact {
  max-width: 400px;
}

.nobi-search-bar-regular {
  max-width: 600px;
}

/* Mode-specific styling */
.nobi-search-bar-ai-mode {
  border-color: #8B5CF6;
  background: linear-gradient(135deg, #F3E8FF 0%, #FFFFFF 100%);
}

.nobi-search-bar-default-mode {
  border-color: #D1D5DB;
}

Input Field Styling


/* Style the search input */
.nobi-search-bar-input {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  padding: 12px 16px;
}

.nobi-search-bar-input::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

Button Styling


/* Style all search buttons consistently */
.nobi-search-bar-button {
  transition: all 0.2s ease;
  font-weight: 600;
}

.nobi-search-bar-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button size variants */
.nobi-search-bar-button-compact {
  padding: 6px 12px;
  font-size: 12px;
}

.nobi-search-bar-button-regular {
  padding: 10px 20px;
  font-size: 14px;
}

/* Button type variants */
.nobi-search-bar-button-icon {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

/* Mode-specific button styling */
.nobi-search-bar-button-ai {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  color: white;
}

.nobi-search-bar-button-default {
  background: #111827;
  color: white;
}

Mode Toggle Styling


/* Style the mode toggle container */
.nobi-search-bar-mode-toggle {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}

/* Individual toggle buttons */
.nobi-search-bar-mode-button {
  transition: all 0.2s ease;
  font-weight: 500;
}

.nobi-search-bar-mode-button-selected {
  background: white;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nobi-search-bar-mode-button-unselected {
  color: #6B7280;
}

.nobi-search-bar-mode-button:hover {
  background: #F3F4F6;
}

Icon Trigger Styling


/* Style the icon trigger */
.nobi-search-bar-icon {
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.nobi-search-bar-icon:hover {
  border-color: #8B5CF6;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Icon mode container */
.nobi-search-bar-icon-mode {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

/* Expandable mode */
.nobi-search-bar-expandable {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Hint Row Styling


/* Style the hint row */
.nobi-search-bar-hint-row {
  background: #F9FAFB;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}

.nobi-search-bar-hint-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6B7280;
  font-size: 12px;
}

.nobi-search-bar-hint-label {
  color: #111827;
  font-weight: 600;
}

/* Keyboard shortcut styling */
.nobi-search-bar-shortcut-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nobi-search-bar-shortcut-key {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: #374151;
}

.nobi-search-bar-shortcut-description {
  font-size: 11px;
  color: #9CA3AF;
}

Advanced Styling Examples

Themed Search Bar


/* Dark theme */
.nobi-search-bar {
  background: #1F2937;
  border-color: #374151;
}

.nobi-search-bar-input {
  background: transparent;
  color: white;
}

.nobi-search-bar-input::placeholder {
  color: #9CA3AF;
}

.nobi-search-bar-mode-toggle {
  background: #374151;
  border-color: #4B5563;
}

.nobi-search-bar-mode-button-selected {
  background: #4B5563;
  color: white;
}

Branded Search Bar


/* Brand colors */
.nobi-search-bar-ai-mode {
  border-color: #FF6B35;
}

.nobi-search-bar-button-ai {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
}

.nobi-search-bar-mode-button-selected {
  background: #FF6B35;
  color: white;
}

.nobi-search-bar-icon:hover {
  border-color: #FF6B35;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

Mobile-Optimized Styling


@media (max-width: 768px) {
  .nobi-search-bar {
    border-radius: 16px;
    margin: 0 16px;
  }

  .nobi-search-bar-input {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .nobi-search-bar-icon-mode {
    bottom: 16px;
    right: 16px;
  }

  .nobi-search-bar-hint-row {
    display: none; /* Hide hints on mobile */
  }
}

CSS Custom Properties

The search bar supports CSS custom properties for easy theming:


.nobi-search-bar {
  /* Border radius */
  --nobi-search-bar-border-radius: 16px;

  /* Button styling */
  --nobi-search-bar-button-background: #111827;
  --nobi-search-bar-button-border-radius: 12px;
  --nobi-search-bar-button-text-color: #ffffff;
  --nobi-search-bar-button-font-family: 'Inter', sans-serif;
  
  /* Width while on a collection or search result page */
  --nobi-search-bar-min-width-on-context-page: 300px;
}

Class Reference

Container Classes

.nobi-search-bar - Main container

.nobi-search-bar-compact - Compact size variant

.nobi-search-bar-regular - Regular size variant

.nobi-search-bar-ai-mode - AI mode styling

.nobi-search-bar-default-mode - Default mode styling

.nobi-search-bar-icon-mode - Icon trigger mode

.nobi-search-bar-expandable - Expandable mode container

Input Classes

.nobi-search-bar-input - Search input field

Button Classes

.nobi-search-bar-button - All buttons

.nobi-search-bar-button-compact - Compact button

.nobi-search-bar-button-regular - Regular button

.nobi-search-bar-button-icon - Icon button

.nobi-search-bar-button-compact-icon - Compact icon button

.nobi-search-bar-button-ai - AI mode button

.nobi-search-bar-button-default - Default mode button

Mode Toggle Classes

.nobi-search-bar-mode-toggle - Toggle container

.nobi-search-bar-mode-toggle-compact - Compact toggle

.nobi-search-bar-mode-toggle-regular - Regular toggle

.nobi-search-bar-mode-button - Individual toggle button

.nobi-search-bar-mode-button-compact - Compact toggle button

.nobi-search-bar-mode-button-regular - Regular toggle button

.nobi-search-bar-mode-button-selected - Selected state

.nobi-search-bar-mode-button-unselected - Unselected state

Icon Classes

.nobi-search-bar-icon - Icon triggers

Hint Row Classes

.nobi-search-bar-hint-row - Hint container

.nobi-search-bar-hint-info - Info section

.nobi-search-bar-hint-label - Mode labels

.nobi-search-bar-shortcut-section - Shortcut section

.nobi-search-bar-shortcut-key - Keyboard shortcut key

.nobi-search-bar-shortcut-description - Shortcut description

Accessibility

Disclaimer: We are not lawyers or certified accessibility auditors. We make no warranties or guarantees regarding legal compliance (e.g. ADA, Section 508, WCAG). This is a technical summary of our design intent; merchants and integrators should perform their own audits and testing.

We have made the following accessibility improvements in this component. Use this as a reference to assess whether the implementation meets your own accessibility and compliance requirements:

Feature	Description
Keyboard operable	All interactive elements (input, mode toggle, CTA button, close icon) are reachable via Tab / Shift+Tab and activate via Enter / Space (or Escape).
Combobox + listbox ARIA roles	The input is `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`, and `aria-activedescendant`. The suggestions panel is `role="listbox"`, each suggestion is `role="option"` with `aria-selected`.
Active descendant clearing	When the suggestions panel closes (via Escape, click-away, or selection), `aria-activedescendant` is cleared (or removed) and `aria-expanded="false"` is reset.
Live announcements	We include a visually hidden <div `aria-live="polite"`> that announces loading states or the number of suggestions to assistive technologies.
Visible focus indication	Focused elements (input, toggle buttons, icons) display a clear outline visible to keyboard users (via `:focus-visible`).
Motion reduction support	Animations and transitions respect `prefers-reduced-motion` CSS settings to minimize motion for users who opt out.
Semantic and descriptive labels	The input uses a descriptive `aria-label` that changes depending on whether AI or default mode is active. Icons and buttons have `aria-label` attributes.
No role mismatches	The component avoids mislabeling (e.g. switching the wrapper to `role="status"` when there is no listbox). The input `aria-controls` always references a proper `role="listbox"` element while open.

Integration Notes

The search bar automatically handles keyboard shortcuts (Cmd/Ctrl + K to toggle modes)

Icon trigger mode provides click-outside-to-close functionality

Site search mode navigates to the configured search path with query parameters

AI mode integrates with the Nobi chat system for AI-powered search responses

All animations and transitions respect user motion preferences

Search Bar Preview (try it below):What it is When to use Basic Usage Configuration Options Core Attributes “Search Mode”Icon Trigger Mode Context Detection Attributes Attribute Details & Behavior Context detection attributes Use search mode at launch Examples Dual Mode Search Bar Compact Bar Icon Triggers the Search Bar AI-First Mode Context-Aware Implementation (Collections/Search Pages)Typeahead Suggestion Panel (Autocomplete)What Is It Behavior & UI Flow Accessibility & ARIA Wiring Styling Public Class Names Main Container Classes Input Field Styling Button Styling Mode Toggle Styling Icon Trigger Styling Hint Row Styling Advanced Styling Examples Themed Search Bar Branded Search Bar Mobile-Optimized Styling CSS Custom Properties Class Reference Container Classes Input Classes Button Classes Mode Toggle Classes Icon Classes Hint Row Classes Accessibility Integration Notes