Skip to content

Insert heart-shaped Toggle Switch within Streamlit apps! 🧡

License

Notifications You must be signed in to change notification settings

ShruAgarwal/streamlit-custom-toggle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

streamlit-custom-toggle

⚡ A custom component that can load heart-shaped Toggle Switch inside your Streamlit apps. Also, you can sync this toggle with different Streamlit widgets!

Demo 🕹

Streamlit App

Installation ⬇

First pip install streamlit. Don't know how? 👉 Check here!

After that, install this component:

pip install streamlit-custom-toggle

How to Use? 🤓

Here's an example code 👇

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}")

Arguments Config ⚙

It supports the following arguments customization:

Args Type Required Description
label string YES Define the toggle with a short label value
active_track_fill string YES Changes the color of the track when the toggle is in the active/on state. Default value is: #ff708f
active_thumb_color string YES Changes the color of the thumb when the toggle is in the active/on state. Default value is: #ffffff
value bool OPTIONAL If it's value is set to true, then the toggle switch is deactivated. The toggle is activated by default
key string YES An optional key value that uniquely identifies this component.

Tech Stack 🧰

React

Workflow 👀

Here's the blueprint on how my component works. For understanding it in details, 👉 Read here please!

License 📝

This software is open source, licensed under the MIT License.

Helpful References 🤩