shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Label
Label with Tooltip Input Group for React
An email input with its label and a help tooltip in a header row.
Framework
UI library
A label with a short explanation one hover away. The header row holds the Email Label and, at its end, a round info button that opens a Tooltip: We'll use this to send you notifications.
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
What's in the header row?
A block-start addon with the Label and the info button; ms-auto sends the button to the end.
How is the info button tied to the tooltip?
TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.How is the info button styled?
A ghost InputGroupButton with size="icon-xs" and pill, named Help with aria-label; the icon is aria-hidden.
Related
- Inline Labels Input GroupA username input after an @ label and a
- Block Labels Input GroupAn input and a textarea, each with its
- Label with Counter Input GroupA title input with its label and a
- Simple Info Tooltip Hover CardA help icon beside a label that opens a
- Simple TooltipAn outline button that shows a one-line
- Input with LabelA text input with a label above it