UI Components

UI Components

Short Description

Form is a section of a document containing normal content, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.

5.3.1 Guideline

Certain guideline must be taken care while adopting Form component which are listed as below.

  • Form will always be in the panel & it will have different elements like Textfield, select menu, section control, buttons etc.
  • Bootstrap provide horizontal and vertical form layout, designer shall need to use the horizontal layout where labels are right aligned and floated to left to make them appear on the same line as form controls. There are ceratin markup changes in the horizontal layout which UI developers need to take care.
  • In the form, labels will be right aligned and placed at the left & inline to each element in the desktop, while in mobile labels will take place at the top of each element & left aligned.
  • Depending on the complexity of the form, designer need to group the related elements together and then need to decide number of columns for the grid. Each form element will be placed in the column.
  • In the same column, 2 elements with label should be ignored, i.e. Any label should not be in between two form elements in same column.
  • In the form, call to action will be placed at the bottom and will be in the center of the form. Either single call to action or grouped with primary and secondary.
  • Bold label will indicate the mandatory field in the form control.
  • In the form each element will be placed with 5PX distance from each other. Only checkbox and Radio buttons will have 10PX distance.
  • In the form, UI level validation will be considered as shown in the Fig 5.3.1b, while submitting the form, backend level validation will come in Dialog popup.
Parameter of Form Component
Fig 5.3.1a Parameter of Form Component
Form showing UI level validation
Fig 5.3.1b Form showing UI level validation.