...
The standard appearance of the input field.
[example image]
Hover State
The appearance when the user hovers over the input field.
[example image]
Active State
The appearance when the input field is clicked or pressed.
[example image]
Disabled
How the input field appears when it's not interactive.
[example image]
Focused State
The appearance when the input field is focused, usually via keyboard navigation.
[example image]
Error
The appearance of the input field when the user enters invalid or no value.
[example image]
Input States
Typed
The appearance of the input field changes when the user has entered the value.
[example image]
Not Typed
The appearance of the input field when the field is empty and has a placeholder text.
[example image]
Icon Presence/Location
Input field with icon
...