Skip to content

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

Free

Contact Fields with Icons Input Group for Vue

Email and phone fields, each with a decorative icon at the start and the matching mobile keyboard.

UI library: Ark UI

Two contact fields. A mail icon sits before the email input, and a phone icon sits before the phone input. Email gets the email keyboard. Phone gets the phone keyboard. The icons are decorative.

Use it on a contact form where the icon should say what to type. If you also need a visible caption, add a Label. In Vue, Ark UI does not read the icon as the field's name.

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="Email address" placeholder="Email address" type="email" />
    <InputGroupAddon><MailIcon aria-hidden="true" /></InputGroupAddon>
  </InputGroup>
  <InputGroup class="bg-background">
    <InputGroupInput aria-label="Phone number" placeholder="Phone number" type="tel" />
    <InputGroupAddon><PhoneIcon aria-hidden="true" /></InputGroupAddon>
  </InputGroup>
</div>

FAQ

How does the icon sit before the input?

The InputGroupAddon uses the default align, inline-start, which places it before the input, while the code keeps the input first.

Why type=email and type=tel?

They bring up the email and phone keyboards on mobile and let the browser autofill and check the email format.

Are the icons read by screen readers?

No, they're aria-hidden. The inputs carry aria-labels, Email address and Phone number.

What happens when someone clicks the 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.

How big are the icons?

The addon sizes icons without a size class to size-4.

How are the two fields spaced?

A column with flex flex-col gap-4, capped with max-w-sm.

API Reference

Input Group

Sets aria-label="Email address", placeholder="Email address", type="email", aria-label="Phone number", placeholder="Phone number" and type="tel". The rest is on the Input Group page.

All 39 input group examples