This component almost always it works with Label & Placeholder atoms and usually it is combined with other atoms like HelpText or Buttons.
Inputs have a flexible length that is adjustable to the grid of the page, except in a few cases where the length is fixed(see the Content cases below).
The default size for inputs is Medium. Small size will be used only in a few cases
Example: Filters in a left side column usually use the Small size.
As an optional feature, the structure can contain a fixed icon or addons(left or right side) that visually indicates its contents or help the user understand and complete the input(see the Content cases below).
Those are the 2 sizes of the Input field, combined with Label and Placeholder atoms
Behavior
States
Inputs have the 3 basic states: default, focused and disabled.
Should be noted that Placeholder atom disappear when the Input is on focus status. This behavior helps the user understand that the field is ready to write on it.
For the first iteration, the focus will be the native Browser focus.
Input states combined with Label and Placeholder atoms
Combined with buttons
When an Input is used in combination with buttons, they are always placed to the right of the input, and in responsive adaptation the order can never be changed.
Remember: the button size will always adapt itself to the input size.
Content
We recommend to always use a Placeholder atom that indicates what users are being asked.
Fixed inputs
There are specific cases where the length of the input is not flexible and has a fixed length, as the following cases. The length it is calculated adding a fix margin to the left & right side of the content.
Different types of content:
Date field
We will use the native browser date field
Postal Code
Bank account(1 input box with spaces/scripts between the blocks of numbers)
The code of this input, must be ready to accept the variations in the Country parameters or credit cards types variations.
Password is an exception, that adds a new element:
Definition metadata
Structure
Behavior
States
Combined with buttons
Content
Fixed inputs