streamlit-toggle-switch-diy 1.1.0

A customized Streamlit toggle switch component with customizable labels, colors, and border radius

streamlit_toggle_switch_diy

Creates a toggle switch with color and placement customizations, and you can change the label's color, radius, font size, and more.

Function

• Customize label background color
• Customize the text color, font size, and font weight for both labels
• Customize the Switch size (small or medium)
• Customize the background color near the button
• Custom rounded corners
• Support multiple layout methods

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,
                     )

Parameters

Parameter Name	Type	Default	Description
key	str	None	The unique identifier for each component instance. Used to distinguish different component instances in the Streamlit application.
label_start	str	""	The text content of the label before the switch. If a preceding label is not needed, pass an empty string"".
label_end	str	""	The text content of the label after the switch. If a following label is not needed, pass an empty string"".
justify	{'flex-start','center','flex-end'}	'flex-start'	Controls alignment of labels and the switch within the container.
default_value	bool	False	The initial state of the toggle switch.True= On,False= Off.
inactive_color	str	'#D3D3D3'	The color of the slider when the switch is inactive (off).
active_color	str	'#11567f'	The color of the slider when the switch is active (on).
track_color	str	'#29B5E8'	The color of the switch track (background).
label_bg_color_start	str	None	The starting value of the label background color, used to create a gradient effect.
label_bg_color_end	str	None	The ending value of the label background color, used to create a gradient effect.
background_color_near_button_start	str	None	The starting value of the background color near the switch, used to create a gradient effect behind the component.
background_color_near_button_end	str	None	The ending value of the background color near the switch, used to create a gradient effect behind the component.
border_radius	str	None	The border-radius of the component, such as'4px','8px','50%', etc.
label_start_color	str	"#7f1916"	Text color for the left (start) label.
label_end_color	str	"#FFFFFF"	Text color for the right (end) label.
label_font_size	str	"14px"	Font size for both labels (e.g."14px","12pt").
label_font_weight	str	"bold"	Font weight for both labels (e.g."bold","normal","500").
switch_size	{'small','medium'}	"medium"	The size of the Switch component.

Note:

• If both label_bg_color_start and label_bg_color_end are set, a gradient background for the label(s) will be created.
• If both background_color_near_button_start and background_color_near_button_end are provided, a gradient behind the switch is created.
• If you only provide one color, it will be used as a solid background.
• label_start_color and label_end_color control the text color of labels, while label_bg_color_start and label_bg_color_end control the background of those labels.

Operation