Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React URL Input
A React URL input with Link icon using HTML5 url type featuring absolute positioned icon, pl-9 padding, and protocol helper text using shadcn/ui Input
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Website links need validation—this React URL input uses HTML5 type url with Link icon from Lucide React positioned absolutely inside and helper text specifying Include https:// or http://. Built with shadcn/ui Input and Label components featuring relative container wrapper, left-3 icon positioning, pl-9 input padding, placeholder https://example.com format example, and text-muted-foreground text-xs protocol requirement below. The url-type input with protocol guidance creates valid links—perfect for profile websites, portfolio links, social media URLs, or anywhere collecting web addresses with browser validation ensuring proper format.
Include https:// or http://
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Email Input
Email with validation
Phone Input
Phone with format guidance
Profile Edit Form
Profile with website field
Standard Input
Basic text input
Link Preview
Preview for URLs
Link Button
Link styled as button
Questions you might have
React Phone Input
A React phone input with Phone icon using HTML5 tel type featuring absolute positioned icon, pl-9 padding, and format helper text using shadcn/ui Input
React Input - Error State
A React email input with error state showing red destructive text, AlertCircle icon, and aria-invalid attribute using shadcn/ui Input