Skip to content

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

Free

Code Editor Input Group for Vue

A code box named script.js, with refresh above the text and Line 1, Column 1 plus Run below.

UI library: Ark UI

A tall textarea framed like a small editor. The header shows a file icon, script.js, and a refresh button. The footer shows Line 1, Column 1 and a Run button. The position does not follow the cursor, and there is no highlighting.

Use it for a short snippet someone can edit and run. If you only need the text, use a Textarea. In Vue, Ark UI does not track the cursor or highlight the code.

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="Code"
    class="min-h-[200px]"
    placeholder="console.log('Hello, world!');"
  />
  <InputGroupAddon align="block-end" class="border-t">
    <InputGroupText>Line 1, Column 1</InputGroupText>
    <InputGroupButton class="ms-auto" size="sm" variant="default">
      Run<CornerDownLeftIcon aria-hidden="true" data-icon="inline-end" />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="block-start" class="border-b">
    <InputGroupText class="font-medium font-mono">
      <FileCodeIcon aria-hidden="true" />script.js
    </InputGroupText>
    <InputGroupButton aria-label="Refresh" class="ms-auto" size="icon-xs">
      <RefreshCwIcon aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the header built?

An InputGroupAddon with align="block-start" and border-b: an InputGroupText with a file icon and script.js in font-mono, and an icon-only Refresh button pushed to the end with ms-auto.

Why is the footer before the header in the code?

Order between addons doesn't matter: align places each one. Only the textarea needs to come first.

Does Line 1, Column 1 follow the cursor?

No, it's fixed text. Compute it from the textarea's selection start on select and key events.

Is this a code editor?

It's a textarea: no syntax highlighting or tab indentation. Use it for short snippets, or put an editor library in the same frame.

How is the textarea labeled?

aria-label="Code"; the Refresh button is named by its own aria-label.

API Reference

Input Group

Sets aria-label="Code", placeholder="console.log('Hello, world!');", align="block-end", size="sm", variant="default" and align="block-start". The rest is on the Input Group page.

All 39 input group examples