Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Textarea

Code Editor Input Group for React

A code box with a file name and refresh button above it and the cursor position and a Run button below it.

Framework
UI library

An editor frame around a plain textarea: a header with the file name script.js and a refresh button, and a footer with Line 1, Column 1 and a Run button. Both rows are bordered addons, block-start and block-end.

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

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.

All 39 input group examples