ComposerTextInput

ComposerTextInput is the default message field for Composer. It renders the draft and input events supplied by the parent Composer contract.

Usage

Replace the default input by passing a component to inputComponent. Your replacement receives the controlled value and event handlers from Composer.

import {
  Composer,
  ComposerTextInput,
  type ComposerTextInputProps,
} from '@hyperflow/chakra-ui'

function ProjectInput(props: ComposerTextInputProps) {
  return <ComposerTextInput {...props} />
}

export function ProjectComposer() {
  return <Composer inputComponent={ProjectInput} />
}

Examples

Change the placeholder

Pass a different placeholder while preserving the draft and keyboard behavior supplied by Composer.

function ProjectInput(props: ComposerTextInputProps) {
  return (
    <ComposerTextInput
      {...props}
      placeholder="Ask the project assistant"
    />
  )
}

Guide

Keep the input controlled

value, onChange, and disabled belong to the parent Composer. Do not create a second draft state or write to the Hyperflow client from a replacement input.

Preserve message keyboard behavior

Forward onKeyDown: Composer uses it to submit with Enter and insert a newline with Shift + Enter.

Preserve file-input events when needed

Forward onDragOver, onDrop, and onPaste when your input accepts attachments. They connect dropped and pasted files to the Composer draft.

Props

Prop	Default	Type
`value`	—	`string` The current draft value.
`disabled`	—	`boolean` Whether the field accepts input.
`onChange`	—	`ChangeEventHandler<HTMLTextAreaElement>` Updates the controlled draft.
`onKeyDown`	—	`KeyboardEventHandler<HTMLTextAreaElement>` Handles message keyboard behavior.
`onDragOver`	—	`DragEventHandler<HTMLTextAreaElement>` Handles files dragged over the field.
`onDrop`	—	`DragEventHandler<HTMLTextAreaElement>` Adds dropped files to the draft.
`onPaste`	—	`ClipboardEventHandler<HTMLTextAreaElement>` Adds pasted files to the draft.
`placeholder`	`"Scrivi un messaggio..."`	`string` Text shown while the draft is empty.

On this page