How to put lable on top of the switch in dmc Switch

Dash Python
1

Is there a way to get the label on top in Dash Mantine Components Switch?

2

hi @Brent
I think you would have to use CSS for that. I don’t see any prop in DMC that controls the position of the label.

3

That is what I thought too. People on this list surprise me a lot of the time though.

4

I would actually just use a html.Div() or dmc.Paper() component to fake the label. The Label is a div, so you would have to move around the div via css. The commented out className got assigned to the mentioned div, but I think the first class changes.

app.layout = dmc.Stack(
    [
        dmc.Paper(dmc.Text('Fake label')),
        dmc.Switch(
            size="lg",
            radius="sm",
            label="Enable this option",
            checked=False,
        )
    ]
)

# className='mantine-1qfqb46 mantine-Switch-labelWrapper'
1 Like
5

Or, you could use the styles API:

image

Should be like this:
styles = {'body': {"flexDirection": "column-reverse"}}

2 Likes
6

Thank you. That works. I also added onLabel and offLabel. So now I have a label on the top of the switch and a label inside the switch that corresponds to on or off. It makes a very nice switch.

1 Like