octobercms/october · error · Error

Radio button and checkbox dropdown menu items cannot have ic

Error message

Radio button and checkbox dropdown menu items cannot have icons

What it means

The dropdown-menu sheet component validates its entire items array while computing the menu class name and throws if any checkbox or radiobutton item also carries an icon — the layout supports either a state glyph or an icon, not both. It is the render-time JavaScript counterpart of the PHP setIcon() guard and fires during render, before any user interaction.

Source

Thrown at modules/backend/vuecomponents/dropdownmenu/assets/js/sheet.js:28

    },
    data: function() {
        return {
            visible: false,
            submenuVisible: false,
            menuItemRefs: [],
            componentUid: null
        };
    },
    computed: {
        menuClassName: function computeMenuClassName() {
            var hasIcons = false,
                hasSubmenus = false;

            for (var index = 0; index < this.items.length; index++) {
                var hasState = ['radiobutton', 'checkbox'].indexOf(this.items[index].type) !== -1;

                if (this.items[index].icon && hasState) {
                    throw new Error('Radio button and checkbox dropdown menu items cannot have icons');
                }

                if (this.items[index].icon || hasState) {
                    hasIcons = true;
                }

                if (this.items[index].items && this.items[index].items.length) {
                    hasSubmenus = true;
                }
            }

            var result = [];
            if (hasIcons) {
                result.push('has-icons');
            }

            if (hasSubmenus) {
                result.push('has-submenus');

View on GitHub (pinned to b608633a7e)

Solutions

Remove the icon property from every checkbox/radiobutton item in the items array.
Prefer the PHP ItemDefinition builder — its setIcon() guard stops the invalid combination server-side with a clearer trace.
Sanitize dynamic lists: strip icon when type is 'checkbox' or 'radiobutton' before passing them to the component.

Example fix

// before
items: [
    { type: 'checkbox', label: 'Show grid', icon: 'icon-grid', command: 'toggleGrid' }
]

// after
items: [
    { type: 'checkbox', label: 'Show grid', command: 'toggleGrid' }
]

Defensive patterns

Strategy: validation

Validate before calling

function sanitizeMenuItems(items) {
    return items.map(function (item) {
        var stateful = item.type === 'checkbox' || item.type === 'radiobutton';
        if (stateful && item.icon) {
            return Object.assign({}, item, { icon: null });
        }
        return item;
    });
}

// bind :items="sanitizeMenuItems(rawItems)"

Prevention

Never pass raw API rows straight into the menu component
Strip icon for stateful item types at the data boundary
Use ItemDefinition server-side so the invalid pair never reaches the browser

When it happens

Trigger: Mounting the dropdownmenu component (or opening a sheet menu) with items like {type:'checkbox', icon:'icon-grid', ...}; item objects passed from PHP as plain arrays that bypassed ItemDefinition validation, or assembled client-side.

Common situations: Custom code building menu item objects by hand instead of using ItemDefinition; config/API-driven menus where an icon field is present on every row; copying a template item with an icon and only changing its type to checkbox.

Related errors

AI-assisted analysis of octobercms/october@b608633a7e (2026-08-21). Data as JSON: /api/errors/9a58def3de342ed8. Report an issue: GitHub.