Skip to content

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

Free

Textarea with Toolbar Input Group for Ark UI

A textarea with Bold, Italic, and Underline above it, and a Submit button in the row below.

Three ghost icon buttons sit above the text: Bold, Italic, and Underline. A line separates them from the writing. Submit sits under the text, at the end of its row. The format buttons do not change the text, and they do not stay pressed.

Use it for a light composer with one submit. To show which formats are on, store that yourself, or use a Toggle Group. In React, Ark UI does not format the textarea.

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

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupTextarea
    aria-label="Content"
    className="min-h-[100px]"
    placeholder="Write your content..."
  />
  <InputGroupAddon align="block-start" className="border-b">
    <InputGroupButton aria-label="Bold" size="icon-xs" variant="ghost">
      <BoldIcon aria-hidden="true" />
    </InputGroupButton>
    <InputGroupButton aria-label="Italic" size="icon-xs" variant="ghost">
      <ItalicIcon aria-hidden="true" />
    </InputGroupButton>
    <InputGroupButton aria-label="Underline" size="icon-xs" variant="ghost">
      <UnderlineIcon aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="block-end">
    <InputGroupButton className="ms-auto" size="sm" variant="default">
      Submit
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

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.

API Reference

Input Group

Sets aria-label="Content", placeholder="Write your content...", align="block-start", aria-label="Bold", size="icon-xs" and variant="ghost". The rest is on the Input Group page.

All 39 input group examples