Checklist value do not get set/reset correctly

[Casper-Guo]

Initiation code:

dbc.Col(
    dbc.Checklist(
        options=[
            {
                "label": "Show starting position",
                "value": "show starting position",
                "disabled": False,
            }
        ],
        value=[],
        id="show-starting-grid",
        inline=True,
        switch=True,
    ),
    width=3,
),

Callback:

@callback(
    Output("show-starting-grid", "options"),
    Output("show-starting-grid", "value"),
    Input("line-y", "value"),
    State("show-starting-grid", "value"),
    prevent_initial_call=True,
)
def set_starting_grid_switch(
    y: str, current_setting: list | None
) -> tuple[list[dict[str, str | bool]], list | None]:
    """Enable show starting grid switch only when y-axis is position."""
    return [{"label": "Show starting position", "disabled": y != "Position"}], current_setting

As you can see in the video:

1. I define a custom value for my option. This is used when I first toggle the switch around 0:09 but it is not used when I toggle the switch again around 0:25
2. The switch does not stay toggled on when I select a different value from the dropdown (line-y)
3. The subsequent time I toggle the switch, the value list gets longer

Armchair.Strategist.-.A.F1.Strategy.Dashboard.-.Google.Chrome.2025-04-26.13-48-51.mp4

[Casper-Guo]

In this example, it may be unclear why I am using a callback to set the value. I have other logic where I want to be able to reset and lock the switch to the off status but I didn't include them as they are not relevant to the buggy behavior

[AnnMarieW]

Hi @Casper-Guo
It would be helpful to include a complete minimal example that reproduces the issue.

[Casper-Guo]

See the following for a minimized app that still shows some of the unexpected behaviors

"""Dash app layout and callbacks."""

import dash_bootstrap_components as dbc
from dash import Dash, Input, Output, State, callback, dcc

line_y_options = [
    {"label": "Position", "value": "Position"},
    {"label": "Lap Time", "value": "LapTime"},
]

lineplot_tab = dbc.Row(
    [
        dbc.Col(
            dcc.Dropdown(
                options=line_y_options,
                value="Position",
                placeholder="Select the variable to put in y-axis",
                clearable=False,
                id="line-y",
            ),
            width=9,
        ),
        dbc.Col(
            dbc.Checklist(
                options=[
                    {
                        "label": "Show starting position",
                        "value": "show starting position",
                        "disabled": False,
                    }
                ],
                value=[],
                id="show-starting-grid",
                inline=True,
                switch=True,
            ),
            width=3,
        ),
    ],
)

app = Dash(__name__)
server = app.server
app.layout = dbc.Container(lineplot_tab)


@callback(
    Output("show-starting-grid", "options"),
    Output("show-starting-grid", "value"),
    Input("line-y", "value"),
    State("show-starting-grid", "value"),
    prevent_initial_call=True,
)
def set_starting_grid_switch(
    y: str, current_setting: list | None
) -> tuple[list[dict[str, str | bool]], list | None]:
    """Enable show starting grid switch only when y-axis is position."""
    return [{"label": "Show starting position", "disabled": y != "Position"}], current_setting


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000, debug=True)

When I select a different value from the dropdown, the switch gets disabled and toggled to false. When I select Position again and toggles the switch on, the value property has a value appended.

Dash.-.Google.Chrome.2025-04-26.14-59-39.mp4

[AnnMarieW]

Try including the "value" when you update the options in the callback:

 return [{"label": "Show starting position", "value": "show starting position", "disabled": y != "Position"}], current_setting

[Casper-Guo]

Looks like this works! If it not too much trouble, can you explain why this fixes the issue.

And as a follow-up question, is there way to target only the first element of options, or even better, the disabled key only, instead of changing the entire options property?

[AnnMarieW]

The options require both the label and the value. There are some shorthand syntax - you can find more info in the docs, but those just populate the label and value for you under the hood. It looks like if there is no value it's defaulting to None and providing some unexpected results.

It is possible to use Partial Property Updates , but it may not be worth the complexity. That method is great for when you have a large prop like a figure and just want to update something small - like the title. Typically, the options prop in a Checklist does not have a huge amount of data.