Skip to content

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

Free

Label with Tooltip Input Group for Vue

An email field whose header has the Email label and an info button about notification mail.

UI library: Ark UI

The header holds the Email label and a round info button. The tooltip says the address is used to send notifications. Clicking Email focuses the field.

Use it when the label needs one extra sentence that should not sit in the form all the time. A note that opens in place is a Hint. In Vue, Ark UI does not treat the tooltip as the field's description while it is closed.

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
    id="input-group-tooltip-email"
    placeholder="shadcn@vercel.com"
    type="email"
  />
  <InputGroupAddon align="block-start">
    <Label class="text-foreground" htmlFor="input-group-tooltip-email">Email</Label>
    <Tooltip>
      <TooltipTrigger :asChild="true">
        <InputGroupButton
          aria-label="Help"
          class="ms-auto"
          :pill="true"
          size="icon-xs"
          variant="ghost"
        >
          <InfoIcon aria-hidden="true" />
        </InputGroupButton>
      </TooltipTrigger>
      <TooltipContent><p>We'll use this to send you notifications</p></TooltipContent>
    </Tooltip>
  </InputGroupAddon>
</InputGroup>

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 takes asChild, so the InputGroupButton itself is the trigger.

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.

How is the label tied to the input?

htmlFor on Label matches the input's id.

When does the tooltip open?

On hover and on keyboard focus of the button. Escape closes it. Touch screens have no hover, so don't put anything essential only in the tooltip.

Is the tooltip text announced?

It becomes the button's description while it's open. For a note everyone must read, use a description under the field instead.

API Reference

Input Group

Sets id="input-group-tooltip-email", placeholder="shadcn@vercel.com", type="email", align="block-start", aria-label="Help" and pill. The rest is on the Input Group page.

Label

Sets htmlFor="input-group-tooltip-email". The rest is on the Label page.

Tooltip

Sets asChild. The rest is on the Tooltip page.

All 39 input group examples