Plotly Dash中如何为切换开关设置双标签或使用双标签按钮

你当前用三栏分别放置左标签、开关、右标签的写法完全可用，如果要找直接支持双标签配置、无需手动拆分布局的组件，有两个可落地的方案：

方案1：使用Dash Mantine Components的Switch组件（原生支持双标签） #

这是最省事儿的选择，dmc.Switch自带onLabel和offLabel两个参数，直接传入两侧要显示的文本即可，组件会自动处理对齐、间距等布局问题，不用手动套Col分栏，最终效果和你给出的示例完全一致。
示例代码：

import dash_mantine_components as dmc

dmc.Switch(
    id='my-toggle-switch',
    size="md",
    radius="lg",
    offLabel="Toggle here for A",
    onLabel="Toggle here for B",
    checked=False
)

你还可以通过size、color参数直接调整开关尺寸、主题色，标签大小会自动和开关匹配，不需要额外写CSS调整。

方案2：不新增依赖的优化写法 #

如果你不想额外安装第三方组件库，继续用已经引入的dash-bootstrap-components和dash-daq，可以把现有分栏逻辑封装成可复用的小组件，避免每次写重复的布局代码：

from dash import html
import dash_bootstrap_components as dbc
import dash_daq as daq

def DualLabelToggle(toggle_id, left_label, right_label, default_value=False):
    return dbc.Row(
        [
            dbc.Col(dbc.NavbarBrand(left_label), width="auto"),
            dbc.Col(
                daq.ToggleSwitch(
                    id=toggle_id,
                    value=default_value
                ),
                width="auto"
            ),
            dbc.Col(dbc.NavbarBrand(right_label), width="auto")
        ],
        align="center",
        className="g-2" # 调整这个类名的数值可以控制标签和开关的间距
    )

# 调用时直接传参即可
DualLabelToggle(
    toggle_id="my-toggle-switch",
    left_label="Toggle here for A",
    right_label="Toggle here for B"
)

这个方案和你现有实现逻辑完全一致，只是做了封装，后续修改标签、调整间距只需要改传入参数就行，也能避免多页面复用时出现布局错位的问题。

补充：原生daq.ToggleSwitch和dbc.Switch本身只支持单标签配置，没有内置双标签属性，如果不想新增依赖，封装分栏逻辑是成本最低的实现方式。

内容的提问来源于stack exchange，提问作者Himanshu Joshi