Skip to content

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

Free

API Key Info Input Group for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not copy the tooltip text 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="API key" placeholder="API key" type="password" />
  <InputGroupAddon align="inline-end">
    <Tooltip>
      <TooltipTrigger :asChild="true">
        <InputGroupButton
          aria-label="Where to find your API key"
          size="icon-xs"
          variant="ghost"
        >
          <InfoIcon aria-hidden="true" />
        </InputGroupButton>
      </TooltipTrigger>
      <TooltipContent><p>Found in your account settings</p></TooltipContent>
    </Tooltip>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the info button tied to the tooltip?

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

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

Sets asChild. The rest is on the Tooltip page.

All 39 input group examples