Allow input as a sibling of label in dcc.Checklist()

[ngnpope]

I was trying to use Bootstrap v4.1.0 to style dcc.Checklist():

• https://getbootstrap.com/docs/4.1/components/forms/#checkboxes-and-radios
• https://getbootstrap.com/docs/4.1/components/forms/#checkboxes (custom style)

Currently a checklist such as the following:

dcc.Checklist(
    id='example',
    options=[{'label': 'Item #%d' % i, 'value': i} for i in range(1, 4)],
    values=list(range(1, 4)),
    className='form-check',
    inputClassName='form-check-input',
    labelClassName='form-check-label',
    # className='custom-control custom-checkbox',
    # inputClassName='custom-control-input',
    # labelClassName='custom-control-label',
)

Will render with <input> nested inside <checkbox>:

<div id="example" class="form-check">
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="on">Item #1</label>
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="on">Item #2</label>
    <label class="form-check-label"><input type="checkbox" class="form-check-input" value="on">Item #3</label>
</div>

It would be helpful if dcc.Checklist() could take a nested=False option, and also group the <input> and <label> in a <div>, so that the output from:

dcc.Checklist(
    id='example',
    options=[{'label': 'Item #%d' % i, 'value': i} for i in range(1, 4)],
    values=list(range(1, 4)),
    className='form-group',
    groupClassName='form-check',
    inputClassName='form-check-input',
    labelClassName='form-check-label',
    nested=False,
)

...would be like the following:

<div id="example" class="form-group">
    <div class="form-check">
        <input type="checkbox" class="form-check-input" value="on" id="example--0">
        <label class="form-check-label" for="example--0">Item #1</label>
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input" value="on" id="example--1">
        <label class="form-check-label" for="example--1">Item #2</label>
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input" value="on" id="example--2">
        <label class="form-check-label" for="example--2">Item #2</label>
    </div>
</div>

To implement this would require:

• Addition of the nested, groupClassName and groupStyle properties.
• Changing the options.map() call to provide the index for auto-generating label[for] and input[id]

Here is a quick and dirty gist as an example...

[KieranTHE]

Would be great to see this as it seems impossible to to style checklists without it.

[ghost]

Same problem here - there is really no good mechanism in CSS for styling Dash Checklists due to the input-inside-label structure. Please make an option to have sibling labels.