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.

DOM render JPEG render

Playground

Props in the URL.

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

Loading playground.

States

Rendered matrix.

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

Default

Plain search with shortcut and trailing action.

/render state

Scoped

Search with removable scope tokens and action slots.

/render state

Menu

Search bar composed with the command menu slot.

/render state

Props

Public contract.

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.