Skip to content

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

Free

Dual Icons Input Group for Vue

A card number field and a password field, each with a decorative icon sitting at both ends.

UI library: Ark UI

Two fields with an icon on each side. The card field has a card icon and a lock. The password field has a lock and a help circle. None of the icons are buttons, and none of them are announced.

Use the pair when one icon names the field and the other is only a cue. If the end icon should reveal a password, use Password Input. In Vue, Ark UI does not treat these icons as 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="Card number"
      inputMode="numeric"
      placeholder="Card number"
      type="text"
    />
    <InputGroupAddon><CreditCardIcon aria-hidden="true" /></InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <LockIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup class="bg-background">
    <InputGroupInput aria-label="Password" placeholder="Password" type="password" />
    <InputGroupAddon><LockIcon aria-hidden="true" /></InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <HelpCircleIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
</div>

FAQ

How do two addons land on both sides?

The first keeps the default inline-start, the second sets align="inline-end". Both are written after the input.

How is the card number field set up?

type="text" with inputMode="numeric", which brings up the number pad without the quirks of type="number". Add autoComplete="cc-number" in a real checkout.

Are the icons buttons?

No, they're decorative and aria-hidden. To make the help circle open help, use a button, as in Help Tooltips.

How are the inputs labeled?

aria-label="Card number" and aria-label="Password".

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.

Do the icons swap sides right to left?

Yes. inline-start and inline-end follow the text direction.

API Reference

Input Group

Sets aria-label="Card number", inputMode="numeric", placeholder="Card number", type="text", align="inline-end" and aria-label="Password". The rest is on the Input Group page.

All 39 input group examples