Input
Input fields allow users to enter text, numbers, and other data. They are fundamental form elements that must be clear, accessible, and provide appropriate feedback. Each input can include labels, supporting text, and icons to enhance usability and guide users.
Sizes
Inputs are available in two sizes: Large (48px) and Small (40px).
States
Inputs automatically adapt their appearance based on interaction state.
1. Default State
The initial state when the input is empty and not focused.
- • Border: gray-300 (#D2D6DA)
- • Background: white
- • Placeholder: gray-500 (#A5AEB5)
2. Filled State
When the input contains a value.
- • Border: gray-900 (#0D161F)
- • Text: gray-900 (#0D161F)
3. Focused State
When the user is actively typing or the input has focus.
- • Border: gray-900 (#0D161F)
- • Smooth transition animation
4. Error State
When the input has a validation error.
- • Border: red-500
- • Supporting text: red-600
- • Used for validation feedback
Please enter a valid email address
Password must be at least 8 characters
5. Disabled State
When the input is not interactive.
- • Opacity: 50%
- • Cursor: not-allowed
- • Background: gray-50
With Labels
Inputs can include labels to clearly identify their purpose.
With Supporting Text
Supporting text provides additional context or instructions.
Choose a unique username for your account
Must be at least 8 characters with a mix of letters and numbers
Include the full URL starting with https://
With Badges
Badges can be added next to labels to indicate field status or importance.
This field is required to continue
Try our new referral program
This feature is currently in beta
With Text Buttons
Text buttons provide quick actions related to the input field, positioned on the right side of the label.
Didn't receive the code?
Use AI to generate title from keywords
With Icons
Icons can be placed on the left or right side to enhance clarity.
Left Icons
Right Icons
Both Left and Right Icons
Interactive Example: Password Toggle
A common pattern using icons for password visibility toggle.
Click the eye icon to toggle visibility
Complete Form Example
A full form demonstrating various input configurations with validation.
Enter your first and last name
We'll never share your email
Must be at least 8 characters with a mix of letters and numbers
Your personal or company website
Input Types
Different HTML5 input types for specific data formats.
Best Practices
When to Use
- • Text: For single-line text entry
- • Email: For email addresses with built-in validation
- • Password: For sensitive information that should be masked
- • Number: For numeric values with increment/decrement controls
- • Tel: For phone numbers with appropriate mobile keyboard
- • URL: For web addresses with validation
- • Date/Time: For date and time selection with native pickers
- • Search: For search functionality with clear button
Guidelines
- • Always provide clear labels for inputs
- • Use placeholder text to show examples, not as labels
- • Use supporting text for helpful hints or requirements
- • Use appropriate input types for better mobile experience
- • Use icons to enhance clarity, not replace labels
- • Use badges to indicate field importance (Required/Optional)
- • Use text buttons for quick actions like Clear, Show/Hide, Resend
- • Text buttons can include icons (16px) with 4px gap
- • Show error state immediately for validation feedback
- • Ensure sufficient contrast for accessibility
- • Group related inputs together in forms
- • Provide immediate feedback for validation errors
Accessibility
- • Labels are automatically associated with inputs
- • Supporting text is linked via aria-describedby
- • Disabled state uses aria-disabled
- • Focus states are clearly visible
- • Keyboard navigation works properly
- • Color contrast meets WCAG standards