UI Elements

Label is an associate text of the form control which describe the purpose of that control.

Label is an associate text of the form control which describe the purpose of that control.

4.4.1 Guideline

Guideline for the labels are listed as below.

  • In left-to-right languages it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left of other form fields, wh ile in mobile device (responsive) labels will be placed above the form fields helps reduce horizontal scrolling for mobile device users.
  • In form control, labels outside the fields will have 12PX font size and color DarkGray(#5c5c5c)  . Label inside the fields will have 14PX font size and color DarkGray(#5c5c5c)  
  • In the mobile application, there will be no label ou tside the form, label inside the field will be considered.
  • Label should not be placed side by side in form control.
  • Labels will be right aligned to the form field & the distance between form field and label outside the form fields will be 10px for the web version while for the mobile application it will be 5px above the form field. Inside label will also be at 10PX margin from the border of form field.
  • Width of the label container will be 130px, label with more character can start with new line. Either in single line or two line, label will remain in center vertically to the form field.
Label Parameters
Fig 4.4.1 Different parameters of Label

4.4.2 Usage

  • Labels will be used in form to identify the fields & need to describe the purpose of the form control. Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, dr op-down menus etc.