shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Tooltip
API Key Info Input Group for React
An API key input with an info button whose tooltip says where to find the key.
Framework
UI library
Answer the question before it's asked: an info button at the end of the API key field opens a Tooltip, Found in your account settings. The key is masked with type="password".
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 info button tied to the tooltip?
TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.When does the tooltip show?
On hover and keyboard focus of the button. Escape closes it. Touch screens don't hover, so keep essential help visible.
Related
- Password Requirements Input GroupA password and a confirm password input
- Help Tooltips Input GroupAn email input with a help button whose
- Copy Button Input GroupA read-only link with a copy button that
- Password Actions Input GroupA password input with a show/hide button
- Input with LabelA text input with a label above it
- Simple TooltipAn outline button that shows a one-line