Does Material Design have a guideline for styling a "select all" checkbox?

Question

I have a list of checkboxes and would like to add a "select-all" toggle. I already have it working, including setting an indeterminate state when some of the items are selected. What I'd like to know is, when the list is a capital-L List, does Material specify how to place the select-all box?

I currently have it inline with the rest of the list, but I don't like the way it looks:

I'm thinking of putting it as a secondary action (on the right side) of the section header but that could introduce its own issues. I'm hoping there's a "right" way to do this but I'll settle for suggestions if not.

Answer 1

Try combining the section header title and master checkbox above the list.

I'm not sure what the rest of your ui looks like, but oftentimes a selectable list has the 'select all' up along the table header, or section header.

This way you can eliminate the 'all' option (which isn't an item in itself), and see the general state of selection right next to the section title.

Similar to this:

This way it emphasizes the list title, and you have a clear scan line down the list.

Material doesn't indent that often, usually only for sub items. For example if a checkbox or radio button has additional options conditional upon its selection, then an indented list appears under its parent.

In your case 'All' is not a parent item, but a master control and indicator in one.

With the example above you can maintain the alignment.

Another example: in a dropdown list control:

This is another example, most likely different than your case, but it provides one additional interaction: the ability to select an 'only'. This is great if you have a voluminous list:

I cited this example in another post:

Answer 2

You can try indenting values coming below all. It will give a clear picture and would eliminate the problem of inline. Hope this solves the problem and let me know if you have any doubts.