Prompt Input

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

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/prompt-input.json

Examples

Demo

Props

PromptInput

Prop	Type	Default	Description
`children`	`Snippet`	`-`	Prompt input content, including the textarea and action row.
`class`	`string`	`-`	Additional CSS classes for the wrapper.
`isLoading`	`boolean`	`false`	Marks the prompt as loading and disables the input wrapper.
`value`	`string`	`-`	Controlled textarea value.
`onValueChange`	`(value: string) => void`	`-`	Called when the textarea value changes.
`maxHeight`	`number \| string`	`240`	Maximum auto-resize height for the textarea.
`onSubmit`	`() => void`	`-`	Called when the textarea submits on Enter.

PromptInputActions

Prop	Type	Default	Description
`children`	`Snippet`	`-`	Action buttons or controls rendered in the prompt row.
`class`	`string`	`-`	Additional CSS classes for the actions wrapper.

PromptInputAction

Prop	Type	Default	Description
`tooltip`	`Snippet`	`-`	Tooltip content shown for the action.
`children`	`Snippet`	`-`	Interactive trigger rendered inside the tooltip.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Tooltip placement relative to the trigger.
`class`	`string`	`-`	Additional CSS classes for the tooltip content.

PromptInputTextarea

Prop	Type	Default	Description
`class`	`string`	`-`	Additional CSS classes for the textarea.
`disableAutosize`	`boolean`	`false`	Disables the auto-resize behavior.