The input field is a very important component in the design system; it allows users to enter information into the system, such as: Email, password, address, etc. In this article, I will introduce the Input Field and how I designed it. Below is the basic Input Field, which includes the following components:

• Label: Displays the name of the input field, helping users understand what information needs to be entered.

• Required Indicator: An icon (usually an asterisk *) indicating that this field is required.

• Icon: An illustrative icon that helps quickly identify the type of data (for example, an envelope icon for email).

• Input Value: The part where users enter data (here it is micheal@gmail.com).

• Hint Text: Suggestive or guiding text that helps users better understand the content to be entered or the input rules.

Below are the sizes and spacing of the elements in the Input Field:

• Label: font size 16px, displaying the name of the input field.

• Input value: font size 16px, showing the content entered by the user.

• Hint text: font size 14px, helping users understand more about how to enter data.

• Icon: size 24px, placed to the left of the input to indicate the type of content (for example: email, password, search…).

• Total height of the input field: 48px, ensuring the touch and reading area is easy on touch devices.

• Spacing between Label and Input: 4px, helping to keep the layout tidy and readable.

• Spacing between Input and Hint text: 4px, creating a clear separation between the input area and the hint.

• Spacing from Icon to Input value: 8px, creating ample space for the icon.

• Left padding of Input: 16px, creating ample space for the icon.

The Input Field will have 7 different states:

• Placeholder state: The user has not entered anything, displaying the placeholder "Enter your email."

• Focus state: When clicked to enter data, the border changes to primary color (blue) with a slight glow effect.

• Filled state: After the user has finished entering, the border returns to a neutral color, keeping the hint text below.

• Disabled state: The field is disabled, background and text change to light gray.

• Error state: When the data is empty, the border changes to red and an error message appears.

• Error – filled state: The user enters data but in the wrong format, the border and icon remain red, with an error message below.

• Error – focus state: When the form is in focus but the user enters the wrong format, the border is red with a slight glow effect, still displaying the error message.When the Input Field is in Focus state, it will have the following effect: The stroke changes from gray to Primary/500 with a 2px stroke, and there will also be a glow effect in Primary/500 (15%) thickness of 4px.

When the Input Field is in Focus state, it will have the following effect: The stroke changes from gray to Primary/500 with a 2px stroke, and there will also be a glow effect in Primary/500 (15%) thickness of 4px.

Below is the Input Field in the Disabled state; in this state, the Input value I use is colored: #737373, which has lower contrast compared to the normal Filled state, and the background changes from white to: #F7F7F7 to distinguish it from other states.

In the past, many designers or developers used to split forms into 2 columns to "look neater" or "save space," especially on desktop screens.

In the example above, the input fields (User name, Email address, Phone number, Password) are arranged in two parallel columns, causing users to have to shift their eyes back and forth horizontally to fill in the information. This layout reduces the ability to scan content, causing visual clutter and making it easy to miss information fields, especially on small screens like phones.

In contrast, the example below arranges the inputs in a single vertical column, allowing for a natural reading flow from top to bottom, creating a seamless and easier interaction experience. Therefore, for input forms, arranging fields in a single column is always prioritized to ensure consistency, ease of use, and user-friendliness.
A single column form: is the recommended standard for most cases, especially in current web and mobile design.