ChatInput

Auto-resizing message composer with send button, keyboard shortcuts, and customizable action slots for attachments and emoji pickers.

View source Installation

Preview

Default

Disabled

Import

import { ChatInput } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
value	`string`	—	Controlled value of the textarea.
onChange	`(value: string) => void`	—	Called when the text changes.
onSend	`(value: string) => void`	—	Called when the user sends a message.
onAttach	`() => void`	—	Called when the attachment action is triggered.
placeholder	`string`	`'Type a message…'`	Placeholder text.
maxRows	`number`	`5`	Maximum number of visible rows before scrolling.
leftSlot	`ReactNode`	—	Content rendered to the left of the textarea.
rightSlot	`ReactNode`	—	Content rendered to the right of the textarea.
showSendButton	`boolean`	`true`	Whether to show the send button.
sendOnEnter	`boolean`	`true`	Send on Enter key (Shift+Enter for newline).
disabled	`boolean`	`false`	Disables the input.

Examples

Basic Usage

import { ChatInput } from '@velocityuikit/velocityui'

export default function Example() {
  return <ChatInput onSend={(msg) => console.log(msg)} />
}

Controlled

import { useState } from 'react'
import { ChatInput } from '@velocityuikit/velocityui'

export default function Example() {
  const [value, setValue] = useState('')
  return (
    <ChatInput
      value={value}
      onChange={setValue}
      onSend={(msg) => { console.log(msg); setValue('') }}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */