Input Field Components Demo
Showcasing the Untitled UI input field components including text inputs, textareas, telephone inputs, and checkboxes.
Basic Examples
Email
Password*
With Leading Icons
Email Address
Search
Full Name*
Phone Number
With Hint Text
Username*
Must be at least 3 characters long
Current Password
We'll never share your password with anyone
Email with Privacy Link
We value your privacy. See our privacy policy.
Size Variants
Small (sm)
Email
Location
This helps us provide better recommendations
Medium (md) - Default
Email
Location
This helps us provide better recommendations
States
Default State
Filled State
Disabled State
Disabled with Icon
This field is currently unavailable
Complex Examples
Work Email*
We'll use this to send you important updates
Secure Password*
Must contain at least 8 characters, 1 uppercase, 1 lowercase, and 1 number
Custom Width
Full Width Example
This input field has been given a custom width using className
Narrow Width
UtTextAreaField Component
Multi-line text input with various resize options and configurations.
Basic Examples
Message
Description*
Please be as detailed as possible
Resize Options
No Resize
Resize is disabled
Vertical Resize Only
Can resize vertically only (default)
Horizontal Resize Only
Can resize horizontally only
Both Directions
Can resize in both directions
States
Default State
Filled State
Disabled State
This field is currently unavailable
Required Field*
This field must be filled out
Custom Configuration
Custom Width & Max Height
This textarea has a custom width and is limited to 5 lines maximum height
Feedback Form*
Your feedback helps us improve our products and services
Feedback with Links
Your feedback helps us improve. Read our community guidelines for more info.
UtTelephoneInputField Component
Specialized phone number input with built-in validation using libphonenumber-js.
Basic Examples
Phone Number
Mobile Number*
We'll use this for SMS notifications
Size Variants
Small (sm)
Contact Number
Emergency Contact*
24/7 reachable number
Medium (md) - Default
Business Phone
Home Phone
Optional field
Input Examples
US Phone Number
Accepts numbers, spaces, parentheses, hyphens, and plus sign
International Number
Supports international formats
Simple Phone Input
You can enter just numbers without formatting
States
Default State
Filled State
Disabled State
Required Field*
Please provide a valid phone number
Custom Configuration
Custom Width Phone
This field has custom width styling
Contact Form Phone*
We'll only use this to contact you about your inquiry
International Format Examples
US Number
US format example
UK Number
UK format example
German Number
German format example
Australian Number
Australian format example
UtCheckbox Component
Custom checkbox component with support for labels, indeterminate state, and links within labels.
Basic Examples
States
Labels with Links
Form Examples
Account Preferences
Newsletter Subscription
Interactive Example
Create Account
Error/Destructive States
Demonstrating error states for all form components with validation styling.
Error State Examples
Email Address*
Please enter a valid email address
Password*
Password must be at least 8 characters long
Phone Number*
Please enter a valid phone number
Username*
Username is already taken
TextArea Error States
Message*
Message must be at least 10 characters long
Description
Description cannot contain special characters
Checkbox Error States
Interactive Form Validation Demo
Contact Form with Validation
Test our form validation with error states and toast notifications.
Thanks for submitting
We'll get back to you within 24 hours.