gradio-toggle

gradio_toggle

A custom Gradio component that toggles between on and off states.

Installation

pip install gradio_toggle

Usage

# Toggle - A Gradio Custom Component
# Created by Daniel Ialcin Misser Westergaard
# https://huggingface.co/dwancin
# https://github.com/dwancin
# (c) 2024

import gradio as gr
from gradio_toggle import Toggle

def update_toggle_state(input_component):
    print(f"Updating toggle: {input_component}")
    return input_component

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            input_component = Toggle()
        with gr.Column():
            output_component = Toggle(color="red", info="this is the output", show_label=False, interactive=False, radius="sm", transition=1)

    input_component.change(fn=update_toggle_state, inputs=input_component, outputs=output_component)

if __name__ == '__main__':
    demo.launch()

Toggle

Initialization

name	type	default	description
value	bool | Callable	False
label	str | None	None
info	str | None	None
color	str | Callable | None	None
radius	Literal["sm", "lg"]	"lg"
transition	float	0.3
every	Timer | float | None	None
inputs	Component | Sequence[Component] | set[Component] | None	None	None
show_label	bool | None	None
container	bool	True
scale	int | None	None
min_width	int	160
interactive	bool | None	None
visible	bool	True
elem_id	str | None	None
elem_classes	list[str] | str | None	None
render	bool	True
key	int | str | None	None

Events

name	description
change	Triggered when the value of the Toggle changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See .input() for a listener that is only triggered by user input.
input	This listener is triggered when the user changes the value of the Toggle.
select	Event listener for when the user selects or deselects the Toggle. Uses event data gradio.SelectData to carry value referring to the label of the Toggle, and selected to refer to state of the Toggle. See EventData documentation on how to use this event data

User function

The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).

• When used as an Input, the component only impacts the input signature of the user function.
• When used as an output, the component only impacts the return signature of the user function.

The code snippet below is accurate in cases where the component is used as both an input and an output.

• As output: Is passed, the toggle state as a boolean value.
• As input: Should return, the toggle state to be returned.

def predict(
    value: bool | None
) -> bool | None:
    return value