Skip to main content


A switch is a boolean input taking either true or false values only.


There are a total of 5 variants of switch availabe in GEL.

Switch types


Switch demo


  • When used for infographics or tables, the result of changing the switch is immediately effective and there is no need for an additional action to apply or save a change.
  • Use switch if there are no more than two choices mapping to boolean relationship like true or false.
  • Consider providing feedback of the toggle state change by using a toast.

When to use

  • Use switch in instances where the input requires a boolean relaionship like on/off, true/false, enable,disable or activate/deactivate.
  • Use switch to show immediate change that does not require user to save the action as in forms.

When not to use

  • If a submit button is required to apply the selection, please do not use switch as the application of switch is immediate.
  • If multiple items can be selected, including nested items, and the result of the selection has to be saved or submitted, consider using a checkbox instead.
  • If only one item can be selected and the result of the selection has to be saved or submitted, consider using a radio button instead.
  • If making a selection from a list of items, consider using a listbox instead.
  • If changing a content view or preference in the context of that content, consider using a segmented control instead.

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API

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