Vanilla Breeze

chat-input

Form-associated chat input with auto-growing textarea, Enter-to-send, and keyboard shortcuts.

Overview

A form-associated web component that wraps a textarea[data-grow] with send controls. Light DOM, participates in native form submission via ElementInternals. The textarea auto-resizes using VB's existing textarea-grow-init utility.

Attributes

Attribute Type Default Description
name string message Form field name
maxlength number 4000 Character limit
minlength number 1 Prevents empty send
disabled boolean - Disables input and controls
autofocus boolean - Focus textarea on connect

Keyboard

Key Action
Enter Submit message
Shift+Enter Insert newline
Escape Clear input

Basic Usage

The child <textarea data-grow> auto-resizes. The [data-send] button triggers submission.

Inside a Form

As a form-associated element, chat-input participates in native FormData, form submit, and reset().

Disabled State

Set disabled to prevent input. This also disables the send button and reduces opacity.

Events

Event Detail When
chat-input:send { message, from, model } Enter key or send button click
chat-input:input { value, length } Keystroke (debounced 100ms)

Public API

Member Type Description
value string (get/set) Current textarea content
focus() method Focus the textarea
reset() method Clear value and resize
disabled boolean (get/set) Disable/enable state

CSS Variables

Variable Default Description
--chat-input-bg var(--color-surface) Input area background
--chat-input-border var(--border-width-thin) solid var(--color-border) Top border
--chat-input-radius var(--radius-m) Border radius
--chat-input-padding var(--size-s) Internal padding
--chat-input-max-height 12lh Maximum textarea height

Related
↑