Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Icons

Multiple Icons Input Group for React

A password and an API key input with two icons at their end, and a key icon at the start of the second.

Framework
UI library

Several cues on one field. Two inline-end addons line up after the password input, an eye and a refresh icon; the API key field adds a key icon at its start. The icons are decorative; use buttons when they should do something.

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 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.

All 39 input group examples