Widget attributes
Every attribute `<suo-search>` accepts, and its React prop equivalent.
<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
<suo-search host="https://api.usesuo.com" api-key="suo_search_YOUR_KEY" index-name="docs"></suo-search>Inline mode
<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.