0

I know there are always exceptions to a design system.

But as a general rule, should you avoid mixing Selection Control and Text Field components?

I tend to think Selection Controls belong more in a settings screen, and Text Fields are more for form builders and other data inputs.

Thoughts?

References:

https://material.io/design/components/selection-controls.html https://material.io/design/components/text-fields.html

Mockups

Below you will see a list of items on the left and settings for the selected item on the right. These settings consist of both "Text Field" components and "Selection Control" components. In this case, the Selection Control components being used are checkboxes. My question is whether or not these components should be always be allowed to be mixed, or do they have specific use cases. An alternative to the checkboxes would be a multi-select dropdown menu.

enter image description here

  • Hi Danny, it's unclear what you're asking. Can you describe (and show some mocks) the context and constraints for the specific problem you're trying to solve? – Mike M Apr 18 at 15:45
  • Sure, also this is in reference to material design components. material.io/design/components/selection-controls.html material.io/design/components/text-fields.html – Danny Marsh Apr 18 at 16:00
  • Hi Danny, thanks for modifying your question and presenting a clear example. – Mike M Apr 18 at 17:47
  • 1
    I don't think there's a general answer to this question. Depending on the information to present/input, on the user group, and on the task at hand, you'll find cases where separation is better, while in other cases mixing fares better. – virtualnobi Apr 26 at 9:10
2

Most webforms mix the two freely.

What a form does

A form exposes an object for creating and editing through a UI. This object has attributes with multiple data types (booleans, arrays, strings, etc.), as well as certain conditions (If I choose x, I can do y).

Consider the appropriate control as the best way to expose the data and the type of functionality the user can apply, with the least effort expended:

An example: Choosing an inappropriate control shifts the burden to the user.

In your mockups, you describe:

An alternative to the checkboxes would be a multi-select dropdown menu.

If you use a multiselect menu in this instance, you impose a memory tax:

enter image description here

In this case, checkboxes work with limited amounts of choices. I can see everything at a glance, what's selected, and no need for extra help text telling me I can select more than one.

If you had 80+ choices, you might make the case for multiselect, with a display showing only those selected.

It all depends on the context

There is no hard and fast rules, and the material system is not making pattern judgements that I can see, but separating components into groups to explain use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.