According to the streamlit toggle switch improvement, it can support more custom parameters, background color, and radius

Custom Components
1

So, I found an amazing component that can customize the toggle
(Streamlit Toggle Switch). I think it can suit some specific development scenarios. However, when I changed the color near this toggle, such as the background color in the sidebar (used by streamlit-on-Hover-tabs for custom navigation bar), I noticed that the background color of the toggle did not change. I simply modified the source code to make it more customizable, allowing changes to the label’s color and the toggle’s background color etc. I believe it can be integrated with streamlit-antd-components or some amazing components in the Streamlit community to make your website more beautiful. Hope you enjoy it!

Thanks to @CarlosSerrano, the author of the original toggle switch.

Installation

pip install streamlit-toggle-switch-diy

Usage

import streamlit as st
import streamlit_toggle_diy as tog

tog.st_toggle_switch(
        key=None,
        label_start="111",  
        label_end="",   
        justify='flex-start',
        default_value=False,
        inactive_color='#D3D3D3',
        active_color="#11567f",
        track_color="#29B5E8",
        label_bg_color_start=None,
        label_bg_color_end=None,
        background_color_near_button_start=None,
        background_color_near_button_end=None,
        border_radius=None,
                     )

Demonstration:
streamlit

Details:
streamlit-toggle-switch-diy

2

Hey @Flow_Water good job. This component will be deprecated from my github and PyPi as it was already added natively in Streamlit.

1 Like
3

good news, I think this component is very good, glad to hear this component enter streamlit :grin: