Home / Designing UI Elements

Input

Tech Writers Team @ Ucraft

Last updated on Sep 10, 2024

The Input UI element is a field area that allows users to type text, numbers, or other types of data.

To configure Input:

  1. Go to Styles to modify the element styling features:
  • Select the current condition of the element from the State dropdown:
    • Normal: The default state of Input when it is not being interacted with.
    • Hover: The state of Input when the user hovers over it with the mouse cursor.
    • Focus: The state of Input when it is currently in focus or active.
    • Active: The state of Input when the user performs an action like clicking, tapping, or pressing.
    • Disabled: The state of Input when it is inactive or unavailable for interaction.
  • Select how it behaves based on certain conditions or user interactions from the Mode dropdown:
    • Normal: The default state of Input when it is not being interacted.
    • Error: The state of Input when the users' input does not meet the specified criteria, such as incorrect data provided, or other inconsistencies.
  • Select how Input is displayed from the Type dropdown: only the input field, input field with left or right icon.
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Content to modify the element styling features:

  • Click Change Icon, select the icon style you prefer, and tick the icon in the icon list that opens.


💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.