Skip to content

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

Free

Multiple Icons Input Group for Vue

A password field and a masked API key field with decorative icons, including an eye that does nothing.

UI library: Ark UI

The password field has an eye and a refresh icon at the end. The API key field adds a key at the start, then an eye with a slash and another refresh icon. Every icon is decorative. The eye does not reveal the password.

Use extra icons only as cues. An eye that should show the password is a button, which is what Password Input already includes. In Vue, Ark UI does not turn these icons into controls.

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

<div class="flex w-full max-w-sm flex-col gap-4">
  <InputGroup class="bg-background">
    <InputGroupInput aria-label="Password" placeholder="Enter password" type="password" />
    <InputGroupAddon align="inline-end">
      <EyeIcon aria-hidden="true" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <RefreshCwIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup class="bg-background">
    <InputGroupInput aria-label="API key" placeholder="API key" type="password" />
    <InputGroupAddon><KeyIcon aria-hidden="true" /></InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <EyeOffIcon aria-hidden="true" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <RefreshCwIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
</div>

FAQ

How do two icons sit at the end?

Two InputGroupAddons with align="inline-end", in source order after the input.

How does the key icon sit at the start of the second field?

Its addon keeps the default inline-start, which places it before the input.

Can the eye show the password?

Not as an icon. Make it an InputGroupButton that switches the type, as in Password Actions.

Are the icons announced?

No, they're aria-hidden. The inputs have aria-labels, Password and API key.

Why is the API key a password input?

type="password" masks a secret on screen. Pair it with a show button if people need to check it.

What happens when someone clicks an icon?

A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.

API Reference

Input Group

Sets aria-label="Password", placeholder="Enter password", type="password", align="inline-end", aria-label="API key" and placeholder="API key". The rest is on the Input Group page.

All 39 input group examples