Skip to content
Pinky UI

Search Interaction

Search should preserve focus, identity, and a clear distinction between finding content and launching commands.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Overview
Focused item

Search Interaction · selection stays explicit

Purpose

Search should preserve focus, identity, and a clear distinction between finding content and launching commands.

Guidance

Use Morph Search for content queries, Command Palette for actions, and Search Results Morph for stable result updates.

Accessibility and anti-patterns

Support combobox/listbox semantics, Escape, clear, empty/loading states, and a visible keyboard-free route.

Source: packages/skills/patterns/search-interaction.md