Skip to content
Ion Academy
Creative Studio

Expanded Pricing Selector Choice Group

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 Choice provides separate off and on containers, so the unselected and selected states can present different content and styling.

Current Ion Creative Studio example showing unselected and selected expanded-choice states

Build an expanded choice

  1. Add a Choice Group to a freestyle form.
  2. Add the required choices and use the advanced or expanded choice mode.
  3. Design the off container for the unselected state and the on container for the selected state.
  4. Apply the same input value and scoring strategy you would use for other choices in the group.
  5. Preview the page and verify that only one selected state is active when the group uses single-select mode.

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.

Share this:

Akemi is a visual designer with over 10 years experience designing for web, mobile and other digital platforms. Her passion lies in creating thoughtfully crafted user experiences that are intuitive, accessible and highly functional. When she's not behind a screen, you'll find her in the kitchen cooking for family and friends or reading Don Norman's books.