HTML + CSSInputs

AI prompt box

A growing text area with a spinning light border while you type, quick action chips and a send button.

Settings

16px
1x

Code

<form class="uv-iai"><label class="bx"><span class="sr">Ask anything</span><textarea rows="1" placeholder="Ask anything"></textarea></label><div class="rw"><button type="button" class="ch">Summarize</button><button type="button" class="ch">Translate</button><button type="button" class="ch">Ideas</button><button type="submit" class="go" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/></svg></button></div></form>

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 Inputs

Where to use it

Chat and assistant interfaces revolve around one field, so it deserves care. This prompt box grows with the text, lights a rotating gradient border and a soft glow when focused, and offers three quick chips that prefill an instruction. The round send button stays grey while the box is empty and turns colorful once there is something to send.

It works for AI writing tools, support chat, search with natural language and internal assistants. The textarea is a real form field, Enter or the button submits, and the animated border stops with reduced motion.