Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Textarea

Chat Input Input Group for React

A chat message box with an emoji button, a character limit and a Send button in its footer.

Framework
UI library

A chat composer: a textarea, then a bordered footer with an emoji button, a 0/2000 count and a Send button with a send icon. All the footer parts share one block-end addon.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the footer laid out?

One InputGroupAddon with align="block-end" and border-t. The emoji button comes first, ms-auto sends the count to the end and ms-2 spaces Send from it.

What does the emoji button do?

Nothing in the demo. It's an icon-only InputGroupButton named Emoji; open a picker from it.

How is Send built?

InputGroupButton with size="sm" and variant="default", its icon after the text with data-icon="inline-end".

How do I send on Enter?

Handle the key down on the textarea: on Enter without Shift, prevent the newline and send. Shift+Enter keeps its new line.

Does 0/2000 count characters?

No, it's fixed text. Render the value's length and set maxLength={2000} on the textarea.

How is the textarea labeled?

aria-label="Message".

All 39 input group examples