Forms vertical spacing

[brgrz]

Is your feature request related to a problem? Please describe.

I've been following the examples all along but I'm having certain issues with using <br> for vertical spacing in forms. There are often two break rules needed because certain controls, for example sl-checkbox break the flow with display: inline-block (I'm not 100% sure that's the culprit but something is messing up the flow). Even when there's only one break rule it looks kinda hacky.

Describe the solution you'd like
Describe alternatives you've considered

Maybe go with vertical one-way only (bottom) margins for form controls? I've also used flex extensively within forms but again not sure if Flexbox is the way to go for SL forms.

[claviska]

I'm of the opinion that components should manage spacing within their boundaries, but margins should be controlled by the user. Consider a form input that has a bottom margin. You don't always want the bottom margin to be applied (e.g. if it's the last control in a container). Depending on the design, you may also want the controls to stack vertically with little or no spacing.

I've been following the examples all along but I'm having certain issues with using
for vertical spacing in forms

I use those in the docs for brevity...they don't really belong there. It's just easier to type <br> than to define margins for every single demo. I would encourage users to set margins for spacing instead.

That spacing really belongs in your theme, that way you can set it to what you want and adjust based on your breakpoints. If anything, I've been considering an opt-in stylesheet similar to Tailwind's typography plugin that would provide basic styles for typography, headings, links, and other fundamental elements. I think setting a default for form fields in something like this would be totally fine.

My thoughts mostly mirror those presented here, with the exception of spacer components. I'm neither for nor against spacers at this point — I'd have to think about whether that's something I'd like to explore.

https://mxstbr.com/thoughts/margin/

[brgrz]

The components might, probably should, manage spacing only within themselves that's why it'd be completely fine if <sl-form> managed spacing for itself and the components it contains, being a spacer component in a way, if you will.