Velin Search 1.2.2

The <velin-search> Web Component provides documentation and in-app find UI powered by core/search — fuzzy results, categories, and keyboard navigation. Deutsch: Velin Search De

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Docs sites, marketing sites, or apps that ship a JSON search index.
You want a combobox-style find field without building listbox ARIA yourself.
For a deeper dive (index build, providers, JS API), see the VelinSearch guide.

When not

Do not use it as a full CMS / server search replacement when you need ranked backend results only.
Prefer Command palette for action menus (⌘K-style commands) rather than content search.
Do not invent undocumented attributes — stick to the observed API below.

Example

<velin-search
  index="/search-index.json"
  categories="docs,components"
  min-chars="2"
  fuzzy="0.2"
  debounce="120"
  placeholder="Search…"
  aria-label="Search">
</velin-search>

Declarative binding (without the custom element) is covered in the VelinSearch guide.

Attributes

Attribute	Default	Description
`index`	`/search-index.json`	JSON index URL
`categories`	all	Comma-separated category filter
`min-chars`	`2`	Minimum query length
`fuzzy`	`0.2`	Typo tolerance
`placeholder`	`Search…`	Input placeholder
`debounce`	`120`	Input debounce (ms)
`aria-label`	`Search`	Accessible name of the combobox input

No custom events are dispatched by the element. Properties mirror the attributes: indexUrl, categories, minChars, fuzzy, debounceMs.

Input: role="combobox", aria-expanded, aria-autocomplete="list", aria-controls, optional aria-activedescendant.
Results: role="listbox"; options are links with role="option".
Status text uses a polite live region for result counts.
Keyboard: ↑↓ navigate, Enter open, Escape close.

Contract status: pass.

Velin Search 1.2.2

When to use

When not

Example

Attributes

Accessibility

Related