Skip to main content


A checkbox is an input control that allows a user to select one or more options from number of choices.


There are a total of 6 variations of checkboxes available in GEL to choose from.

Checkbox Types


Checkbox demo


  • Checkboxes options ideally should be stacked vertically, however can be horizontally placed if the width is sufficient.
  • All checkbox should be followed by text in a from.
  • Users are able to select an option by clicking/tapping either the checkbox or its label.
  • Consider using a Select if the options provided are more than 5.
  • An intermediate state of checkbox can also be displayed when only some options are selected.

When to use

  • Checkboxes are used in a form or multiselect dropdown for a user to indicate a selection of one or more options.D

When not to use

  • If you are wanting to have a change immediately applied when an option is selected, consider using a toggle/switch instead.
  • If selecting an option would change the state or view of other content, consider using a segmented control instead.


Checkbox do and don't

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP