PromptInput

Modern AI prompt bar with voice waveform mode that animates into a circular send button when focused or typed into.

Roughness1.5Lock seedVariantSizeLoadingAnimate

<PromptInput
  variant="solid"
  size="md"
  placeholder="Ask anything..."
  onSubmit={(value) => console.log(value)}
  roughness={1.5}
/>

CLI install

npx doodleui-react add prompt-input

Usage

import { PromptInput } from "doodleui-react";

<PromptInput
  placeholder="Ask anything..."
  onSubmit={(value) => console.log("Submitted:", value)}
  onVoiceClick={() => console.log("Voice mode started")}
/>

Animate on Click / Focus

When the user clicks inside the input box, the voice waveform icon smoothly transitions out and a circular send button with an upward arrow (↑) animates in beside the input capsule. When submitted or blurred with empty text, it animates back smoothly.

<PromptInput
  size="lg"
  placeholder="Ask anything..."
  onSubmit={(prompt) => sendToLLM(prompt)}
/>

Props

Prop	Type	Default	Notes
variant	"solid" \| "sketch"	"solid"	Sleek pill capsule (solid) or hand-drawn roughjs borders (sketch).
size	"sm" \| "md" \| "lg"	"md"	Height and font scale preset.
onSubmit	(value: string) => void	undefined	Callback fired when user submits via Enter key or clicking the send button.
onVoiceClick	(event: MouseEvent) => void	undefined	Callback fired when the voice waveform button is clicked.
loading	boolean	false	Replaces the send icon with a spinner.
keepOpenOnBlur	boolean	false	Keeps the send button visible even after focus moves away.
animate	boolean	true	Spring animation when transitioning between voice waveform and send button. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.