shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Tooltip
Password Requirements Input Group for React
A password and a confirm password input, each with an info tooltip that states its rule.
Framework
UI library
Rules next to the fields they apply to: each of the two password inputs has an info button whose Tooltip states its rule, at least 8 characters for the first and the same password for the second.
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 each info button tied to its tooltip?
TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.How are the two buttons told apart?
Their aria-labels, Password requirements and Confirm password requirements.
Should the rules be in a tooltip?
Only as a hint. Rules people must meet are better shown under the field, where touch users and screen readers find them without hovering.
Does the form check the rules?
No. Validate the length and that both fields match, and show an error under the field that fails.
Related
- Help Tooltips Input GroupAn email input with a help button whose
- API Key Info Input GroupAn API key input with an info button
- Password Actions Input GroupA password input with a show/hide button
- Password Strength Validation FormA password that needs 8 characters with
- Required Field InputA required field with an asterisk in its
- Simple TooltipAn outline button that shows a one-line