Input group: Textarea

<InputGroupTextarea /> grows with its content up to 16rem, then scrolls. The height eases between lines instead of jumping. A block-end addon becomes a toolbar under it, and buttons at its edges get the same inset as the corner they sit in.

"use client"

import * as React from "react"
import { IconArrowUp, IconPaperclip } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupCount,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function InputGroupTextareaDemo() {
  const [value, setValue] = React.useState("")

  return (
    <InputGroup className="max-w-sm">
      <InputGroupTextarea
        value={value}
        onChange={(event) => setValue(event.target.value)}
        maxLength={280}
        placeholder="Write a reply…"
        aria-label="Reply"
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton size="icon-xs" aria-label="Attach a file">
          <IconPaperclip />
        </InputGroupButton>
        <InputGroupCount className="ms-auto" />
        <InputGroupButton
          variant="default"
          size="icon-xs"
          aria-label="Send"
          disabled={!value.trim()}
        >
          <IconArrowUp />
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Add this example

This adds the example as components/examples/input-group/textarea.tsx, together with the Input group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group-textarea.json

To add only the component, follow the Input group installation.

Props in this example

The Input group props this example sets, from the API reference.

InputGroupAddon

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`

InputGroupButton

Prop	Type	Default
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"`	`"ghost"`
`size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	`"xs"`

Every prop is in the Input group API reference.

More Input group examples

See them all, with keyboard support and accessibility notes, on the Input group page.