shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Dropdown
Textarea with Dropdown Input Group for React
A message textarea with a Format menu and a Send button under it.
A composer that asks for the format of what's written: under the textarea, a Format Dropdown Menu offers Plain Text, Markdown and HTML, and Send sits at the end. The row is a block-end addon with a top border.
Preview
Installation
FAQ
How is the bottom row built?
One InputGroupAddon with align="block-end" and border-t, after the textarea. It holds the Format menu and the Send button, which ms-auto pushes to the end.
How is the Format button wired to the menu?
An InputGroupButton with size="sm" and a small chevron. DropdownMenuTrigger renders the InputGroupButton through render.
Where does the menu open?
Below the button, aligned to its start. align="start" on DropdownMenuContent place it.
Does picking Markdown change anything?
No. Store the format in state, show it in the trigger and use it when you render the message.
Related
- Dropdown Actions Input GroupA file name input with a more-actions
- Search Filters Input GroupA product search with a Category menu at
- Code Editor Input GroupA code box with a file name and refresh
- Copy Button Input GroupA read-only link with a copy button that
- Simple TextareaA plain textarea with a placeholder and
- Input with LabelA text input with a label above it