shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Icons
Contact Fields with Icons Input Group for React
Email and phone inputs, each with an icon at its start.
Framework
UI library
Contact fields people recognize at a glance: a mail icon before the email input and a phone icon before the phone input. Each icon is a default inline-start addon written after its input, and type gives each field the right keyboard on mobile.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
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.
Related
- Search with Icon Input GroupA search input with a magnifying glass at
- Dual Icons Input GroupA card number and a password input, each
- Email InputAn email field with a mail icon inside it
- Phone InputA phone number field with a phone icon
- Simple Text Input FormA form with one username text input that
- Input with LabelA text input with a label above it