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.

Copy and paste the following code into your project.

pnpm dlx shadcn-svelte@latest add https://ai-elements.vercel.app/r/prompt-kit-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`	`Snippet`	-	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`	`HTMLTextareaAttributes`	-	All other textarea props are supported

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

Prop	Type	Default	Description
`tooltip`	`Snippet`	-	Content to show in the tooltip
`children`	`Snippet`	-	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`	`TooltipProps`	-	All other Tooltip component props are supported