This works fine… if I want to have these inline to each other. For example a simple ‘Yes’ or ‘No’.

But what if I have a collection of 5+ that would work better vertically down the page?

I need these radios to be block line elements so they will extend the width of the page. But there’s an issue when labels become block elements at 100%.

It means that all of the white space of the block element all the way to 100% of the containing element will be selectable and toggle the radio or checkbox because the element is a label that is configured to toggle the input.

Finally after much trial and error I found a few things:

Although you can wrap an :input in the simple_form config with as many different divs as you want, you can’t wrap individual pairs together. (As far as I can tell!) You can wrap the whole collection but not the pairs.

To get around this you have to change the config.boolean_style from :nested to :inline. It makes the markup look more like this: