Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · AI

AI with Voice Input Group for React

An AI prompt box with attach and voice buttons, a model menu and a send button under the textarea.

Framework
UI library

A prompt box that also takes voice and files. Under the textarea are an attach button, a microphone button, a Claude 3.5 model Dropdown Menu pushed to the end, a short divider and a round send button. The buttons are placeholders for your recording and upload logic.

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

What sits under the prompt in this input?

One InputGroupAddon with align="block-end", written after InputGroupTextarea: the paperclip button, the mic button, the model menu, a vertical Separator and the send button.

What do the paperclip and mic buttons do?

Nothing yet: they're ghost, icon-only InputGroupButtons named Attach and Voice input. Start your file picker or recording from them.

How is the Claude model menu built?

The trigger is an InputGroupButton labeled Claude 3.5, with ms-auto so it and everything after it sit at the end. DropdownMenuTrigger renders the InputGroupButton through render. The menu opens above the row, aligned to the end. side="top" and align="end" on DropdownMenuContent place it. The label doesn't change when you pick a model: keep the choice in state and render it in the trigger.

What is the short line before the send button?

A Separator with orientation="vertical" and h-4!, which keeps it shorter than the row.

How is the send button styled?

A filled, round InputGroupButton: variant="default", size="icon-xs" and pill, with an arrow icon and aria-label="Send".

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