{ "cells": [ { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `RadioButtonGroup` widget allows selecting from a list or dictionary of values using a set of toggle buttons. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [`RadioBoxGroup`](RadioBoxGroup.ipynb), [`Select`](Select.ipynb), and [`DiscreteSlider`](DiscreteSlider.ipynb) widgets.\n", "\n", "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](https://panel.holoviz.org/how_to/links/index.html) or [how to use them as part of declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html).\n", "\n", "#### Parameters:\n", "\n", "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n", "\n", "##### Core\n", "\n", "* **`disabled`** (boolean): Whether the widget is editable\n", "* **`options`** (list or dict): A list or dictionary of options to select from\n", "* **`value`** (object): The current value; must be one of the option values\n", "\n", "##### Display\n", "\n", "* **`color`** (str): The color variant of the button, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n", "* **`description`** (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.\n", "* **`name`** (str): The title of the widget\n", "* **`orientation`** (str, default='horizontal'): Button group orientation, either 'horizontal' or 'vertical'.\n", "\n", "##### Styling\n", "\n", "- **`sx`** (dict): Component level styling API.\n", "- **`theme_config`** (dict): Theming API.\n", "\n", "##### Aliases\n", "\n", "For compatibility with Panel certain parameters are allowed as aliases:\n", "\n", "- **`button_style`**: Alias for `variant`\n", "- **`button_type`**: Alias for `color`\n", "- **`name`**: Alias for `label`\n", "___" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "radio_group = pmui.RadioButtonGroup(\n", " label='Radio Button Group', options=['Biology', 'Chemistry', 'Physics'], button_type='success')\n", "\n", "radio_group" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Like most other widgets, ``RadioButtonGroup`` has a value parameter that can be accessed or set:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "radio_group.value" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Dictionary Options\n", "\n", "You can provide options as a dictionary where keys are the displayed labels and values are the actual option values:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "dict_group = pmui.RadioButtonGroup(\n", " label='Radio Button Group', value='P', options={'Apple': 'A', 'Banana': 'B', 'Pear': 'P', 'Strawberry': 'S'},\n", ")\n", "\n", "dict_group" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Let's observe how the `value` parameter reflects the selected dictionary values (not the labels):" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pn.pane.Str(dict_group.param.value)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Orientation\n", "\n", "Control the layout of buttons using the `orientation` parameter:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.RadioButtonGroup(label='Horizontal Group', orientation=\"horizontal\", value='Apple', options=['Apple', 'Banana', 'Pear', 'Strawberry']),\n", " pmui.RadioButtonGroup(label='Vertical Group', orientation=\"vertical\", value='Pear', options=['Apple', 'Banana', 'Pear', 'Strawberry'])\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Size Options\n", "\n", "Adjust the `RadioButtonGroup` size using the `size` parameter:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " *(pmui.RadioButtonGroup(\n", " label=size, size=size, value='Banana', options=['Apple', 'Banana', 'Pear', 'Strawberry']\n", " ) for size in pmui.RadioButtonGroup.param.size.objects)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Disabled and Loading States\n", "\n", "Like other widgets, the `RadioButtonGroup` can be disabled to prevent interaction and/or show a loading indicator:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.RadioButtonGroup(label='Disabled Group', disabled=True, loading=True, value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'])" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Example: Interactive Pizza Order Form\n", "\n", "Let's create a practical example showing how `RadioBoxGroup` can be used in a real application. This pizza ordering interface demonstrates real-time updates based on user selections:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import panel as pn\n", "import panel_material_ui as pmui\n", "\n", "pn.extension()\n", "\n", "pizza = pmui.RadioButtonGroup(\n", " label=\"Select your Pizza:\",\n", " options=['Pepperoni', 'Margharita', 'Fior di Late', 'Hawaii'],\n", " value='Pepperoni',\n", " width=500\n", ")\n", "\n", "def create_order_summary(topping):\n", " summary = f\"## ๐Ÿงบ Your Pizza Order\\n\\n\"\n", " summary += f\"Type: {topping}\\n\"\n", " total = 12.99 + (99 if topping == 'Hawaii' else 0)\n", " summary += f\"\\n**Total: ${total:.2f}**\"\n", " return summary\n", "\n", "order_summary = pn.bind(create_order_summary, topping=pizza)\n", "\n", "pmui.Column(\n", " \"## ๐Ÿ• Pizza Order Form\",\n", " pizza,\n", " \"---\",\n", " order_summary,\n", " width=800\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### API Reference\n", "\n", "#### Parameters" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.RadioButtonGroup(label='Radio Button Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry']).api(jslink=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### References\n", "\n", "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html).\n", "\n", "Learn [how to set up callbacks and (JS-)links between parameters](https://panel.holoviz.org/how_to/links/index.html) or [how to use them as part of declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html).\n", "\n", "See also the Material UI `ToggleButtonGroup` [Reference](https://mui.com/material-ui/react-toggle-button/) and [API](https://mui.com/material-ui/api/toggle-button-group/) documentation for inspiration." ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.12.2" } }, "nbformat": 4, "nbformat_minor": 4 }