Unclear how to choose between checkbox and radio button as form display widget on list fields

Created on 8 September 2024, 4 months ago
Updated 19 September 2024, 4 months ago

Problem/Motivation

During the usability review of โœจ Add a '#selectall' option for checkboxes element Active ( ๐Ÿ“Œ Drupal Usability Meeting 2024-09-06 Needs work - attendees were @benjifisher, @rkoller, @simohell, and @worldlinemine) we've noticed one detail while going through the test case. List fields have the option Check boxes / radio buttons as one of the options on their form display widget. But neither on the form display widget settings nor on the field settings of the list field you have any apparent way nor explanation how to actively select if the form should be checkboxes or radio buttons.
That is set via the "Allowed number of values" select field on the field settings of the list field. If set to limited with a value of 1, radio buttons are shown, while anything bigger than 1 or unlimited leads to checkboxes. That behavior is not communicated anywhere, it is implied knowledge that the ability to choose between the two is set via the "allowed number of values" setting.

Steps to reproduce

  • Add a field of the field type List (text) to a content type.
  • Set the number of allowed values to 2
  • go to the manage form display page of the content type and check the options for the list fields form display widget
  • Try to figure out if it is possible to know just based on the micro copy if the user interface component used will be checkboxes or radio buttons

Proposed resolution

We haven't had the time to ideate and come up with a proper solution yet since the focus was on the actual linked issue. One option might be to simply add a description underneath the "Allowed number of values" setting on the field settings and explain that if set to 1 the output will be radiobuttons while every other setting will result in checkboxes as the output? But that still leaves the problem with the ambiguous and unclear option Check boxes / radio buttons on the form display widget. for someone getting to the form display widget first on an already set up site that is potentially confusing still.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

๐Ÿ“Œ Task
Status

Needs review

Version

11.0 ๐Ÿ”ฅ

Component
Formย  โ†’

Last updated 1 day ago

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • First commit to issue fork.
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia annmarysruthy

    A helptext "This widget uses radio buttons if the "Allowed number of values" is set to 1. If the number of allowed values is more than 1 or unlimited, checkboxes will be used." will be displayed in manage form display when Checkboxes/Radio buttons is selected as widget.

  • Pipeline finished with Success
    4 months ago
    Total: 429s
    #284487
  • Status changed to Needs review 4 months ago
  • First commit to issue fork.
  • Pipeline finished with Success
    4 months ago
    Total: 736s
    #287425
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Was going to mark but proposed solution seems to still be up in the air. @annmarysruthy since you worked on it what was your rational behind the other parts.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    Thanks for the initial work on the issue! I've applied and tested MR9507. A few observations and thoughts about the current implementation.

    The description This widget uses radio buttons if the "Allowed number of values" is set to 1. If the number of allowed values is more than 1 or unlimited, checkboxes will be used. is currently placed on the Manage form display page. First, all the descriptions for the other widgets are of informational nature only, outlining the active settings of a widget, while the description for the list field is purely of instructional nature, telling the user how to set the widget to checkboxs or radio buttons.
    It is also not clear at all where the "Allowed number of values" is set on this page. The widget doesn't have a settings button even. To someone unfamiliar with Drupal this might be a major source of confusion if the description is referring to a setting which is located on a completely different page.

    Having that kind of information available in context on the field settings page when a field and content type is set up is sort of important imho. That was the reason why one of the initial suggestions in the steps to reproduce section was to place the description on the field settings page instead of the manage form display page.

    On the other hand "just" moving the description over to the field settings page wouldn't solve this multipage problem and the ambiguity coming from the option label (Check boxes / radio buttons) on the select field either entirely.

    If someone has deliberately set the "allowed number of values" on the field settings page to 1, then i consider it also potentially confusing still having a settings field label of Check boxes / radio buttons. At this point the desired widget was already chosen and you have no edit settings button available for that widget. So having a visual reassurance within the interface, in case 2 was set on the field settings page, so the select field label would just display Radio buttons, while if the value is set to 1 on the field settings the option would display Checkboxes instead.

    On the other hand for someone who has not set up the content type and its fields it might be potentially confusing not seeing Checkboxes in case Radio buttons is the available option based on the settings made on the field settings page. That was one concern, I think @benjifisher voiced, when I've suggest using either checkboxes or radio buttons as the label depending on the settings on the field settings page during the ux meeting.

    On the first look a simple problem, but on closer look a quite tricky one, if you are trying to provide clarity and situational awareness to the user. I wonder if it would make sense to file the issue for a usability review to discuss the problem in a group context. back then we just noticed and raised it while discussing and reviewing โœจ Add a '#selectall' option for checkboxes element Active .

Production build 0.71.5 2024