eds-global-search

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In Plain HTML

Properties

Property	Attribute	Description	Type	Default
`apiEndpoint`	`api-endpoint`	API endpoint for search	`string`	`'/api/v1/global-search'`
`authToken`	`auth-token`	Optional authorization token (JWT) to include in requests When provided, will be sent as “Bearer ” in Authorization header	`string`	`''`
`currentOrigin`	`current-origin`	Current site origin (auto-detected if not provided)	`string`	`''`
`currentSource`	`current-source`	Current source identifier (e.g., ‘handbook’, ‘design’) Results matching this source will open in same tab	`string`	`''`
`debounceDelay`	`debounce-delay`	Debounce delay in milliseconds	`number`	`300`
`forceNewTab`	`force-new-tab`	Force all results to open in new tab (useful when embedded in external sites)	`boolean`	`false`
`limit`	`limit`	Maximum number of results to fetch	`number`	`20`
`placeholder`	`placeholder`	Placeholder text for the input	`string`	`'Search Handbook + Design...'`

Events

Event	Description	Type
`resultSelected`	Emitted when a result is selected	`CustomEvent<{ id: string; title: string; url: string; section: string; tags: string[]; date: string; source: string; snippet: string; score: number; }>`
`searchClosed`	Emitted when search is closed (for expandable mode)	`CustomEvent<void>`

Dependencies

Depends on

Graph

graph TD;
  eds-global-search --> eds-input-field
  eds-global-search --> eds-spinner
  eds-global-search --> eds-icon-wrapper
  eds-input-field --> eds-input-label
  eds-input-field --> eds-input
  eds-input-field --> eds-input-select
  eds-input-field --> eds-input-file
  eds-input-field --> eds-input-dropzone
  eds-input-field --> eds-input-search
  eds-input-field --> eds-input-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  style eds-global-search fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS