1

Input MessageNew

An auto-growing chat composer with drag-and-drop file attachments, image/PDF preview tiles, and Enter-to-send.

Dependencies

motionpdfjs-dist

Interaction Type

Type and press Enter to send (Shift+Enter for a newline). Drag files onto the composer or use the attach slot to add image/PDF previews.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

Controlled textarea value.

onValueChange
(value: string) => void

Called with the new value on every textarea change.

onSend
(value: string, files: File[]) => void

Fired when the user submits via Enter or the send button.

placeholder
string

Placeholder shown when the value is empty.

disabled
boolean

Disables the textarea, send button, and drag-and-drop.

minRows
number

Minimum visible rows before the textarea grows. Defaults to 1.

maxRows
number

Maximum visible rows before the textarea scrolls. Defaults to 8.

files
File[]

Controlled list of attached files. Omit to disable attachments entirely.

onFilesChange
(files: File[]) => void

Called when files are added (drag-drop or picker) or removed.

accept
string

Accepted MIME types, comma-separated. Defaults to PNG/JPEG/PDF.

maxFiles
number

Maximum number of files. Extra files are dropped past the limit.

sendLabel
string

Accessible label for the send button. Defaults to "Send".

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-message.json

How to use

import { useState } from "react"
import { InputMessage } from "@/components/ui/input-message"

export function Demo() {
  const [value, setValue] = useState("")
  return (
    <InputMessage
      value={value}
      onValueChange={setValue}
      onSend={() => setValue("")}
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/input-message.json