Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · AI

AI Prompt Input Input Group for React

An AI prompt box with a mode menu, a usage indicator and a send button under the textarea.

Framework
UI library

A chat composer for an AI assistant: a growing textarea with a toolbar under it. The toolbar holds an add button, an Auto mode Dropdown Menu that opens upward, a 52% used indicator and a round send button that stays disabled until there is something to send. Everything is one InputGroup, with the toolbar as a 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 do I put the mode menu and send button under the prompt?

Put them in one InputGroupAddon with align="block-end", written after InputGroupTextarea. Block end places the addon under the textarea as a full-width row. ms-auto on the usage text pushes it, the separator and the send button to the end of the row.

How is the Auto, Agent and Manual menu built?

It's a Dropdown Menu with an InputGroupButton labeled Auto as its trigger. DropdownMenuTrigger renders the InputGroupButton through render. It opens above the toolbar. side="top" and align="start" on DropdownMenuContent place it. Picking Agent or Manual doesn't change the label: keep the mode in state and render it in the trigger.

Why is the send button round and disabled?

pill makes the icon-xs button round, and variant="default" fills it. It sets disabled. Enable it once the prompt has text. Its name is aria-label="Send", since it shows only the arrow.

What is the plus button on the left of the toolbar?

An outline, round InputGroupButton named Add context, for attaching files or other context. It has no action here: wire it to your own picker.

What does the 52% used label do?

It's an InputGroupText with fixed text. Render your real quota there. The vertical Separator next to it gets h-4! so it's a short divider rather than the row's full height.

Does clicking the toolbar focus the textarea?

A click on the addon's empty space focuses the first input in the group, and this group has a textarea, not an input, so nothing is focused. Clicks on its buttons stay on the buttons.

All 39 input group examples