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.

<chat-input name="message"> <textarea data-grow rows="1" data-max-rows="8" placeholder="Ask anything..."></textarea> <footer> <button type="submit" class="small" data-send aria-label="Send"> <icon-wc name="send"></icon-wc> </button> </footer> </chat-input>

Inside a Form

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

<form action="/support/reply" method="POST"> <chat-input name="message"> <textarea data-grow rows="1" placeholder="Reply..."></textarea> <footer> <button type="submit" class="small" data-send aria-label="Send"> <icon-wc name="send"></icon-wc> </button> </footer> </chat-input> </form>

Disabled State

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

<chat-input name="message" disabled> <textarea data-grow rows="1" placeholder="Input is disabled..."></textarea> <footer> <button type="submit" class="small" data-send aria-label="Send"> <icon-wc name="send"></icon-wc> </button> </footer> </chat-input>

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