Streamlit Toggle Switch

🧩 Custom Components
1

Toggle Switch Component

Here is a quick component I wrote today. It is a very simple Toggle Switch component using React/Material-UI. Here is a quick snippet of it.

Install:

pip install streamlit-toggle-switch

Usage

import streamlit as st
import  streamlit_toggle as tog

tog.st_toggle_switch(label="Label", 
                    key="Key1", 
                    default_value=False, 
                    label_after = False, 
                    inactive_color = '#D3D3D3', 
                    active_color="#11567f", 
                    track_color="#29B5E8"
                    )

sample

Github Repo

11 Likes
2

Very nice @CarlosSerrano. Good customisation options.

Maybe, there will be a 3-way toggle button in future… :slight_smile:

Cheers

1 Like
3

Very cool and nice design @CarlosSerrano ! Have you considered adding it to Streamlit Extras? GitHub - arnaudmiribel/streamlit-extras: Discover, try, install and share Streamlit re-usable bits we call "extras"!

2 Likes
4

@Amanda_Kelly yes, @blackary mentioned it to me yesterday. Will get it added soon.

5

Very useful and nice component.
Not sure, if its only me but font seems to be not matching with default theme.
Is it also in roadmap to have flip values on change.

6

Very useful!
Any way to align the switch in the left of the container?

7

Next version will have more formatting options. Thanks

2 Likes
8

I liked the toggle switch. I wish to get the text in line with the switch (centrally aligned) currently it’s a bit offset. I also want to make it a bit small. Can you please give me pointers on where to make changes?
Thanks.

9

Hi @CarlosSerrano , Thank you for this component. It looks great!

I am trying to use this in my streamlit application but am running into the function object has no attribute 'st_toggle_switch' error. Any ideas on how can I resolve it?

Thanks!

1 Like
10

@Arushi_Agarwal can you share your code?

11

Working on V2 that will have several sizes available.

2 Likes
12

[quote=“CarlosSerrano, post:1, topic:32474”]

I tried the code mentioned in the usage:

import streamlit as st
import  streamlit_toggle as tog

tog.st_toggle_switch(label="Label", 
                    key="Key1", 
                    default_value=False, 
                    label_after = False, 
                    inactive_color = '#D3D3D3', 
                    active_color="#11567f", 
                    track_color="#29B5E8"
                    )

Here is the error message:

image
image1764×369 15.5 KB

And also tried to use toggle-switch from streamlit_extras

13

@Arushi_Agarwal let me check into it.

1 Like
14

A temporary workaround would be to use columns:

cols1, cols2, cols3, cols4, cols5, cols6, cols7, cols8, cols9 = st.columns([1,1,1,1,1,1,1,1,1])
with cols1:
    switch = tog.st_toggle_switch(label="", 
                        key="Key1", 
                        default_value=False, 
                        label_after = False, 
                        inactive_color = '#D3D3D3', 
                        active_color="#11567f", 
                        track_color="#29B5E8"
                        )

image
image1919×399 5.25 KB

15

Thanks for the suggestion, @PabloCaSan. However, I am trying to add it to my sidebar. When I try to add st.sidebar.st_toggle_switch, it doesn’t work.

16

@Arushi_Agarwal This might might work. The label_after parameter can control the left and right anchoring (its getting renamed on v2) Please try this and let me know.

import streamlit as st

sb = st.sidebar

with st.sidebar:
    toggle1 = toggle(
        label="Option 1",
        key="Key1",
        default_value=False,
        label_after=False,
        inactive_color="#D3D3D3",
        active_color="#11567f",
        track_color="#29B5E8",
    )
    toggle2 = toggle(
        label="Option 1",
        key="Key2",
        default_value=False,
        label_after=True,
        inactive_color="#D3D3D3",
        active_color="#11567f",
        track_color="#29B5E8",
    )
1 Like
17

@CarlosSerrano Hi, any way to execute a function when the toggle is changed? There is no on_change parameter to be passed.

18

As far as I understand doing callbacks on custom components is not possible but I will check. Do you mind creating an issue on the github page for the component for tracking?

Thanks,

19

Hi @CarlosSerrano Thanks for trying. This is a great solution but it didn’t work for my case so I used simple radio buttons instead. But will give it a try again!

20

Yeah love the look and feel but without a callback, you can’t undo the behavior that happens when it toggles.