Components / Composer

Composer

The "message Elle" input: one auto-growing textarea that renders as a pill on a single line and expands to a rounded multi-line form the moment the text stops fitting. Enter sends; Shift+Enter adds a newline.

import { Composer } from '@layers/ui/composer'

Rendered stock

House rules

• In-app, the composer stays on the standard 14px scale. The 16px input exception is marketing-only: the hero composer uses literal text-[16px] so mobile Safari does not zoom on focus for prospective signups.
• sendDisabled blocks only sending while typing stays live; disabled kills the whole composer. Pass onStop while the agent is busy so the send button morphs into a stop button instead of merely disabling.
• Return false from onSubmit to keep the text in the field (for example a URL that failed validation) instead of clearing it.
• Inputs that only ever take text set showAttach={false}; use leadingIcon to keep the text off the rounded left edge.