Prompt Input

An input field that allows users to enter and submit text to an AI model.

Examples

You can use PromptInputActions to add actions with tooltips to the PromptInput.

npx shadcn add "https://prompt-kit.com/c/prompt-input.json"

Prop	Type	Default	Description
isLoading	boolean	false	Loading state of the input
value	string		Controlled value of the input
onValueChange	(value: string) => void		Callback when input value changes
maxHeight	number \| string	240	Maximum height of the textarea in pixels
onSubmit	() => void		Callback when form is submitted (Enter pressed)
children	React.ReactNode		Child components to render
className	string		Additional CSS classes

Prop	Type	Default	Description
disableAutosize	boolean	false	Disable automatic height adjustment
className	string		Additional CSS classes
onKeyDown	(e: KeyboardEvent) => void		Keyboard event handler
disabled	boolean	false	Disable the textarea input
...props	`React.ComponentProps<"textarea">`		All other textarea props are supported

Prop	Type	Description
children	React.ReactNode	Child components to render
className	string	Additional CSS classes
...props	`React.HTMLAttributes<HTMLDivElement>`	All other div props are supported

Prop	Type	Default	Description
tooltip	React.ReactNode		Content to show in the tooltip
children	React.ReactNode		Child component to trigger the tooltip
className	string		Additional CSS classes for the tooltip
side	"top" \| "bottom" \| "left" \| "right"	"top"	Position of the tooltip relative to the trigger
disabled	boolean	false	Disable the tooltip trigger
...props	`React.ComponentProps<typeof Tooltip>`		All other Tooltip component props are supported