Component

Search bar

Compact single-line command input with removable scope tokens, keyboard hint, action slots, and optional menu slot.

Search bar is intentionally slot-first: it can stay a search field, become a prompt bar, or host a command menu without changing the primitive contract.

form

DOM render Image render

Search barDefault

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Command search with scope tokens and submit affordance.

Render state

Scoped

Search with removable scope tokens and action slots.

Render state

Wrapped

Wrapped token search for narrow generated surfaces.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.

Name	Type	Default	Description
`query`	`string`	-	Controlled input query.
`defaultValue`	`string`	`''`	Uncontrolled initial query.
`tokens`	`readonly SearchToken[]`	-	Optional removable scope chips before the input.
`actions`	`ReactNode`	-	Trailing action slot for submit, filter, or mode controls.
`menu`	`ReactNode`	-	Popdown slot, commonly a CommandMenu.
`menuPlacement`	`'popdown' \| 'inline'`	`popdown`	Whether the menu floats over content or reserves flow height.
`shortcut`	`readonly string[]`	`[]`	Keyboard hint rendered as a grouped chord in the field.
`wrap`	`boolean`	`false`	Allows tokens and input to wrap when a composition wants taller search chrome.
`onSubmit`	`(query: string) => void`	-	Called on form submit.
`onTokenRemove`	`(token: SearchToken) => void`	-	Called when a token close button is clicked.