Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input Group - API Key Info
A React API key input with info icon tooltip explaining where to find the key built with shadcn/ui InputGroup and Tooltip
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users struggle finding API keys or tokens for integrations. This React input adds InfoIcon button with Tooltip showing Found in your account settings on hover providing clear location guidance. Built with shadcn/ui InputGroup with password type and ghost icon-xs button, it's perfect for API integrations, third-party connections, developer settings, authentication forms, or any technical input where users need direction to retrieve required credentials without navigating away from the form.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Password Requirements
Tooltip with password rules
Help Tooltips
Tooltip with privacy reassurance
Copy Button
Input with copy functionality
Password Actions
Password with visibility toggle
Standard Input
Basic input without tooltip
Basic Tooltip
Standalone tooltip component
Questions you might have
React Input Group - Help Tooltips
A React email input with help circle icon tooltip providing privacy reassurance built with shadcn/ui InputGroup and Tooltip components
React Input OTP - Auto-submit OTP
A React OTP input that automatically submits the form when all 6 digits are entered using shadcn/ui InputOTP with React Hook Form