Inputs Exercises
Explore hands-on “Inputs” exercises to sharpen your skills and level up your craft. Want more? Browse all search results
Exercise
Molecules
Exercise
Input mask
Exercise
Action input
Exercise
Connect error messages to their input fields
Exercise
Provide concise but meaningful helper text
Exercise
Inputs should be easy to hit
Exercise
Use progress trackers to encourage users
Exercise
Placeholders
Exercise
Border radius
Exercise
Text input
Exercise
Allow multiple login options
Exercise
Ensure labels are easier to read
Exercise
Form
Exercise
Avoid clutter and add enough spacing between elements
Exercise
Add an error summary
Exercise
Highlight matching characters for better scanning
Exercise
Date pickers
Exercise
Inputs
Exercise
Buttons
Exercise
Use a contextual primary action label
Exercise
Use standard input styling for faster recognition
Exercise
Keep the input text legible
Exercise
Required input
Exercise
Remove unnecessary fields
Exercise
Placeholder
Exercise
Provide informative placeholders
Exercise
Separate dropdowns for day, month, and year
Exercise
Sliders
Exercise
Reduce the number of user actions
Exercise
Select a label case that's easier to read
Exercise
Prevent errors with phone input masks
Exercise
Always keep labels outside of the input
Exercise
Modal date input
Exercise
Simplify search with real-time suggestions
Exercise
Use multiple cues for accessible inputs
Exercise
Input chips
Exercise
Input value
Exercise
Maintain a natural reading flow
Exercise
Use visual markers to indicate an active input
Exercise
Text area
Exercise
Use logical input grouping
Exercise
Allow users to reveal the password
Exercise
Add a currency label to remove confusion
Exercise
Use the right selection controls
Exercise
Place error messages below the input
Exercise
Prevent wrong formats with date masks
Exercise
Opt for a single-column layout
Exercise
Add enough space between inputs
Exercise
Toolbars
Exercise