Skip to content

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

Free

Textarea with Dropdown Input Group for Vue

A message textarea with a Format menu for Plain Text, Markdown, and HTML, plus a Send button.

UI library: Ark UI

A footer under the textarea, with a line above the row. Format opens Plain Text, Markdown, and HTML. Send sits at the end. Picking Markdown does not change the Format label or the text.

Use it when one box can send more than one format. Keep the choice in state if the label should update. A box with no format menu is a Textarea. In Vue, Ark UI does not remember the format.

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

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupTextarea
    aria-label="Message"
    class="min-h-[100px]"
    placeholder="Write your message..."
  />
  <InputGroupAddon align="block-end" class="border-t">
    <DropdownMenu :positioning='{ placement: "bottom-start" }'>
      <DropdownMenuTrigger :asChild="true">
        <InputGroupButton size="sm" variant="ghost">
          Format<ChevronDownIcon aria-hidden="true" class="size-3" />
        </InputGroupButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem value="plain-text">Plain Text</DropdownMenuItem>
          <DropdownMenuItem value="markdown">Markdown</DropdownMenuItem>
          <DropdownMenuItem value="html">HTML</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
    <InputGroupButton class="ms-auto" size="sm" variant="default">
      Send
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the bottom row built?

One InputGroupAddon with align="block-end" and border-t, after the textarea. It holds the Format menu and the Send button, which ms-auto pushes to the end.

How is the Format button wired to the menu?

An InputGroupButton with size="sm" and a small chevron. DropdownMenuTrigger takes asChild, so the InputGroupButton itself is the trigger.

Where does the menu open?

Below the button, aligned to its start. positioning on DropdownMenu sets placement to bottom-start.

Does picking Markdown change anything?

No. Store the format in state, show it in the trigger and use it when you render the message.

What draws the line above the row?

border-t on the addon. The group adds matching padding to bordered addons.

How is the textarea labeled?

With aria-label="Message", since there's no visible label.

API Reference

Input Group

Sets aria-label="Message", placeholder="Write your message...", align="block-end", size="sm", variant="ghost" and variant="default". The rest is on the Input Group page.

Dropdown Menu

Sets positioning="{ placement: bottom-start }", asChild, value="plain-text", value="markdown" and value="html". The rest is on the Dropdown Menu page.

All 39 input group examples