# ChatInput
> Cherry ChatInput component - the auto-growing chat composer with an optional animated rainbow glow.
Source: https://cherry.al/code/chat-input
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# ChatInput
ChatInput is the [chat kit](/code/chat)'s composer: an auto-growing textarea plus a send button, wired to the provider out of the box. Enter submits, Shift+Enter breaks the line, and an IME composition session owns Enter until it commits. The send button is disabled while the input is empty or a reply is loading, and shows a [Spinner](/code/spinner) in place of its arrow while loading.
Inside a `ChatProvider` no props are required - value, change handling, submission, and the loading state all come from the provider:
```jsx
```
Outside a provider (or to intercept it), drive it yourself with `value`, `onValueChange`, `onSend`, and `$loading`.
The textarea grows with its content up to a cap (160px by default, or `$maxRows`), then scrolls. At one row it matches the height of Cherry's other form elements.
## The glow treatment
`$glow` opts into the animated treatment: a rotating rainbow border that stands in for the primary color on hover and focus, a soft radiating halo, and a field of floating sparkles while the composer is hovered or focused. The state map mirrors the regular Cherry input - border accent on hover and focus, a ring growing to 4px on focus, held at 2px while pressed. All of it is disabled under `prefers-reduced-motion: reduce`.
## Properties
Controlled value. Defaults to the provider's `input` state.
Change handler. Defaults to the provider's `setInput`.
Submit handler. Defaults to the provider's `send()`.
Overrides the provider's loading state.
The animated rainbow border and sparkle treatment. Off by default.
Overrides the glow palette with your own list of colors.
Maximum number of rows the textarea may grow to before it scrolls.
Defaults to `"Ask AI Assistant..."`.
Accessible name for the textarea. Defaults to `"Ask a question"`.
All other native textarea attributes (except the controlled `value`/`onChange`/`onSubmit`) pass through, and the ref forwards to the textarea element.