Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Help Tooltips Input Group for Vue

An email address field with a help button whose tooltip says the address will not be shared.

UI library: Ark UI

An email field with a help button at the end. The tooltip reads We'll never share your email. The button is named Help, and the icon is hidden from assistive tech.

Use it for a one-line reassurance on a sensitive field. A hover note that stays in the same parent is a Hint. In Vue, Ark UI does not put that sentence into the field.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupInput aria-label="Email address" placeholder="Email address" type="email" />
  <InputGroupAddon align="inline-end">
    <Tooltip>
      <TooltipTrigger :asChild="true">
        <InputGroupButton aria-label="Help" size="icon-xs" variant="ghost">
          <HelpCircleIcon aria-hidden="true" />
        </InputGroupButton>
      </TooltipTrigger>
      <TooltipContent><p>We'll never share your email</p></TooltipContent>
    </Tooltip>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the help button tied to the tooltip?

TooltipTrigger takes asChild, so the InputGroupButton itself is the trigger.

What is the button called?

Help, from its aria-label. The question-mark icon is aria-hidden.

When does the tooltip open?

On hover and on keyboard focus of the button; Escape closes it.

Does it work on phones?

Not by hover. For privacy notes people must see, put the sentence under the field as a description.

How is the input set up?

type="email" with aria-label="Email address".

Where does the button sit?

In an inline-end InputGroupAddon after the input.

API Reference

Input Group

Sets aria-label="Email address", placeholder="Email address", type="email", align="inline-end", aria-label="Help" and size="icon-xs". The rest is on the Input Group page.

Tooltip

Sets asChild. The rest is on the Tooltip page.

All 39 input group examples