Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · AI

AI with Attachments Input Group for React

An AI prompt box with an attachment menu, the model name and a send button under the textarea.

Framework
UI library

A prompt box for an assistant that takes files. Under the textarea, a file button opens a Dropdown Menu with Attach File and Attach Image, the model name GPT-4 sits at the end of the row, and a round send button follows it. The row is a block-end InputGroupAddon.

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 attachment menu and send button under the prompt?

Write one InputGroupAddon with align="block-end" after InputGroupTextarea. It holds the file menu, the GPT-4 text and the send button, and ms-auto on the text pushes it and the button to the end.

How is the Attach File and Attach Image menu built?

The trigger is an icon-only InputGroupButton named Attach. DropdownMenuTrigger renders the InputGroupButton through render. The menu opens above the row. side="top" and align="start" on DropdownMenuContent place it. Each item has its icon before the text.

How is the send button styled?

A filled InputGroupButton with variant="default", size="icon-xs" and pill, showing an arrow. aria-label="Send" names it. It has no action in the demo: submit the prompt from it.

Is GPT-4 a menu or a label?

A label: InputGroupText with fixed text. To let people pick a model, put a menu there instead, as in AI with Voice.

Does choosing Attach File change the trigger?

No. The items have no action and nothing is stored. Open a file picker from each item and show the chosen files above the textarea.

Does clicking the bottom row 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