How can I address forms that require many similar interactions?

edit: I just noticed there was a very similar question asked as I was typing up my question, but still hoping for some feedback on mine

Forms Closed

I have a form that has many inputs. Two of them are very similar visually yet distinctive in their interactions. They are a part of a tagging system. The first category can only accept 1 tag at least/most whereas the second category can accept many tags.

Forms Opened

Most commonly, these categories can be represented and offer high affordance as radio buttons (single select) and check boxes (multiple select). However, when the form fields are expanded, these lists can take up a lot of space (note: each form in the real app has closer to 14 options each). And I am unsure whether or not their similarity in visual shapes, squares vs. circles, is enough to distinguish as single vs multiple selects.

Forms Opened Alternative

As an alternative, I mocked up the same screen using what I believe are comparable replacements of each form input. The radio buttons are replaced by a sliding tab select and the check boxes are replaced by pills. I am not convinced this is the best interaction, however it solves the two problems I originally faced of reducing space and increasing the distinction visually.

Now of course these create their own problems that I am not sure how to proceed with.

  • The scrolling tab selection may be too long and makes it harder for the user to see and remember all the options (14 total)
  • Browsing the pills can feel cluttered, despite be ordered sequentially (14 total)

I'd appreciate any feedback, similar experiences, or case studies that pertain to the similar topic.

Tags: