Input Group
Combine inputs with prefix and suffix elements for enhanced functionality.
Search Input
A common search pattern with icon prefix.
Email Input
Email field with trailing icon indicator.
URL Input
Website URL with protocol prefix.
https://
Currency Input
Price input with currency symbol and unit.
USD
Password Input
Password field with visibility toggle button.
Copy to Clipboard
Readonly input with copy action button.
Phone Number
Phone input with country code selector.
+1
Username Input
Social handle or username input.
Credit Card
Payment card number input.
Date and Time
Inputs with date and time icons.
Percentage and Hash
Inputs with trailing symbols.
With Button
Input combined with an action button.
Disabled State
Input group in disabled state.
USD
Billing Form
A real-world example showing input groups in a billing form.
https://
$
%