Search input with voice dictation
Tap the microphone: the field shows sound waves and types out what you say letter by letter.
Settings
Code
<div class="uv-ivo"><label class="fd"><span class="sr">Search or dictate</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Search or dictate"><span class="wv" aria-hidden="true"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i><i style="--i:12"></i><i style="--i:13"></i></span></label><button type="button" class="mc" aria-pressed="false" aria-label="Dictate"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></button><p class="st" aria-live="polite"></p></div>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
See all InputsWhere to use it
Voice input is common on phones, and a clear recording state helps people trust it. When the microphone is tapped, it turns red with a pulsing ring, animated sound bars appear inside the search field, a status line says it is listening, and the transcript is typed into the field letter by letter. Tapping again cancels.
The demo types a sample phrase; the script marks where to connect the browser speech recognition API. The microphone is a toggle button with aria-pressed, and the status line is announced by screen readers.