shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Textarea
Rich Text Toolbar Input Group for React
A textarea with bold, italic, underline, link and list buttons in a toolbar above it.
Framework
UI library
A formatting toolbar on top of a textarea: Bold, Italic, Underline, Link and List as ghost icon buttons in a bordered block-start addon. They show the layout; the formatting is yours to wire.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How is the toolbar placed above the text?
An InputGroupAddon with align="block-start" and border-b, written after the textarea.
Do the buttons format the text?
No. A textarea holds plain text: insert Markdown around the selection, or use a rich text editor in the frame.
How do I show active formats?
Use a Toggle Group with multiple selection for the format buttons, which tracks which are on.
Related
- Textarea with Toolbar Input GroupA textarea with bold, italic and
- Code Editor Input GroupA code box with a file name and refresh
- Character Counter Input Group (Textarea)A message textarea with its 500-character
- Chat Input Input GroupA chat message box with an emoji button
- Textarea with Actions Input GroupA message textarea with a Submit button
- Basic Button GroupThree rows of outline buttons joined into