Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Icons

Dual Icons Input Group for React

A card number and a password input, each with an icon at both ends.

Framework
UI library

An icon on each side of a field: the start one says what the field is, the end one adds a cue. The card field has a card and a lock, the password field a lock and a help circle. Both addons come after the input in the code; align places them.

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

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.

All 39 input group examples