Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Custom

Textarea with Toolbar Input Group for React

A textarea with bold, italic and underline buttons above it and a Submit button under it.

Framework
UI library

A light formatting toolbar for a plain textarea. Three ghost icon buttons sit in a block-start addon with a bottom border, and Submit sits in a block-end addon. The buttons only show the layout: formatting needs your own editor logic.

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 do the format buttons sit above the text?

They share one InputGroupAddon with align="block-start" and border-b, which becomes a header row with a divider.

How are the icon buttons named?

Each InputGroupButton has an aria-label: Bold, Italic and Underline. The icons are aria-hidden.

Do the buttons format the text?

No. A textarea holds plain text, so they'd insert Markdown around the selection, or you'd switch to a rich text editor.

How do I show which formats are on?

Use a Toggle Group for the buttons, which tracks the pressed state for you.

Where is the Submit button?

In a block-end addon under the textarea, pushed to the end with ms-auto.

How is the textarea labeled?

With aria-label="Content"; add a visible label if the purpose isn't clear from context.

All 39 input group examples