What is good UX for user input option choices?

General Q&A
1

How do you decide between using a toggle, single-choice-radio or multiple-choice-checklist component?

2

These components have very different use cases.

Use a toggle when users need to switch something on or off. E.g. a setting.

Use a single-choice-radio when users need to choose 1 of (up to) 3 options. Tip: Where more than 3 options are available, opt for a dropdown instead.

A multiple-choice-checklist is similar to a single-choice-radio, but doesn't limit users to select only 1 option. The "more than 3 options" tip applies here too. Another use for this component is when a user actively engages with a single statement. E.g. agreeing to terms and conditions.

2 Likes
3

When I need to use a toggle I opt for a list item. For example:

<list>
  <list-item>
     <header>Toggle Me</header>
     <action on-press="$:toggle('toggle_me')" icon="{$:view.toggle_me ? 'fa-toggle_on' : 'fa-toggle_off' }" />
  </list-item>
</list>

This will create an item as example: ![enter image description here](upload://kkNs6TCe6h7N5UHAwErC70QATCQ.png)

This illustrates another way to create a toggle in the Platform

2 Likes