🧡 Streamlit Custom Toggle - A custom component to load heart-shaped toggle switch widget

🧩 Streamlit Components
1

Hey, everyone! :wave:
I’ve built a Streamlit component for the react-based toggle-switch where you can add heart-shaped toggle switches in different colors! :star_struck:

All this is possible with python install: pip install streamlit-custom-toggle

It is very easy to use once installed :point_down:

import streamlit as st
from streamlit_custom_toggle import st_custom_toggle

# Disabled toggle switch
st_custom_toggle('Disabled', active_track_fill="#EAE4E4", active_thumb_color="#EAE4E4", value="true", key="toggle1")  

# Active toggle switch
st_custom_toggle('Active', active_track_fill="#FF5733", active_thumb_color="#900C3F", key="toggle2")

Sample demo :joystick:

demo

Documentation :writing_hand:: GitHub

Try it out and let me know your thoughts :wink:
Also, a big thanks to @andfanilo for writing such a helpful components tutorial! :hugs:

7 Likes
2

Shruti, I hope you added it to the Streamlit Components - Community Tracker !

:wink:

1 Like
3

Yes, I have added it :+1:

4

This is so cute! Never would have ever thought to do this and I absolutely love it :heart:

1 Like
5

Fixed an issue and released a new version with the latest code changes! :point_down:

import streamlit as st
from streamlit_custom_toggle import st_custom_toggle

st.subheader('Music Choices 🎵')
col1, col2, col3 = st.columns(3, gap="small")

with col1:
    # Disabled toggle switch
    calm = st_custom_toggle('Calm', active_track_fill="#EAE4E4", active_thumb_color="#EAE4E4", value="true", key="toggle1")

with col2:
    fun = st_custom_toggle('Fun', active_track_fill="#57FD6E", active_thumb_color="#EAE4E4", key="toggle2")

with col3:
    music_toggle = st_custom_toggle('Rock', active_track_fill="#FF5733", active_thumb_color="#900C3F", key="toggle3")
    music = st.radio(
    "Select your favorite artist",
    ('The Beatles', 'AC/DC', 'Pink Floyd', 'Elvis Presley', 'MÃ¥neskin'), disabled=music_toggle)
    st.markdown(f"You choose {music}")

# Checking the toggle state
st.code(f"Calm = {calm}, Fun = {fun}, Rock = {music_toggle}")

You can now view it live here: :joystick: Demo
Hope you all would find it helpful! :blush:

1 Like