About this set
Three message composers with the behaviour that makes a chat input feel right. The pill composer has an emoji button that opens a grid of eight emoji and inserts the chosen one at the caret. The attachment composer shows files as removable chips with a name and size; the paperclip opens the file picker, each chip has a Remove button named after its file, and Send stays enabled when there are files even without text. The toolbar composer is a two-line card with a mention button, a quick thumbs-up, a character count against a maxlength of 500 and a visible hint that Enter sends and Shift+Enter starts a new line. All three grow with their text up to a maximum height, keep Send disabled while there is nothing to send and append the message to a short thread above, including the names of attached files. One script of about 80 lines drives all three through data attributes, and it manages focus for you: Esc returns it to the emoji button and removing a chip moves it to the next chip.
What’s included
- Growing textarea with a maximum height
- Enter sends, Shift+Enter adds a line, safe for IME input
- Send disabled until there is text or a file
- Emoji grid and @ button that insert at the caret
- Removable attachment chips from a real file input
- Character count against maxlength with a key hint
Accessibility
Every textarea has a label, every icon button has hidden text, and the emoji buttons are named, for example Grinning face. The emoji toggle uses aria-expanded and aria-controls, Esc closes the grid and returns focus to it, and removing a chip moves focus to the next chip and announces the removal through a role="status" line. The key hint is linked to its textarea with aria-describedby, and the press effect on Send is removed under prefers-reduced-motion.
Customise it
Change --cp-accent, --cp-in and --cp-field on .cp, and max-height on .cp-input to cap the growth. In Tailwind edit the --color-cp-* theme colours and the max-h-[150px] utility; in Bootstrap the same variables sit on the .card.
