Search

Search input with debounce and optional suggestions dropdown.

Preview · Search

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:320px">
  <input type="search" placeholder="Search tenants, users, records..." />
  <fieldset class="group">
    <legend>🔍</legend>
    <input type="search" placeholder="Global search..." />
    <button>Go</button>
  </fieldset>
</div>

React

import { PrimusSearch } from 'primus-react-ui';

<PrimusSearch placeholder="Search accounts" debounce={300}
  suggestions={['Acme Corp', 'Globex Inc']} showSuggestions
  onSearch={(v) => console.log(v)} />

Angular

<primus-search placeholder="Search accounts" [debounce]="300"
  [suggestions]="suggestions" [showSuggestions]="true"
  (search)="onSearch($event)">
</primus-search>

Props

Prop	Type	Default	Description
placeholder	string	'Search...'	Input placeholder text
value	string	''	Controlled value
debounce	number	300	Debounce delay in ms — 0 to disable
showSuggestions	boolean	false	Show autocomplete dropdown
suggestions	string[] | SearchSuggestion[]	[]	Autocomplete items
loading	boolean	false	Show spinner while suggestions load
onSearch / (search)	(query: string) => void	required	Fires after debounce
onSuggestionSelect / (suggestionSelect)	(item: SearchSuggestion) => void	—	Fires when suggestion clicked

TypeScript interfaces

interface SearchSuggestion {
  value:    string;          // Value emitted on select
  label:    string;          // Display text in dropdown
  category?: string;         // Optional group heading
}

// Simple string suggestions
<PrimusSearch
  placeholder="Search tenants..."
  suggestions={['Acme Corp', 'Globex Inc', 'Initech']}
  onSearch={(q) => setQuery(q)}
/>

// Rich suggestions with category grouping
<PrimusSearch
  placeholder="Search..."
  showSuggestions
  suggestions={[
    { value: 't-1', label: 'Acme Corp',  category: 'Tenants' },
    { value: 'u-1', label: 'Jane Doe',   category: 'Users' },
  ]}
  onSearch={fetchResults}
  onSuggestionSelect={(item) => navigate('/' + item.value)}
/>

Props

Prop	Type	Default	Description
placeholder	string	'Search...'	Input placeholder
value	string	—	Controlled input value
debounce	number	300	Debounce delay in ms
showSuggestions	boolean	false	Show suggestion dropdown
suggestions	SearchSuggestion[]	[]	Suggestion list
loading	boolean	false	Show spinner in input
onSearch / (search)	(query: string) => void	—	Fires after debounce
onSuggestionSelect / (suggestionSelect)	(item: SearchSuggestion) => void	—	Fires when suggestion clicked

TypeScript interfaces

interface SearchSuggestion {
  value:     string;    // Unique identifier
  label:     string;    // Display text
  category?: string;    // Optional group heading e.g. 'Tenants', 'Users'
  meta?:     string;    // Secondary text shown alongside label
}

// Example
const suggestions: SearchSuggestion[] = [
  { value: 'tenant-1', label: 'Acme Corp',  category: 'Tenants', meta: 'Enterprise' },
  { value: 'tenant-2', label: 'Globex Inc', category: 'Tenants', meta: 'Pro' },
  { value: 'user-1',   label: 'Jane Doe',   category: 'Users',   meta: 'jane@acme.com' },
];

Version history

See the Changelog for version history and breaking changes.