# `gradio_toggle`
<a href="https://pypi.org/project/gradio_toggle/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_toggle"></a>
A custom Gradio component that toggles between on and off states.
## Installation
```bash
pip install gradio_toggle
```
## Usage
```python
# 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
<table>
<thead>
<tr>
<th align="left">name</th>
<th align="left" style="width: 25%;">type</th>
<th align="left">default</th>
<th align="left">description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>value</code></td>
<td align="left" style="width: 25%;">
```python
bool | Callable
```
</td>
<td align="left"><code>False</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>label</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>info</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>color</code></td>
<td align="left" style="width: 25%;">
```python
str | Callable | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>radius</code></td>
<td align="left" style="width: 25%;">
```python
Literal["sm", "lg"]
```
</td>
<td align="left"><code>"lg"</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>transition</code></td>
<td align="left" style="width: 25%;">
```python
float
```
</td>
<td align="left"><code>0.3</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>every</code></td>
<td align="left" style="width: 25%;">
```python
Timer | float | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>inputs</code></td>
<td align="left" style="width: 25%;">
```python
Component | Sequence[Component] | set[Component] | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left">None</td>
</tr>
<tr>
<td align="left"><code>show_label</code></td>
<td align="left" style="width: 25%;">
```python
bool | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>container</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>scale</code></td>
<td align="left" style="width: 25%;">
```python
int | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>min_width</code></td>
<td align="left" style="width: 25%;">
```python
int
```
</td>
<td align="left"><code>160</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>interactive</code></td>
<td align="left" style="width: 25%;">
```python
bool | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>visible</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>elem_id</code></td>
<td align="left" style="width: 25%;">
```python
str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>elem_classes</code></td>
<td align="left" style="width: 25%;">
```python
list[str] | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>render</code></td>
<td align="left" style="width: 25%;">
```python
bool
```
</td>
<td align="left"><code>True</code></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><code>key</code></td>
<td align="left" style="width: 25%;">
```python
int | str | None
```
</td>
<td align="left"><code>None</code></td>
<td align="left"></td>
</tr>
</tbody></table>
### 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.
```python
def predict(
value: bool | None
) -> bool | None:
return value
```
Raw data
{
"_id": null,
"home_page": null,
"name": "gradio-toggle",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "gradio, gradio-custom-component, gradio-template-Checkbox, gradio-toggle",
"author": "Daniel Ialcin Misser Westergaard",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/99/94/ac6e2a5d099f4fcf1f64093bf1f51c30cca63a9ae34bdb2b15be7787a94e/gradio_toggle-2.0.2.tar.gz",
"platform": null,
"description": "\n# `gradio_toggle`\n<a href=\"https://pypi.org/project/gradio_toggle/\" target=\"_blank\"><img alt=\"PyPI - Version\" src=\"https://img.shields.io/pypi/v/gradio_toggle\"></a> \n\nA custom Gradio component that toggles between on and off states.\n\n## Installation\n\n```bash\npip install gradio_toggle\n```\n\n## Usage\n\n```python\n# Toggle - A Gradio Custom Component\n# Created by Daniel Ialcin Misser Westergaard\n# https://huggingface.co/dwancin\n# https://github.com/dwancin\n# (c) 2024\n\nimport gradio as gr\nfrom gradio_toggle import Toggle\n\ndef update_toggle_state(input_component):\n print(f\"Updating toggle: {input_component}\")\n return input_component\n\nwith gr.Blocks() as demo:\n with gr.Row():\n with gr.Column():\n input_component = Toggle()\n with gr.Column():\n output_component = Toggle(color=\"red\", info=\"this is the output\", show_label=False, interactive=False, radius=\"sm\", transition=1)\n\n input_component.change(fn=update_toggle_state, inputs=input_component, outputs=output_component)\n\nif __name__ == '__main__':\n demo.launch()\n```\n\n## `Toggle`\n\n### Initialization\n\n<table>\n<thead>\n<tr>\n<th align=\"left\">name</th>\n<th align=\"left\" style=\"width: 25%;\">type</th>\n<th align=\"left\">default</th>\n<th align=\"left\">description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"left\"><code>value</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | Callable\n```\n\n</td>\n<td align=\"left\"><code>False</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>info</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>color</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | Callable | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>radius</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nLiteral[\"sm\", \"lg\"]\n```\n\n</td>\n<td align=\"left\"><code>\"lg\"</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>transition</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nfloat\n```\n\n</td>\n<td align=\"left\"><code>0.3</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>every</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nTimer | float | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>inputs</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nComponent | Sequence[Component] | set[Component] | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\">None</td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>show_label</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>container</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>scale</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>min_width</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint\n```\n\n</td>\n<td align=\"left\"><code>160</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>interactive</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>visible</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_id</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nstr | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>elem_classes</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nlist[str] | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>render</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nbool\n```\n\n</td>\n<td align=\"left\"><code>True</code></td>\n<td align=\"left\"></td>\n</tr>\n\n<tr>\n<td align=\"left\"><code>key</code></td>\n<td align=\"left\" style=\"width: 25%;\">\n\n```python\nint | str | None\n```\n\n</td>\n<td align=\"left\"><code>None</code></td>\n<td align=\"left\"></td>\n</tr>\n</tbody></table>\n\n\n### Events\n\n| name | description |\n|:-----|:------------|\n| `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. |\n| `input` | This listener is triggered when the user changes the value of the Toggle. |\n| `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 |\n\n\n\n### User function\n\nThe impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).\n\n- When used as an Input, the component only impacts the input signature of the user function.\n- When used as an output, the component only impacts the return signature of the user function.\n\nThe code snippet below is accurate in cases where the component is used as both an input and an output.\n\n- **As output:** Is passed, the toggle state as a boolean value.\n- **As input:** Should return, the toggle state to be returned.\n\n ```python\n def predict(\n value: bool | None\n ) -> bool | None:\n return value\n ```\n \n",
"bugtrack_url": null,
"license": null,
"summary": "A custom Gradio component that toggles between on and off states.",
"version": "2.0.2",
"project_urls": {
"Changelog": "https://github.com/dwancin/gradio-toggle/releases",
"Repository": "https://github.com/dwancin/gradio-toggle",
"Space": "https://huggingface.co/spaces/dwancin/gradio_toggle"
},
"split_keywords": [
"gradio",
" gradio-custom-component",
" gradio-template-checkbox",
" gradio-toggle"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "5ee6f1c4e614ea764b5481e8539c4edcb7bf432b738f230afeeaa5f008e6b205",
"md5": "c2193e4ba22ff9b9947390c269ee1a98",
"sha256": "adaa81d1d861eb0a0e427d287eefa705b296200d8743ddd9db8995c5be174ed3"
},
"downloads": -1,
"filename": "gradio_toggle-2.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "c2193e4ba22ff9b9947390c269ee1a98",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 1137094,
"upload_time": "2024-10-19T14:21:51",
"upload_time_iso_8601": "2024-10-19T14:21:51.549302Z",
"url": "https://files.pythonhosted.org/packages/5e/e6/f1c4e614ea764b5481e8539c4edcb7bf432b738f230afeeaa5f008e6b205/gradio_toggle-2.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "9994ac6e2a5d099f4fcf1f64093bf1f51c30cca63a9ae34bdb2b15be7787a94e",
"md5": "f27d056877d368532760ddf5c99c88c2",
"sha256": "d6491486749e3cde6779142a15f608ef2fee17f9d05e10ea8942bf6f36954284"
},
"downloads": -1,
"filename": "gradio_toggle-2.0.2.tar.gz",
"has_sig": false,
"md5_digest": "f27d056877d368532760ddf5c99c88c2",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 1185425,
"upload_time": "2024-10-19T14:21:53",
"upload_time_iso_8601": "2024-10-19T14:21:53.065378Z",
"url": "https://files.pythonhosted.org/packages/99/94/ac6e2a5d099f4fcf1f64093bf1f51c30cca63a9ae34bdb2b15be7787a94e/gradio_toggle-2.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-10-19 14:21:53",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "dwancin",
"github_project": "gradio-toggle",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "gradio-toggle"
}
JSON
