Skip to content

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

Free

Label with Tooltip Input Group for React

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

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 React, Base UI does not treat the tooltip as the field's description while it is closed.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupInput
    id="input-group-tooltip-email"
    placeholder="shadcn@vercel.com"
    type="email"
  />
  <InputGroupAddon align="block-start">
    <Label className="text-foreground" htmlFor="input-group-tooltip-email">
      Email
    </Label>
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <InputGroupButton
              aria-label="Help"
              className="ms-auto"
              pill
              size="icon-xs"
              variant="ghost"
            />
          }
        >
          <InfoIcon aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>
          <p>We&apos;ll use this to send you notifications</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </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 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.

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

No extra props in this demo. The rest is on the Tooltip page.

All 39 input group examples