Skip to content

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

Free

Help Tooltips Input Group for React

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

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 React, Base UI does not put that sentence into the field.

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
    aria-label="Email address"
    placeholder="Email address"
    type="email"
  />
  <InputGroupAddon align="inline-end">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <InputGroupButton
              aria-label="Help"
              size="icon-xs"
              variant="ghost"
            />
          }
        >
          <HelpCircleIcon aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>
          <p>We'll never share your email</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the help button tied to the tooltip?

TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.

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

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

All 39 input group examples