Search bar

Search with conditions as editable tokens: the query builder and the search box in one.

Guidance

The search bar is the query builder. Free text and conditions live in one field: each condition is a neutral token in plain words ("Type is Table", "Provider is Snowflake or BigQuery"), and clicking a part of a token edits it (the field, the operator, or the value with a picker that fits the field: a list of known values, a text box, or a from and to pair for ranges). Several values of one field read as "is X or Y". There is no separate builder and no mode to switch.

Add a condition by typing @ (editor-style completion walks field, operator, value), in the query builder, or from outside, such as a facet sidebar setting value. "Build query" opens mm-query-builder in place of the bar, for groups that match all, any or none; Apply writes the result back. "Show as text" swaps the tokens for the raw query in place; a query the tokens cannot show (groups, OR between fields) shows as text with Build query beside it, never as a dead end.

Keyboard: Left at the start of the text moves into the tokens, Left and Right move between their parts, Enter or Space opens a part's editor, Escape closes it and returns focus, Backspace on an empty text box selects the last token and a second Backspace removes it, Delete removes the focused token. Changes are announced politely. Enter in the text box fires mm-search.

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	The query, in Marmot search syntax.
fields		SearchBarField[]	[]	Fields people can filter on, with everyday labels and known values.
label	label	string	''	Accessible name of the search.
placeholder	placeholder	string	''
raw	raw	boolean	false	Shows the raw query instead of tokens.
building	building	boolean	false	Shows the query builder in place of the bar.
loadFields		((prefix: string) => Promise<string[]>) | undefined		Suggests metadata fields in the query builder, such as from /assets/suggestions/metadata/fields.
loadValues		((field: string, prefix: string) => Promise<string[]>) | undefined		Suggests values in the query builder, such as from /assets/suggestions/metadata/values.
draftCount	draft-count	number | undefined		Live number of results for the builder's draft, set by the page after mm-draft.

Events

Event	Detail	Description
mm-input	CustomEvent<{ value: string }>	The query changed.
mm-search	CustomEvent<{ query: string }>	Enter was pressed in the text box.
mm-draft	CustomEvent<{ value: string }>	The query builder's draft changed, so the page can set draft-count.

CSS parts

Part	Description
field	The bordered bar.
token	Each condition token.
actions	The row with Show as text and Build query.
editor	The popup that edits a token part.

Examples

Every state of mm-search-bar in Storybook, with keyboard and screen reader tests.