What is the proper way to have a checked menu where a single item is selected?

[npwoods]

I reported an issue earlier where a menu with checkmarks would have the wrong items get checked. @ogoffart reported that the problem was that in the example, the bindings were overridden by property sets. This is very fair, but it left an open question: What is the proper way to have a menu with a number of checked items, and selecting one of the items results in the others being unselected?

As described on the earlier thread, this is a common paradigm and it isn't clear what the correct way to do this in Slint might be. Below are two examples from Microsoft Windows where:

• The user can choose a theme, and the currently selected theme is marked with a bullet
• The user can choose a specific filter in Windows Explorer for file types, and selecting a filter causes the other filters to be unselected

[Apollo-Roboto]

The behaviour is definitely unexpected to me, I changed the MenuBar to a ConextMenuArea to try it in SlintPad (because of the crash bug) but it worked perfectly like you expected. So I was confused and I tried with the MenuBar locally and the menu wasn't refreshing well, the reactivity was lost. There has to be a bug here.

I made some quick recordings to clearly show what's going on:

MenuBar (broken):

2025-11-08_21-44-29.mp4

ConextMenuArea (working):

2025-11-08_21-45-34.mp4

[Apollo-Roboto]

I found a workaround, by adding a middle man property.

This doesn't work:

for entry[i] in root.themes:
MenuItem {
    title: entry;
    checkable: true;
    checked: root.selected_theme_index == i;
    activated => {
        root.selected_theme_index = i;
    }
}

But this does:

for entry[i] in root.themes:
MenuItem {
    title: entry;
    checkable: true;
    checked: root.selected_theme_index == i;
    private property <bool> selected: root.selected_theme_index == i;
    changed selected => {
        self.checked = self.selected;
    }
    activated => {
        if self.selected {
            self.checked = true;
            return;
        }
        root.selected_theme_index = i;
    }
}

Here's the full example on SlintPad (with ContextMenuArea to avoid the crash)

2025-11-08_22-45-31.mp4

I don't understand the internal working of Slint enough to explain this one. But I hope it helps :)