Is it possible to group multiple checkboxes?

[pryley]

I am building a custom block based on a shortcode. I have a use-case where I am using checkboxes that toggle their value in an attribute option array when checked (similar to using a multi-Select element). I need them grouped visually.

Is this possible to do and if so, how?

Individual checkboxes:

Grouped checkboxes:

[pryley]

The only way I can figure out to do this it is by writing the BaseControl and CheckboxControl components manually, something like this:

el( 'div',
    { className: 'components-base-control' },
    el( 'div',
        { className: 'components-base-control__field' },
        el( 'input', {
            id: 'inspector-checkbox-control-hide-0',
            type: 'checkbox',
            value: '1',
            onChange: toggleHide.bind( props, 'if_empty' ),
            className: 'components-checkbox-control__input',
        }),
        el( 'label', {
            className: 'components-checkbox-control__label',
            htmlFor: 'inspector-checkbox-control-hide-0',
        }, __('Hide if empty'))
    ),
    el( 'div',
        { className: 'components-base-control__field' },
        el( 'input', {
            id: 'inspector-checkbox-control-hide-1',
            type: 'checkbox',
            value: '1',
            onChange: toggleHide.bind( props, 'bars' ),
            className: 'components-checkbox-control__input',
        }),
        el( 'label', {
            className: 'components-checkbox-control__label',
            htmlFor: 'inspector-checkbox-control-hide-1',
        }, __('Hide the bars'))
    )
    // ...
)

The only problem is that I don't know how to get the instance ID so am having to create my own ID.

There must be a simpler (more concise) way to do this...

[designsimply]

Based on the screenshots, it looks like you're trying to reduce the vertical spacing between the checkboxes, is that right?

I am new to JavaScript, so I don't know if there's a better way to do the BaseControl and CheckboxControl components, but I was wondering if you could resolve the problem using CSS in your custom block?