Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

AI with Voice Input Group for Svelte

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

UI library: Ark UI

A message box with a footer. Attach and a microphone sit at the start. A Claude 3.5 menu sits at the end, then a short divider and a round send button. The menu lists Sonnet, Opus, and Haiku, and the label stays Claude 3.5.

Reach for this when a prompt can be typed or spoken. A model the person should really set is a Select. In Svelte, Ark UI does not start recording from the microphone button.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<div class="flex w-full max-w-2xl flex-col gap-4"><InputGroup class="bg-background"><InputGroupTextarea aria-label="Message" placeholder="Type or speak your message..." /><InputGroupAddon align="block-end"><InputGroupButton aria-label="Attach" size="icon-xs" variant="ghost"><PaperclipIcon aria-hidden="true" /></InputGroupButton><InputGroupButton aria-label="Voice input" size="icon-xs" variant="ghost"><MicIcon aria-hidden="true" /></InputGroupButton><DropdownMenu positioning={{ placement: "top-end" }}><DropdownMenuTrigger>{#snippet asChild(props)}<InputGroupButton {...props({ class: "ms-auto text-xs" })} variant="ghost">Claude 3.5</InputGroupButton>{/snippet}</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuGroup><DropdownMenuItem value="claude-3-5-sonnet">Claude 3.5 Sonnet</DropdownMenuItem><DropdownMenuItem value="claude-3-opus">Claude 3 Opus</DropdownMenuItem><DropdownMenuItem value="claude-3-haiku">Claude 3 Haiku</DropdownMenuItem></DropdownMenuGroup></DropdownMenuContent></DropdownMenu><Separator class="h-4!" orientation="vertical" /><InputGroupButton aria-label="Send" pill size="icon-xs" variant="default"><ArrowUpIcon aria-hidden="true" /></InputGroupButton></InputGroupAddon></InputGroup><small class="text-center text-muted-foreground">For better AI components, check out{" "}<a class="underline" href="https://ai-sdk.dev/elements/overview">AI Elements</a></small></div>

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 takes an asChild snippet that renders the InputGroupButton. The menu opens above the row, aligned to the end. positioning on DropdownMenu sets placement to top-end. 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.

API Reference

Input Group

Sets aria-label="Message", placeholder="Type or speak your message...", align="block-end", aria-label="Attach", size="icon-xs" and variant="ghost". The rest is on the Input Group page.

Dropdown Menu

Sets positioning, placement, top-end, value="claude-3-5-sonnet", value="claude-3-opus" and value="claude-3-haiku". The rest is on the Dropdown Menu page.

Separator

Sets orientation="vertical". The rest is on the Separator page.

All 39 input group examples