Stacking switches vertically

[shoelace-style]

Stacking switches vertically

[claviska]

The docs are generated from markdown, so the <p> tags are added during that conversion. The proper way to space form controls and labels is with an input field:

<div class="input-field">
  <span class="switch">...</span>
</div>

For best results, a switch should always be a <span> and never a <div>.

[nevf]

@claviska

For best results, a switch should always be a <span> and never a <div>.

Can you explain why a <div> should never be used? With the small changes I outlined it seems to work wonderfully well.

IMO using a <div> is much clearer semantically. Also having to wrap the <span switch> in an <div class="input-field"> adds unnecessary extra markup which isn't semantic. ie. I don't consider a switch to be an input field.

[claviska]

Because the control is intended to be structured as a span. By changing it to a div, you've demonstrated yourself why the it shouldn't be modified. As-is, you can use it inline or in an input field like other elements.

I don't consider a switch to be an input field.

It's just another way to style a checkbox, so definitely an input :)