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...'`
`variant`	`variant`	Visual theme of the search pill. - “gray” (default): light grey surface (matches the EBRAINS header mockup) - “white”: white surface with a 1px border (use when sitting on a coloured nav) - “black”: brand-black surface with white text (use on dark backgrounds)	`"black" \| "gray" \| "white"`	`'gray'`

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-spinner
  eds-global-search --> eds-icon-wrapper
  style eds-global-search fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS