Primitive

SearchInput

Search input anatomy with icon, token, shortcut, action, and trailing slots.

Use SearchInput for the input chrome. Keep query state, submit behavior, and suggestions in components.
control
DOM renderImage render
SearchInputDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Query control with icon, shortcut slot, and action region.
Render state

Tokens

Search input with selected token grammar.
Render state

Value

Controlled value display without owning search behavior.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
inputPropsInputHTMLAttributes<HTMLInputElement>-Native input props.
tokensReactNode-Selected token slot.
shortcutReactNode[]-Shortcut hint slot.
wrapboolean-Whether tokens can wrap.