DashDaq 3 Labels

Hello community,

I want to create a toggle switch with using DashDaq and I want to put 3 labels. You can find an example output below. So, one label must be on the left, the other one must be on the right and the other one must on the top. I could with 2 labels but I couldn’t put the 3rd label on top. How can I do that?

This is what i want:
image

This is what i did:
image

And this is my code:

daq.ToggleSwitch(id="toggle-hierarchy",
                label=['Standard', 'Alternative'],
                value=False),

Thank you for responses.

1 Like

A better way is to use Radioitems with css. like:

import dash_bootstrap_components as dbc
from dash import Input, Output, html

button_group = html.Div(
    [
        dbc.RadioItems(
            id="radios",
            className="btn-group",
            inputClassName="btn-check",
            labelClassName="btn btn-outline-primary",
            labelCheckedClassName="active",
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
                {"label": "Option 3", "value": 3},
            ],
            value=1,
        ),
        html.Div(id="output"),
    ],
    className="radio-group",
)


@app.callback(Output("output", "children"), [Input("radios", "value")])
def display_value(value):
    return f"Selected value: {value}"