Query input
Search box with highlighting for Marmot's query syntax.
Guidance
The Discover search box. People type free text mixed with Marmot's search syntax
(type:table, provider:snowflake, @metadata.owner = "Analytics Engineering", AND, OR, NOT),
and the structured parts are highlighted as they type: field keys in slate, values in ink,
operators and boolean keywords in ink-2. The field is a real <input> with transparent text under
an aria-hidden highlighted copy, so caret, selection, IME and screen readers behave natively. Every
token is set in the text face so the copy lines up with the caret to the pixel.
Pass createQuerySuggest({ fields }) as suggest for editor-style completion: @ lists the
fields, then operators, values and AND, OR or NOT follow as the query is typed.
Optional suggestions follow the WAI-ARIA combobox pattern with a listbox popup
(https://www.w3.org/WAI/ARIA/apg/patterns/combobox/): ArrowDown opens and moves, ArrowUp moves,
Enter or Tab accepts the active suggestion, Escape closes. Enter with no active suggestion fires
mm-search and submits the owning form unless the event is cancelled. The shortcut key ("/" by
default) focuses the field from anywhere on the page.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The query. |
placeholder | placeholder | string | '' | |
loading | loading | boolean | false | Shows a spinner while results load. |
shortcut | shortcut | string | '/' | Key that focuses the field from anywhere on the page, shown as a keycap. Empty to turn off. |
suggest | QuerySuggestFn | undefined | Returns suggestions for the query at the cursor. Calls are debounced and stale answers ignored. | ||
suggestDelay | suggest-delay | number | 120 | Debounce in milliseconds before suggest is called while typing. |
tokens | QueryToken[] | Tokens of the current value. | ||
label | label | string | '' | Field label. Rendered above the control unless hide-label, and always the accessible name. |
help | help | string | '' | Help text under the control. |
error | error | string | '' | Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid. |
hideLabel | hide-label | boolean | false | Hides the label visually; it stays the accessible name. |
optional | optional | boolean | false | Marks the field as optional, in words. |
name | name | string | '' | Name submitted with the form. |
disabled | disabled | boolean | false | Disables the control and excludes it from submission. |
required | required | boolean | false | Requires a value before the form submits. |
form | HTMLFormElement | null | |||
validity | ValidityState | |||
validationMessage | string | |||
willValidate | boolean | |||
isDisabled | boolean | True when disabled directly or by a disabled ancestor fieldset. |
Methods
| Method | Description |
|---|---|
formResetCallback() | Restore the initial value when the owning form resets. |
Events
| Event | Detail | Description |
|---|---|---|
mm-input | CustomEvent<{ value: string; tokens: QueryToken[] }> | Fired on every edit. |
mm-change | CustomEvent<{ value: string }> | Fired when the query is committed with Enter or on blur after an edit. |
mm-search | CustomEvent<{ query: string; tokens: QueryToken[] }> | Fired on Enter with no active suggestion. Cancel it to stop form submission. |
change | Event | Native change, re-dispatched from the host on commit. |
input | InputEvent |
CSS parts
| Part | Description |
|---|---|
field | The bordered box. |
icon | The leading search icon. |
input | The native input. |
listbox | The suggestions popup. |
option | Each suggestion. |
Examples
Every state of mm-query-input in Storybook, with keyboard and screen reader tests.