Make spacing consistent between radios / checkboxes

[jameskoster]

• The space between the input (checkbox/radio) and the label is different
• The space between the help text and the label is different

Ideally these should match, e.g.:

[vipul0425]

Hi @jameskoster,

I noticed that currently, the margin for the radio button is hardcoded to 6px, which isn't consistent with the $grid-unit-{} variables defined in base styles. Should we update it to match the 12px margin used for checkboxes, or perhaps consider another value from our existing grid system, such as 8px?

[jameskoster]

Hey 👋

Yes I made the same observation. I'm not sure why the gap is 6px, but I would tend to agree with you; both components should adopt the same value from the grid system. Whether that's 8 or 12px is probably something to finesse in a PR as we need to consider the other variables (IE gap between label + help text), and the different contexts in which these UI's appear.

[vipul0425]

Hi @jameskoster 👋 ,

I've submitted a PR addressing the issue. In the update, I've standardized the spacing between the checkbox or radio button and its label to 12px, while maintaining a 4px spacing between the label and any accompanying help text. Additionally, I've adjusted the formatting of the "closed" option's help text to ensure a more cohesive appearance, as using the 12px spacing caused it to span two separate lines, which was less visually appealing. Please let me know your feedback on these changes or any suggestions you may have.

[ciampo]

Closing this issue since #61696 was merged — @jameskoster feel free to re-open in case there are still aspects that need to be addressed