Toggle Switch

toggle switch allow the users to switch between two states or options within a single action, and visually indicate each state with a distinct appearance usage guidelines deliver immediate result toggle switches should deliver immediate result the changes chould apply instantly without pressing save or submit we want to strive for toggle switches to match how it works in the real world, i e look at how light switches works, or when i turn on and off a coffee machine it its not possible to achieve an immediate result, consider using checkboxes or radio buttons instead set default state set the default state based on common user preferences default state should align with the expected behaviour for most users and reduce the need for unnecessary toggling provide contextual help provide additional contextual help or information to explain the purpose or consequences of toggling this may include explanatory text, or links to relevant documentation don't overuse toggles avoid overusing toggles in the user interface reserve them for settings or actions with significance, that have a clear binary choice and where a toggle provides an intuitive interaction method while checkbox can also be used for binary options, toggles are best used to represent a choice of two opposing values or state of something toggle switch vs checkbox it is not easy to select if a checkbox or toggle switch are the best option for your design we've tried to set up this table to make it easier for you to decide if a toggle switch is the correct component toggle switch checkbox when does the changes occurs? immediately after clicking a save or submit button are you designing a form? no yes can the user select multiple options from a list? no yes do you need to visualise a hierachy? no yes for more information about when to use toggle vs checkbox, read the guidelines from the nielsen norman group content guidelines labels should be clear make sure all toggle switches have labels so users know what they do when they interact with them labels should be short, clear, and describe what happens when the toggle is on check if adding "on" or "off" makes sense at the end of the label if not, change the label toggle switches should not include any negations of some sort, since it can be confusing for the user what will happen when the toggle switch is "on" or "off" its not always neccessary to have a verb included in the label, as long as it is understandable when in doubt, add a verb such as "show" or "enable" do write labels as "show floor", "try the new ui", "flight mode", and "enable location services" don't write labels that can confuse the user such as "hide floor", "disable old ui" and "enable", formatting when writing labels for toggle switches write them in sentence case, not title case don't end a single phrase or a word with a punctuation don't use commas or semicolons after the label do show floor don't show floor don't show floor don't show floor code to create a toggle, create an instance of the facelifttoggle class cm facelifttoggle(parent, 	 key="key", 	 // configures the label 	 label=$label, 	 labelcolor=color(0), 	 // configures the outline 	 framestyle=whitepenframe, 	 // configures default toggle state 	 checked=true, 	 // configures styling colors (wip, to remove) 	 inactivebackground=brush, 	 activebackground=brush, 	 hoverbackground=brush, 	 pillcolor=color(0), 	 // visual style configuration 	 togglestyle style=null, 	 // specify callback behaviors 	 callback=function callback, 	 waiteffect=true); the waiteffect argument allows you to specify if the animation of the toggle should be completed before the callback is executed for the full list of constructor options, please refer to cm/win/facelifttoggle cm