{
 "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 `Checkbox` widget allows users to toggle between `True` and `False` states by checking or unchecking a familiar checkbox interface. This widget provides the same functionality as the `Toggle` and `Switch` widgets but with a traditional, universally recognized visual appearance.\n",
    "\n",
    "Perfect for forms, settings, and multi-selection scenarios, the `Checkbox` widget offers the classic interaction pattern users expect. Its unique `indeterminate` state makes it especially useful for hierarchical selections and \"select all\" functionality.\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): When True, the widget becomes non-interactive and appears grayed out.\n",
    "* **`indeterminate`** (bool): Enables a third \"undefined\" state, perfect for representing partial selections in hierarchical data.\n",
    "* **`value`** (bool): The current state of the checkbox (`True` for checked, `False` for unchecked, `None` for indeterminate when enabled).\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`label`** (str): The descriptive text displayed alongside the checkbox.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`color`** (str): The color theme applied to the checkbox when checked or in indeterminate state.\n",
    "- **`size`** (str): Controls the physical size of the checkbox icon.\n",
    "- **`sx`** (dict): Advanced styling options for fine-tuned appearance control.\n",
    "- **`theme_config`** (dict): Theme-level configuration for consistent styling across your application.\n",
    "\n",
    "##### Aliases\n",
    "\n",
    "For seamless compatibility with Panel widgets, certain parameters accept aliases:\n",
    "\n",
    "- **`name`**: Alternative parameter name for `label`\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Getting started with the Checkbox widget is straightforward. Here's how to create a simple checkbox with a descriptive label:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox = pmui.Checkbox(label='Checkbox')\n",
    "\n",
    "checkbox"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `value` parameter automatically updates to reflect the checkbox state: `True` when checked, `False` when unchecked. You can also programmatically set this value to control the checkbox state."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "checkbox.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Indeterminate State\n",
    "\n",
    "The `indeterminate` option enables a powerful third state that's perfect for hierarchical selections and \"select all\" scenarios. When enabled, you can set the checkbox to an undefined state by setting the `value` to `None`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Checkbox(label='Checkbox', indeterminate=True, value=None)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color Options\n",
    "\n",
    "Customize your checkbox's appearance to match your application's design language using the `color` parameter. Each color provides different visual emphasis and semantic meaning:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    *(pmui.Checkbox(value=True, label=color, color=color) for color in pmui.Checkbox.param.color.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Size Options\n",
    "\n",
    "Choose the appropriate checkbox size for your interface using the `size` parameter. Different sizes work better in different contexts:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    *(pmui.Checkbox(label=size, size=size) for size in pmui.Checkbox.param.size.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Disabled and Loading States\n",
    "\n",
    "The `Checkbox` widget supports both disabled and loading states to provide clear feedback during various application states. Use these features to guide user interactions effectively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Checkbox(label=\"Checkbox\", disabled=True, loading=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Real-World Example: Preference Selection\n",
    "\n",
    "Let's create a practical example that demonstrates how checkboxes work in real applications. This preference selector shows how to bind checkbox values to dynamic content updates:"
   ]
  },
  {
   "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",
    "like_rock_roll = pmui.Checkbox(label=\"I like rock and roll\", value=True)\n",
    "\n",
    "def create_statement(value):\n",
    "    if value:\n",
    "        return \"👍 Rock and roll is great!\"\n",
    "    \n",
    "    return \"👎 Rock and roll is not my thing.\"\n",
    "\n",
    "statement=pn.bind(create_statement, like_rock_roll)\n",
    "\n",
    "pmui.Column(like_rock_roll, statement)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Interactive Parameter Explorer\n",
    "\n",
    "The `Checkbox` widget offers numerous customization options that can be modified from both Python and JavaScript. Explore these parameters interactively to see their effects in real-time:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Checkbox(label=\"Checkbox\").api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Further Learning\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Master the art of creating interactive applications with widgets and dynamic updates\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect widget parameters to create responsive, reactive user interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build sophisticated parameter-driven applications with minimal code\n",
    "\n",
    "**Material UI Checkbox Documentation:**\n",
    "\n",
    "- [Material UI Checkbox Reference](https://mui.com/material-ui/react-checkbox/) - Comprehensive documentation for the underlying Material UI component\n",
    "- [Material UI Checkbox API](https://mui.com/material-ui/api/checkbox/) - Complete API reference with advanced configuration options and examples"
   ]
  }
 ],
 "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
}