{ "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 `RadioBoxGroup` widget allows selecting from a list or dictionary of values using a set of checkboxes. It falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the [`RadioButtonGroup`](RadioButtonGroup.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 radio controls, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n", "* **`inline`** (boolean): Whether to arrange the items vertically in a column (``False``) or horizontally in a line (``True``)\n", "* **`label`** (str): The title of the widget\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", "\n", "___" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "radio_group = pmui.RadioBoxGroup(label='RadioBoxGroup', options=['Biology', 'Chemistry', 'Physics'], inline=True)\n", "\n", "radio_group" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Like most other widgets, ``RadioBoxGroup`` 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.RadioBoxGroup(\n", " label='Radiobox Group', value=['A', 'P'], options={'Apple': 'A', 'Banana': 'B', 'Pear': 'P', 'Strawberry': 'S'},\n", " inline=True,\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 checkboxes using the `inline` parameter:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.Column(\n", " pmui.RadioBoxGroup(label='Horizontal', value='Apple', options=['Apple', 'Banana', 'Pear', 'Strawberry'], inline=True),\n", " pmui.RadioBoxGroup(label='Vertical', value='Banana', options=['Apple', 'Banana', 'Pear', 'Strawberry'], inline=False)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Label Placement\n", "\n", "You may provide a `label_placement` as one of \"bottom\", \"start\", \"top\", \"end\":" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " *(pmui.RadioBoxGroup(\n", " label=lp, label_placement=lp, inline=True, value='Apple', options=['Apple', 'Banana']\n", " ) for lp in pmui.RadioBoxGroup.param.label_placement.objects)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Color Options\n", "\n", "Customize the appearance of checkboxes using the `color` parameter:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.FlexBox(\n", " *(pmui.RadioBoxGroup(\n", " label=color, color=color, inline=True, value='Apple', options=['Apple', 'Banana']\n", " ) for color in pmui.RadioBoxGroup.param.color.objects)\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Disabled and Loading States\n", "\n", "Like other widgets, `RadioBoxGroup` can be disabled and/or show a loading indicator." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.RadioBoxGroup(\n", " label='Radiobox Group', value='Pear', options=['Apple', 'Banana', 'Pear', 'Strawberry'],\n", " disabled=True, loading=True\n", ")" ] }, { "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.RadioBoxGroup(\n", " label=\"Select your Pizza:\",\n", " options=['Pepperoni', 'Margharita', 'Fior di Late', 'Hawaii'],\n", " value='Pepperoni',\n", " inline=True,\n", ")\n", "\n", "def create_order_summary(topping):\n", " summary = f\"## ๐Ÿงบ Your Pizza Order\\n\\n\"\n", " summary += f\"Type: {topping}\\n\"\n", " \n", " total = 12.99 + (99 if topping == 'Hawaii' else 0)\n", " summary += f\"\\n**Total: ${total:.2f}**\"\n", " \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.RadioBoxGroup(\n", " label='Radiobox Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'],\n", ").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 `Radiobox` [Reference](https://mui.com/material-ui/react-checkbox/#formgroup) for inspiration." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "pmui.Row(radio_group.controls(jslink=True), radio_group)" ] } ], "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 }