Skip to content

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

Free

Contact Fields with Icons Input Group for Ark UI

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

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 React, Ark UI does not read the icon as the field's name.

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

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Email address"
      placeholder="Email address"
      type="email"
    />
    <InputGroupAddon>
      <MailIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="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