Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - Textarea with Dropdown
A React textarea input group with Format dropdown showing Plain Text, Markdown, HTML options and Send button using shadcn/ui InputGroupTextarea
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Textarea needs format selection—this React input group combines InputGroupTextarea with Format dropdown using ChevronDownIcon from Lucide React offering Plain Text, Markdown, HTML format choices and Send action button. Built with shadcn/ui InputGroup, InputGroupTextarea, InputGroupAddon, and DropdownMenu components featuring min-h-100px textarea, align block-end addon positioning, border-t separator, size sm buttons, ml-auto Send button positioning, and ghost Format dropdown. The format-enhanced textarea with action buttons creates rich text composition—perfect for messaging apps, comment systems, content editors, or anywhere users write formatted text needing format mode selection and submission controls.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Dropdown Actions
Input with contextual actions dropdown
Search Filters
Category filter dropdown
Textarea with Buttons
Textarea with action buttons
Input with Button
Input group with action button
Standard Textarea
Basic textarea component
Standard Input
Basic text input field
Questions you might have
React Input Group - URL Builder with Dropdown
A React URL builder with protocol dropdown showing https/http and domain extension dropdown showing com/net/org/io using shadcn/ui InputGroup
React Input Group - Search with Icon
A React search input group with SearchIcon at inline-end position providing visual search affordance using shadcn/ui InputGroup components