Skip to content

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

Free

AI with Attachments Input Group for Ark UI

A prompt box with an attach menu, the label GPT-4, and a send button in a row under the textarea.

A task prompt with a footer. A file button opens Attach File and Attach Image. GPT-4 is plain text at the end of the row, and a round send button follows it. None of those controls change the prompt.

Use it when people attach a file before they send. A drop zone of its own is File Upload. In React, Ark UI does not store the chosen file.

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

Anatomy

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

Usage

<div className="flex w-full max-w-2xl flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupTextarea
      aria-label="Task"
      placeholder="Describe your task..."
    />
    <InputGroupAddon align="block-end">
      <DropdownMenu positioning={{ placement: "top-start" }}>
        <DropdownMenuTrigger asChild>
          <InputGroupButton
            aria-label="Attach"
            size="icon-xs"
            variant="ghost"
          >
            <FileIcon aria-hidden="true" />
          </InputGroupButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuItem value="file">
              <FileIcon aria-hidden="true" />
              Attach File
            </DropdownMenuItem>
            <DropdownMenuItem value="image">
              <ImageIcon aria-hidden="true" />
              Attach Image
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <InputGroupText className="ms-auto">GPT-4</InputGroupText>
{/* The rest of the file is under Installation. */}

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 takes asChild, so the InputGroupButton itself is the trigger. The menu opens above the row. positioning on DropdownMenu sets placement to top-start. 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.

API Reference

Input Group

Sets aria-label="Task", placeholder="Describe your task...", 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-start, asChild, value="file" and value="image". The rest is on the Dropdown Menu page.

All 39 input group examples