Composer
A message field that grows with what you type, and a send button beside it.
Examples
Composer
Anatomy
form.composer | Two columns: the field takes the space, the button sits at the end, aligned to the bottom as the field grows. |
> textarea.input | Grows with its content up to eight lines, then scrolls. rows="1" starts it at one line. |
> .btn | Send. Usually primary and icon-only (data-icon). |
Accessibility
- The placeholder is not a label. Give the
<textarea>anaria-label("Message") or a visible<label>. - The icon-only send button needs an
aria-label. - Growing relies on
field-sizing: content; browsers without it keep therowsheight and scroll.
| Key | Effect |
|---|---|
| Enter | Inserts a new line. Sending on Enter is up to your script. |
| Tab | Moves from the field to the send button. |