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.
Search Input
A React search input with Search icon using HTML5 search type featuring absolute positioned icon with translate-y-1/2 and pl-9 padding 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