{"id":733,"date":"2018-05-15T16:34:52","date_gmt":"2018-05-15T16:34:52","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=733"},"modified":"2018-05-31T02:17:07","modified_gmt":"2018-05-31T02:17:07","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/checkbox\/usage\/","title":{"rendered":"Checkbox Usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tCheckbox<br \/>\n\t<\/h1>\n<h4>\n\t\tCheckboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.<br \/>\n\t<\/h4>\n<h2>\n\t\tUsage<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Single select\" target=\"_self\"><br \/>\n\t\tSingle select<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use a single Checkbox for a subordinate setting, such as with a &#8220;Remember me?&#8221; login scenario or with a terms of service agreement.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Multiple select\" target=\"_self\"><br \/>\n\t\tMultiple select<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from.\u00a0Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Headings\" target=\"_self\"><br \/>\n\t\tHeadings<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>If necessary, a heading can accompany a set of Checkboxes to provide further context or clarity. Use sentence case for Checkbox headings. In the example below, \u201cNeon colors\u201d would be the heading for the set of Checkboxes below.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Labels\" target=\"_self\"><br \/>\n\t\tLabels<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Always use clear and concise labels for Checkboxes. Be explicit about the action that will follow if the Checkbox is selected. Labels appear to the right of Checkboxes.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Click Target\" target=\"_self\"><br \/>\n\t\tClick Target<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Users should be able to select the checkbox by clicking on the box directly or by clicking on its label.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Dropdowns\" target=\"_self\"><br \/>\n\t\tDropdowns<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>See the\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/dropdowns\/\">Dropdown\u00a0<\/a>section for guidance on how to use Checkboxes within a dropdown.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Tables\" target=\"_self\"><br \/>\n\t\tTables<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>See the\u00a0<a href=\"https:\/\/sites.neoninspire.com\/style-guide\/data-table\/\">Data Tables<\/a>\u00a0section for guidance on how to use Checkboxes within a table.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Default selection\" target=\"_self\"><br \/>\n\t\tDefault selection<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>The default view of a set of Checkboxes is having no option selected.If necessary, a heading can accompany a set of Checkboxes to provide further context or clarity. Use sentence case for Checkbox headings. In the example below, \u201cIBM Designers\u201d would be the heading for the set of Checkboxes below.<\/p>\n<section>\n<p>Using a checkbox to turn an option on or off<\/p>\n<\/section>\n<h4>\n\t\t<a href=\"#\" title=\"Parent and Child Checkboxes\" target=\"_self\"><br \/>\n\t\tParent and Child Checkboxes<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<section>\n<p>Checkboxes can have a parent-child relationship with other checkboxes.<\/p>\n<ul>\n<li>When the parent checkbox is checked, all child checkboxes are checked<\/li>\n<li>If a parent checkbox is unchecked, all child checkboxes are unchecked<\/li>\n<li>If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox<\/li>\n<\/ul>\n<\/section>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<p>Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, hover, and pressed states.<\/p>\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","protected":false},"excerpt":{"rendered":"<p>Components Checkbox Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Usage Single select Use a single Checkbox for a subordinate setting, such as with a &#8220;Remember me?&#8221; login scenario or with a terms of service agreement. Multiple select A&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":54,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-733","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/733","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=733"}],"version-history":[{"count":7,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/733\/revisions"}],"predecessor-version":[{"id":1038,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/733\/revisions\/1038"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/54"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}