UI Elements

Text fields allow the user to input text, select text (cut, copy, paste).

Text fields allow the user to input text, select text (cut, copy, paste).

4.3.1 Guideline

There are different types of buttons can be used which is listed as below.

  • Text fields can be single-line, multiline & can also be associated with an Icon such as search field will have search icon.
  • Text fields will be associated with label while using in form.
  • While using in touch screen device, touching a text field places the cursor and automatically displays the keyboard.
  • When the mouse and keyboard are the primary input methods, width may be condensed to accommod ate layout, while in mobile device it will take full widt h of the device.
  • Text fields will always have 1px border.
  • For multiline, textarea will be used. Label inside placed will be at 10PX margin from top and left border. Height will be fixed to 115PX.
  • Text fields height will be 35px.
  • Placeholder font size will be 14px & color will be DarkGray(#5c5c5c)   from the primary shade of it. Placeholder will always be left aligned. Left margin from the border will be 10px.
Text input fields
Fig 4.3.1 Different parameters of Text input fields.

4.3.2 Behaviour

Below are the all common behaviour for the text fields.

Normal State

Normal is a state when there is no movement of the mouse or no touch to the text field. Below are the design specification of text field for the normal state.

  • Normal State Properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font color: DarkGray(#5c5c5c)  
Normal State Properties
Fig 4.3.2 Normal State Properties
  • Normal state with success properties
  • Background: White(#ffffff)  
  • Border: SeaGreen(#45b6b0)  
  • Font Color: DarkGray(#5c5c5c) 
  • Normal state with warning properties
  • Background: White(#ffffff)  
  • Border: Gray(#d8d8d8)  
  • Font Color: DarkGray(#5c5c5c) 
  • Normal state with error properties
  • Background: White(#ffffff)  
  • Border: Red(#ff0000)  
  • Font Color: DarkGray(#5c5c5c)  

Focus State

When user place the cursor in text field either by mouse or by touch, on focus behaviour will occur. Below are the design specification of text field for the focus state.

  • Focus state properties
  • Background: White(#ffffff) 
  • Border: SkyBlue(#2991d6)  
  • Font Color: DarkGray(#5c5c5c)  
  • Shadow: SkyBlue(#2991d6)   with 30% opacity.
Focus state properties
Fig 4.3.2 Focus state Properties

Disable State

When user place the mouse on text field or touches it, it will stay intact. Below are the design specification of text field for the focus state.

  • Disable state properties
  • Background: LighterGray(#f6f6f6)  
  • Border: LightGray(#e6e6e6)  
  • Font Color: DimGray(#c5c5c5)  
Disable State Properties
Fig 4.3.2 Disable State Properties

4.3.3 Usage

  • Text fields can be used in the form control when it requires to submit number, text or mixed format input types. Common input types for which you should optimize include:
    • Number
    • Container number, Gate pass number, Invoice number etc

    • Text:
    • Company name, username, URL etc

    • Mixed format
    • Email address, search query etc

  • Textarea can be used when it is required to submit multiline information. Can be used in form control.
  • Textfield can also be used independent in any component as a search field when it is required