Skip to content

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

Free

API Key Info Input Group for React

A masked API key field with an info button. The tooltip says the key is in account settings.

The API key field is masked. An info button at the end opens a tooltip that reads Found in your account settings. The button is named Where to find your API key.

Put the hint on the field when people keep asking where a value comes from. A longer explanation belongs in a Dialog. In React, Base UI does not copy the tooltip text 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="API key"
    placeholder="API key"
    type="password"
  />
  <InputGroupAddon align="inline-end">
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger
          render={
            <InputGroupButton
              aria-label="Where to find your API key"
              size="icon-xs"
              variant="ghost"
            />
          }
        >
          <InfoIcon aria-hidden="true" />
        </TooltipTrigger>
        <TooltipContent>
          <p>Found in your account settings</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the info button tied to the tooltip?

TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.

What is the button called?

Where to find your API key, from its aria-label; the icon is aria-hidden.

When does the tooltip show?

On hover and keyboard focus of the button. Escape closes it. Touch screens don't hover, so keep essential help visible.

Why is the key masked?

type="password" hides a secret from people looking at the screen. Add a show button if people need to check it.

Where is the button?

In an inline-end InputGroupAddon after the input.

How is the input labeled?

aria-label="API key".

API Reference

Input Group

Sets aria-label="API key", placeholder="API key", type="password", align="inline-end", aria-label="Where to find your API key" 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