Shadcn.io is not affiliated with official shadcn/ui
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
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.
URL Input preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Error State
A React email input with error state showing red destructive text, AlertCircle icon, and aria-invalid attribute using shadcn/ui Input