HTML + CSSInputs
Search with typing placeholder
The placeholder types out example searches letter by letter, deletes them and starts over with the next one.
Settings
16px
1x
Code
<label class="uv-in2t"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
An empty search box does not tell people what they can look for; this one does it by typing examples. It suits the hero of a marketplace, an icon or template library or a help centre: “Search icons…”, “Search palettes…” and so on. An animated placeholder in a search input, with a small script doing the typing.
The moving text is a hint, not a label, so keep a visible title or an accessible name for the field. Use real searches your visitors make and keep them short, three or four words at most.