Text Input Field

The Text Input Field is a general-purpose input field that supports various states such as Default, Hover, Focused, Disabled, and Error. In its empty state, the field does not display placeholder text to help users distinguish between filled and empty fields.

States

Default: The empty input field with no placeholder text.
Filled with text: The input field filled with user text.
Hover: Border color changes when hovered over.
Focused: Border color changes when the field is focused.
With hint: A hint text can be displayed below the input field.
Error: The input field shows a red border with an error message.
Disabled: Input field in a disabled state with a gray background.
With icon on the left: Optionally, an icon can be placed on the left side of the input field.
Dropdown: Input field with a dropdown icon on the right side.

Usage Examples

Default / Filled / Hover / Focused

With Hint

Hint text

Error

Error text

<div class="text-input-container"><label class="text-input-label" for="input-default">Default / Filled / Hover / Focused</label><input id="input-default" type="text" placeholder="Text"/></div>
<div class="text-input-container"><label class="text-input-label" for="input-hint">With Hint</label><input id="input-hint" type="text" placeholder=""/><p class="text-input-hint">Hint text</p></div>
<div class="text-input-container"><label class="text-input-label" for="input-error">Error</label><input class="error" id="input-error" type="text" placeholder=""/><p class="text-input-error-message">Error text</p></div>

Disabled

With Icon

🔍

Dropdown

<div class="text-input-container"><label class="text-input-label-disabled" for="input-disabled">Disabled</label><input id="input-disabled" type="text" placeholder="" disabled=""/></div>
<div class="text-input-container"><label class="text-input-label" for="input-icon">With Icon</label><div class="relative"><span class="icon-left">🔍</span><input id="input-icon" class="icon" type="text" placeholder=""/></div></div>
<div class="text-input-container"><label class="text-input-label" for="input-dropdown">Dropdown</label><div class="relative"><select id="input-dropdown" class="dropdown"><option value=""></option><option value="A">selected A</option><option value="B">selected B</option><option value="C">selected C</option></select></div></div>

Notes

If hint text is needed, it is displayed below the input field.
In its empty state, the field does not show a placeholder, making it easier to distinguish from a filled field.
In the error state, the field displays a red border, and an error message appears below the field.