Search Mode Toggle

TURN ANY SEARCH BAR INTO AN AI ASSISTANT

Search Mode Toggle

Preview (try it below):

The Nobi Toggle component (<nobi-toggle>) allows merchants to embed a mode selection toggle into their existing search forms. This enables customers to choose between the merchant's default search functionality and Nobi's AI-powered search experience.

When to Use

  • You want to keep your existing search form and typeahead functionality
  • You want to give customers the choice between your default search and AI search
  • You need to integrate Nobi into existing search interfaces without replacing them
  • You want to test AI search adoption alongside your current search

Basic Usage

<form action="/search" method="GET">
  <input type="search" name="q" placeholder="Search products..." />
  <button type="submit">Search</button>
  <nobi-toggle></nobi-toggle>
</form>
When the toggle is set to "Default", your form submits normally. When set to "AI", Nobi intercepts the form submission and launches the AI chat interface with the search query.

Configuration

Attribute
Type
Default
Description
additional-class-names
string
""
Additional CSS classes
auto-detect-page-context
"true" | "false"
"false"
Auto-detect page context
collection-handle
string
-
Collection handle for context
collection-title
string
-
Collection title for context
collection-id
string
-
Collection ID for context
default-mode
"site" | "ai"
"site"
Initial mode selection
input-selector
string
-
CSS selector for target input field (overrides auto-detection)
search-query
string
-
Current search query for context
size
"regular" | "compact"
"regular"
Toggle size

Examples

Basic Toggle

<form>
  <input type="search" name="q" placeholder="Search..." />
  <button type="submit">Search</button>
  <nobi-toggle></nobi-toggle>
</form>

Start in AI Mode

<form>
  <input type="search" name="q" placeholder="Ask me anything..." />
  <button type="submit">Search</button>
  <nobi-toggle default-mode="ai"></nobi-toggle>
</form>

Compact Size

<form style="display: flex; align-items: center; gap: 8px;">
  <input type="search" name="q" style="font-size: 12px;" />
  <button type="submit" style="font-size: 12px;">Go</button>
  <nobi-toggle size="compact"></nobi-toggle>
</form>

With Page Context (Collection Pages)

<form>
  <input type="search" name="q" placeholder="Search shoes..." />
  <button type="submit">Search</button>
  <nobi-toggle
    collection-handle="shoes"
    collection-title="Shoes Collection"
    collection-id="shoes-123">
  </nobi-toggle>
</form>

Auto-Detect Context

<!-- Automatically detects collection/search context from current page URL -->
<form>
  <input type="search" name="q" />
  <button type="submit">Search</button>
  <nobi-toggle auto-detect-page-context="true"></nobi-toggle>
</form>

Custom Input Selector

<!-- Use specific input when form has multiple inputs -->
<form>
  <input type="text" name="category" placeholder="Category" />
  <input type="search" class="main-search" name="query" placeholder="Search products..." />
  <input type="text" name="brand" placeholder="Brand" />
  <button type="submit">Search</button>
  <nobi-toggle input-selector=".main-search"></nobi-toggle>
</form>

Styling

The toggle component provides CSS classes and custom properties for styling customization.

CSS Classes

Class
Description
.nobi-toggle
Main toggle container
.nobi-toggle-regular
Regular size styling
.nobi-toggle-compact
Compact size styling
.nobi-toggle-ai-mode
Applied when AI mode is selected
.nobi-toggle-site-mode
Applied when site mode is selected
.nobi-toggle-button
Individual button styling
.nobi-toggle-button-selected
Selected button styling
.nobi-toggle-button-unselected
Unselected button styling

CSS Custom Properties

:root {
  /* Container */
  --nobi-toggle-border: #d1d5db;
  --nobi-toggle-background: #ffffff;
  --nobi-toggle-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nobi-toggle-font-family: system-ui, -apple-system, sans-serif;

  /* Typography */
  --nobi-toggle-font-size: 14px;
  --nobi-toggle-font-size-compact: 12px;
  --nobi-toggle-font-weight: 500;

  /* Colors */
  --nobi-toggle-text-color: #6b7280;
  --nobi-toggle-text-color-hover: #374151;
  --nobi-toggle-selected-text-color: #ffffff;

  /* Mode-specific backgrounds */
  --nobi-toggle-default-background: #111827;
  --nobi-toggle-ai-background: linear-gradient(90deg, #fb7185 0%, #d946ef 100%);

  /* Individual mode colors */
  --nobi-toggle-default-selected-text-color: #ffffff;
  --nobi-toggle-ai-selected-text-color: #ffffff;

  /* Interactive states */
  --nobi-toggle-background-hover: rgba(0, 0, 0, 0.05);
  --nobi-toggle-focus-color: #3b82f6;
}

Advanced Styling

Custom Theme Example

<style>
.merchant-toggle {
  --nobi-toggle-border: #ff6b35;
  --nobi-toggle-background: #fff5f3;
  --nobi-toggle-ai-background: linear-gradient(45deg, #ff6b35, #f7931e);
  --nobi-toggle-default-background: #333;
  --nobi-toggle-font-weight: 600;
}
</style>

<nobi-toggle additional-class-names="merchant-toggle"></nobi-toggle>

Responsive Design

.responsive-toggle {
  --nobi-toggle-font-size: 14px;
}

@media (max-width: 768px) {
  .responsive-toggle {
    --nobi-toggle-font-size: 12px;
  }
}

Integration Notes

Form Integration

Input Detection

Custom Selector (Recommended for complex forms): If you provide an input-selector attribute, the toggle will use that specific CSS selector to find your search input:
<nobi-toggle input-selector="#search-query"></nobi-toggle>
<nobi-toggle input-selector=".primary-search-field"></nobi-toggle>
<nobi-toggle input-selector="input[name='searchTerm']"></nobi-toggle>
Auto-Detection (Default behavior): When no input-selector is provided, the toggle automatically searches for inputs using these selectors in order:
  1. input[type="search"]
  1. input[type="text"]
  1. input[name*="q"]
  1. input[name*="query"]
  1. input[name*="search"]
If no input is found using the specific selector, it falls back to the auto-detection patterns above.

Keyboard Shortcuts

  • Cmd/Ctrl + K: Toggle between modes
  • Tab: Navigate between toggle buttons
  • Enter/Space: Activate focused button