qnc_checkbox_dropdown

Usage

Import our module into one of your modules. It has the side effect of calling customElements.define(...).

<qnc-checkbox-dropdown>
    <label><input type=checkbox checked> Apple</label>
    <label><input type=checkbox> Banana</label>

    ... arbitrary other checkboxes
    ... arbitrary other content
</qnc-checkbox-dropdown>

This renders an inline summary of the selected options. Clicking that summary opens the wrapped content in a drop-down menu.

Styling

--qnc-checkbox-dropdown-summary-background can be used to override the background of the summary button.

Minimizing FOUC

You cannot completely eliminiate FOUC if your initial html includes any qnc-checkbox-dropdown elements.

You can minimize it, however, by adding:

    qnc-checkbox-dropdown:not(:defined) {
        display: none;
    }

TODO

Allow users to customize:

• border
• padding
• background
• positioning
• min size