{"id":771,"date":"2018-05-15T16:45:17","date_gmt":"2018-05-15T16:45:17","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=771"},"modified":"2018-06-01T14:43:58","modified_gmt":"2018-06-01T14:43:58","slug":"usage","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/stepper\/usage\/","title":{"rendered":"Stepper usage"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tStepper<br \/>\n\t<\/h1>\n<h4>\n\t\tUse Steppers to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.<br \/>\n\t<\/h4>\n<h2>\n\t\tBest Practices<br \/>\n\t<\/h2>\n<h4>\n\t\t<a href=\"#\" title=\"Logical Progression\" target=\"_self\"><br \/>\n\t\tLogical Progression<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Display the steps in order from left to right. Indicate to the user that they are performing a multi-step process, and show the direction of movement. Allow the user to return to a previous step to review their data submission.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Indicate the current step\" target=\"_self\"><br \/>\n\t\tIndicate the current step<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control. This helps the user to know where they are in relation to where they have been, and what sections are to follow. Clear labels should accompany the Progress Indicator to indicate what the user will accomplish within each step. Keep labels between one to two words.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Validation\" target=\"_self\"><br \/>\n\t\tValidation<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Use validation to confirm that a previous step has been completed. If the user cannot proceed onto another step without first completing a task, use an\u00a0<a href=\"http:\/\/www.carbondesignsystem.com\/components\/notification\">Inline Notification<\/a>\u00a0to inform them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Stepper Use Steppers to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed. Best Practices Logical Progression Display the steps in order from left to right. Indicate to the user that they are performing&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":48,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-771","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/771","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=771"}],"version-history":[{"count":3,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/771\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/771\/revisions\/1130"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/48"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}