Widget attributes

<suo-search> is the underlying web component; @suo/react's <SuoSearch> accepts the same options as camelCase props.

Attribute	React prop	Type	Default	Notes
`host`	`host`	string	—	Required. Your API host, for example `https://api.usesuo.com`.
`index-name`	`indexName`	string	—	Required. Which index to search.
`api-key`	`apiKey`	string	—	A public search key. Omit if using `scoped-token`.
`scoped-token`	`scopedToken`	string	—	A scoped token, for partitioned or private content — see Scoped tokens.
`mode`	`mode`	`'modal' \| 'inline'`	`'modal'`	`modal` opens on ⌘K (or the on-screen affordance) and narrows to a full-screen sheet under 640px automatically; `inline` renders the combobox directly in the page flow with no modal.
`theme`	`theme`	`'light' \| 'dark' \| 'auto'`	`'auto'`	`'auto'` follows `prefers-color-scheme`. See Theming the widget for color overrides.
`placeholder`	`placeholder`	string	`'Search…'`	Input placeholder.

@suo/react's <SuoSearch> also accepts two React-only props with no attribute equivalent, since their value is a list: scopes (ScopeChip[], the chip row shown above the results) and popularSearches (string[], shown on the empty/one-character query state). Both can also be set imperatively on the element — see Methods below.

There is no key, token, index, hotkey, partition, filters, facets or disable-analytics attribute today. The keyboard shortcut that opens a modal widget is fixed to ⌘K / Ctrl+K and is not configurable. Extra filters and facets are a search request option, not a widget attribute — build a custom UI on the headless client if you need them.

Minimal example

HTML

<suo-search host="https://api.usesuo.com" api-key="suo_search_YOUR_KEY" index-name="docs"></suo-search>

Inline mode

HTML

<suo-search
	host="https://api.usesuo.com"
	api-key="suo_search_YOUR_KEY"
	index-name="docs"
	mode="inline"
	placeholder="Search the docs"
></suo-search>

inline renders the combobox and results directly in the page flow — no modal, no hotkey — for a dedicated search page or a sidebar.

Methods

The element exposes a small imperative API, typed as SuoSearchElement:

Member	Signature	Does
`show()`	`(): void`	Opens a `modal` widget. No-op in `inline` mode.
`close()`	`(): void`	Closes a `modal` widget. No-op in `inline` mode.
`toggle()`	`(): void`	Opens if closed, closes if open.
`mode`	getter/setter	Reads or changes `modal` \| `inline` after mount.
`setScopes(scopes)`	`(scopes: ScopeChip[]): void`	Replaces the scope chip row.
`setPopularSearches(queries)`	`(queries: string[]): void`	Replaces the popular-searches list.

There is no open or query property to read the widget's current state — for that, listen for suo:open, suo:select and suo:error, the three events <suo-search> dispatches; see Widget events.