shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Custom
Textarea with Actions Input Group for React
A message textarea with a Submit button under it.
A textarea with its action attached: the Submit button sits in a block-end InputGroupAddon under the text, pushed to the end with ms-auto, so the field and its action read as one control.
Preview
Installation
FAQ
How does the button end up under the textarea?
align="block-end" on the InputGroupAddon, which is written after InputGroupTextarea. Block-end addons span the full width under the control.
Why is Submit on the right?
ms-auto on the InputGroupButton takes the free space before it. It's a logical margin, so in a right-to-left layout the button moves to the left.
Does Submit submit a form?
Not by itself: InputGroupButton is type="button" by default. Put the group in a form and set type="submit" on the button.
Can I add more buttons to the row?
Yes. Put them before Submit in the same addon; ms-auto keeps Submit at the end.
How is the textarea labeled?
With aria-label="Message", since there's no visible label. Use a visible one when the context doesn't make the field obvious, as in Textarea with Label.
Related
- AI Prompt Input Input GroupAn AI prompt box with a mode menu, a
- Simple AI Prompt Input GroupAn AI prompt box with an enhance button
- Search Button Input GroupA search input with a labeled Search
- Textarea with Counter Input GroupA message textarea with a 500-character
- Two Field FormA two-field contact form for a name and
- Input with LabelA text input with a label above it