{
 "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 `CheckBoxGroup` widget allows users to select multiple options from a list by checking the corresponding checkboxes. This widget is part of the multi-option selection family, which includes [`MultiSelect`](MultiSelect.ipynb), [`CrossSelector`](CrossSelector.ipynb), and [`CheckButtonGroup`](CheckButtonGroup.ipynb) widgets that share a compatible API.\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "For more details on customization options, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`disabled`** (bool): If True, the widget is not interactive.\n",
    "* **`options`** (list or dict): The available options to choose from. Can be a list of strings or a dictionary mapping labels to values.\n",
    "* **`value`** (list): The currently selected options.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`inline`** (bool): Whether to lay out the options in a row (`inline=True`) or column (the default).\n",
    "* **`label`** (str): The title displayed above the checkbox group.\n",
    "* **`label_placement`** (`Literal[\"bottom\", \"start\", \"top\", \"end\"]`): Placement of the option labels.\n",
    "* **`loading`** (bool): If True, displays a loading spinner over the component.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`color`** (str): The color theme for the checkboxes.\n",
    "- **`sx`** (dict): Component-level styling options.\n",
    "- **`theme_config`** (dict): Theming configuration.\n",
    "\n",
    "##### Aliases\n",
    "\n",
    "For compatibility with Panel, some parameters have aliases:\n",
    "\n",
    "- **`name`**: Alias for `label`\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Create a checkbox group with a list of options. Users can select multiple items by checking the corresponding boxes:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox_group = pmui.CheckBoxGroup(\n",
    "    label='Checkbox Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'], inline=True\n",
    ")\n",
    "\n",
    "checkbox_group"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `value` parameter returns a list of the currently selected options:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox_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.CheckBoxGroup(\n",
    "    label='Checkbox 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.CheckBoxGroup(label='Horizontal', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'], inline=True),\n",
    "    pmui.CheckBoxGroup(label='Vertical', value=['Apple', 'Pear'], 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.CheckBoxGroup(label=lp, label_placement=lp, inline=True, value=['Apple'], options=['Apple', 'Banana']) for lp in pmui.CheckBoxGroup.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.CheckBoxGroup(label=color, color=color, inline=True, value=['Apple'], options=['Apple', 'Banana']) for color in pmui.CheckBoxGroup.param.color.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Disabled and Loading\n",
    "\n",
    "Like other widgets, the `CheckBoxGroup` can be disabled and/or show a loading indicator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.CheckBoxGroup(\n",
    "    label='Checkbox Group', value=['Apple', '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 `CheckBoxGroup` 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",
    "toppings = pmui.CheckBoxGroup(\n",
    "    label=\"Select your toppings:\",\n",
    "    options=['Pepperoni', 'Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Extra Cheese'],\n",
    "    value=['Pepperoni', 'Onions'],\n",
    "    inline=True,\n",
    ")\n",
    "\n",
    "def create_order_summary(toppings):\n",
    "    summary = f\"## 🧺 Your Pizza Order\\n\\n\"\n",
    "    summary += f\"• Toppings: {', '.join(toppings) if toppings else 'None'}\\n\"\n",
    "    \n",
    "    base_price = 12.99\n",
    "    topping_price = len(toppings) * 1.50\n",
    "    total = base_price + topping_price\n",
    "    summary += f\"\\n**Total: ${total:.2f}**\"\n",
    "    \n",
    "    return summary\n",
    "\n",
    "order_summary = pn.bind(create_order_summary, toppings=toppings)\n",
    "\n",
    "pmui.Column(\n",
    "    \"## 🍕 Pizza Order Form\",\n",
    "    toppings,\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.CheckBoxGroup(\n",
    "    label='Checkbox Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'],\n",
    ").api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI CheckBox:**\n",
    "\n",
    "- [Material UI CheckBox Reference](https://mui.com/material-ui/react-checkbox/#formgroup) - Complete documentation for the underlying Material UI component"
   ]
  }
 ],
 "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.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}