Skip to main content

InputSwitch

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

Variants​

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

Switch types

Demo​

Switch demo

Guidance​

  • 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​

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

Developer API​

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