{"id":2404,"date":"2021-02-17T15:05:00","date_gmt":"2021-02-17T15:05:00","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/expanded-pricing-selector-choice-group\/"},"modified":"2026-07-17T13:39:08","modified_gmt":"2026-07-17T13:39:08","slug":"expanded-pricing-selector-choice-group","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/expanded-pricing-selector-choice-group\/","title":{"rendered":"Expanded Pricing Selector Choice Group"},"content":{"rendered":"<p>This example uses concepts specific to freestyle forms. For an introduction, see <a href=\"https:\/\/ioninteractive.com\/ionacademy\/freestyle-forms-introduction\/\">Ion Freestyle Forms<\/a>.<\/p>\n<p>Choice Groups can use text, images, buttons, interactive components, or combinations of those elements as selectable answers. An <strong>Expanded Choice<\/strong> provides separate off and on containers, so the unselected and selected states can present different content and styling.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/expanded-choice-current.png\" alt=\"Current Ion Creative Studio example showing unselected and selected expanded-choice states\" \/><\/figure>\n<h2>Build an expanded choice<\/h2>\n<ol>\n<li>Add a Choice Group to a freestyle form.<\/li>\n<li>Add the required choices and use the advanced or expanded choice mode.<\/li>\n<li>Design the off container for the unselected state and the on container for the selected state.<\/li>\n<li>Apply the same input value and scoring strategy you would use for other choices in the group.<\/li>\n<li>Preview the page and verify that only one selected state is active when the group uses single-select mode.<\/li>\n<\/ol>\n<p>The selected and unselected containers may share text or imagery, but keep the change in state visually clear and accessible without relying on color alone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This example uses concepts specific to freestyle forms. For an introduction, see Ion Freestyle Forms. Choice Groups can use text, images, buttons, interactive components, or combinations of those elements as selectable answers. An Expanded [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5438,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1420,32],"tags":[2131],"class_list":["post-2404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creative-studio","category-the-creative-studio","tag-creative-studio"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2404"}],"version-history":[{"count":3,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2404\/revisions"}],"predecessor-version":[{"id":9528,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2404\/revisions\/9528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5438"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}