Skip to content

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

Free

API Key Info Input Group for Ark UI

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, Ark 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">
    <Tooltip>
      <TooltipTrigger asChild>
        <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