I am trying to figure out when to put a vertical divider in my Material Design list item (esepcially with switch element).

I cant find the dimensions/specs/when to use a vertical divider.

I find screenshots of it in the material guidelines here:

But no specs on this. Does anyone know where to find official specs on this?


There are specs on secondary actions placed on the right of a list item. However, they don't mention dividers, and all examples provided go without dividers.

The main info on the matter is provided in this paragraph:

Secondary actions and info should be placed on the right side of the title. Secondary actions are always a separate target from the primary action, as users increasingly expect every icon to trigger an action.

The list spec holds concrete sizes and measurements, but again, no divider mentions.

As for the actual usage:

From the examples you provide, it seems to me that the main reason for providing separators in some places is that Google goes against its own recommendations and shows switches as primary actions on the right in its settings app.

Therefore, it needs another way to differentiate switches as secondary actions (where tapping an item leads to another screen) and switches as primary actions (where tapping an item toggles the switch). And that's the reason for adding in those separators—to show two distinct tap areas when the switch is a secondary action.

| improve this answer | |
  • Thanks that makes sense that if clicking the list item triggers a different action then pressing the switch. It would be awesome if anyone can help me find specs. What I assumed is the divider takes 70% height of the listitem, and has a margin-left of 16, and it sits within the "pressable" item (non-switch part). – Noitidart Apr 1 '18 at 23:30
  • 1
    @Noitidart I don't think there are any specs, but I think you're safe deducing them from the implementation. Knowing Google's specs, the height is probably not a percentage, but rather there's a fixed top and bottom margin—in this case 16px. – Tin Man Apr 2 '18 at 7:44
  • Ah thanks @TinMan I'm not so well versed. Thanks I'll use this margin for top bottom and left! :) The switch already has padding of 16 on left so i dont need to padding to left – Noitidart Apr 2 '18 at 17:23

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.