Material Design: Should you use "Selection Controls" and "Text Fields" simultaneously

Question

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.

Answer 1

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:

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.