shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Buttons
Multiple Action Buttons Input Group for React
A read-only link with an info button and a favorite button that fills its heart when pressed.
Two actions at the end of one field. Each is its own inline-end InputGroupAddon after the input: an info button and a favorite button whose heart fills when it's on. The favorite button reports its state with aria-pressed.
Preview
Installation
FAQ
Why are the two buttons in separate addons?
Each InputGroupAddon with align="inline-end" is placed after the input, in source order, so two addons line up at the end. One addon holding both buttons works too.
How does the heart fill?
A favorited flag toggles on each press, and the icon gets fill-current while it's on, so the heart fills with the text color.
How do screen readers know the favorite is on?
The button sets aria-pressed from the same flag, so it's announced as a toggle button, pressed or not pressed. Its name stays Favorite.
What does the info button do?
Nothing in the demo. Open a Tooltip or a Popover from it, as in API Key Info.
Related
- Copy Button Input GroupA read-only link with a copy button that
- Search Button Input GroupA search input with a labeled Search
- Password Actions Input GroupA password input with a show/hide button
- AI Prompt Input Input GroupAn AI prompt box with a mode menu, a
- Textarea with Actions Input GroupA message textarea with a Submit button
- AI with Attachments Input GroupAn AI prompt box with an attachment menu