{"id":777,"date":"2018-05-15T16:46:43","date_gmt":"2018-05-15T16:46:43","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=777"},"modified":"2018-05-25T17:10:49","modified_gmt":"2018-05-25T17:10:49","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/toggle\/usage\/","title":{"rendered":"Toggle usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tToggle<br \/>\n\t<\/h1>\n<h4>\n\t\tToggles are used when a property has two defined values. This visual cue provides our users a quick and easy way to switch between these values.<br \/>\n\t<\/h4>\n<h2>\n\t\tUsage<br \/>\n\t<\/h2>\n<p>Use toggles to:<\/p>\n<ul>\n<li>Switch a single option on or off, on mobile and tablet<\/li>\n<li>Immediately activate or deactivate something<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Toggles should be used instead of radio buttons if only one item can be selected from a list.\" target=\"_self\"><br \/>\n\t\tToggles should be used instead of radio buttons if only one item can be selected from a list.<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Don\u2019t use radio buttons to toggle an option on or off.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use toggles to turn an option on or off, especially on mobile.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"When to use checkboxes instead of toggles\" target=\"_self\"><br \/>\n\t\tWhen to use checkboxes instead of toggles<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Don&#039;t\" target=\"_self\"><br \/>\n\t\tDon&#8217;t<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>If a list consists of multiple options, avoid using switches. Use checkboxes instead because they take up less space.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Do\" target=\"_self\"><br \/>\n\t\tDo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Checkboxes are for making selections from a list. They let users select more than one item and allow for easy selection or deselection of all items with a parent checkbox.<\/p>\n<h2>\n\t\tLabel<br \/>\n\t<\/h2>\n<p>The option that the switch controls, as well as the state it\u2019s in, should be made clear from the corresponding inline label.<\/p>\n<p>Avoid creating a switch that includes the text \u201con\u201d and \u201coff\u201d within the graphic itself. The switch alone should be sufficient.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Toggle Toggles are used when a property has two defined values. This visual cue provides our users a quick and easy way to switch between these values. Usage Use toggles to: Switch a single option on or off, on mobile and tablet Immediately activate or deactivate something Toggles should be used instead of radio&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-777","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=777"}],"version-history":[{"count":4,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/777\/revisions"}],"predecessor-version":[{"id":966,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/777\/revisions\/966"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}