UI Elements

UI Elements

Selection controls allow the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches.

Selection controls allow the user to select options. There are three kinds: checkboxes, radio buttons, and on/off switches.

4.7.1 Types

There are mainly three types of it.

  • Checkbox

Checkboxes allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

  • Radio Button

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusiv e selection if you think that the user needs to see all available options side-by-side.

  • Switch

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Different types of selection
Fig 4.7.1 Different types of selection.

4.7.2 Guideline

Below are the list of guidelines.

  • Selections element always consists a label while using in form, checkbox & radio button will have label in right side.
  • Basing on the component view, R adio button & Check boxes will be either inline (or) vertical, while Switches will remains unique throughout the application.
  • Height/width for the checkbox/radio button will be 16PX. Border will be 2PX in color DarkGray(#5c5c5c)  .
  • Width for the switch be 68px having 1px b order around of Gray(#d8d8d8)   color. On/Off section will have 34PX width. Height for the switch will be 26PX.
  • For Switch, one section will be active as default either On or off.
Different parameters of selection
Fig 4.7.2 Different parameters of selection.

4.7.3 Behaviour

Below are the list of guidelines.

  • Normal State

Checkbox & Radio button in normal state will have 2PX border around of color Gray(#d8d8d8)   and background will be in color White(#ffffff)  . For Switch background of the placeholder will be White(#ffffff)   color and border will be 1PX with Gray(#d8d8d8)   color. One section will remain active in the normal state in switch.

  • Active State

Checkbox & Radio button in active state will have no border around and background will be in color SkyBlue(#2991d6) . Additionally checkbox will have tick icon while radio button will have 8PX circle with White(#ffffff)  border of 2PX. For Switch if On section is active than it will have background color SkyBlue(#2991d6)   and if Off section is active it will have background color DarkGray(#5c5c5c)  . Clicking on ON/OFF button user can toggle the active state.

  • Disable State

In any selection, disable state will have label color DimGray(#c5c5c5) , border color Gray(#d8d8d8)  . In switch placeholder background will be LightGray(#e6e6e6) 

Different states of selection
Fig 4.7.3 Different states of selection.

4.7.4 Usage

  • Checkbox & Radio button can be us ed in the form control as and when needed.
  • Switch can either be used in form control or any oth er component when its required to toggle the settin gs for any component or features for the user either ON or OFF.
Selection Usage
Fig 4.7.4 Usage