Checkbox#

Download this notebook from GitHub (right-click to download).

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Checkbox widget allows users to toggle between True and False states by checking or unchecking a box. This widget provides the same functionality as the Toggle widget but with a different visual appearance.


For single boolean options, consider using the Toggle widget instead, as it may provide a more intuitive user experience.


The panel-material-ui Checkbox is built on top of the Material UI Checkbox, providing a modern and accessible interface.




Parameters#


For more details on customization options, see the customization guides.




Core#


    

  • disabled (bool): If True, the widget is not interactive.
    • 

  • indeterminate (bool): Whether the checkbox can be in an indeterminate state (i.e. None).
    • 

  • value (bool): The current state of the checkbox (True for checked, False for unchecked, None for indeterminate).
    • 







Display#


    

  • description_delay (int): Time in milliseconds before displaying the tooltip after hovering. Default is 1000ms.
    • 

  • label (str): The text label displayed next to the checkbox.
    • 







Styling#


    

  • color (str): The color theme of the checkbox.
    • 

  • size (str): The size of the checkbox icon.
    • 

  • sx (dict): Component-level styling options.
    • 

  • theme_config (dict): Theming configuration.
    • 







Aliases#


For compatibility with Panel, some parameters have aliases:


    

  • name: Alias for label
    • 











Basic Usage#


Create a simple checkbox with a label:


checkbox = pmui.Checkbox(label='Checkbox')

checkbox







            
            
The value parameter reflects the checkbox state: True when checked, False when unchecked.


checkbox.value





False






Tooltip Description#


You can add a tooltip that appears on hover by setting the description parameter. Use description_delay to control how long users must hover before the tooltip appears.


CURRENTLY NOT SUPPORTED!


pmui.FlexBox(
    pmui.Checkbox(label='1000ms', description="Delay is 1000ms"),
    pmui.Checkbox(label='100ms', description="Delay is 100ms", description_delay=100)
)







            
            




Indeterminate State#


The indeterminate option can be enabled to allow enabling a third “undefined” state. A checkbox can be toggled to indeterminate state by setting the value to None:


pmui.Checkbox(label='Checkbox', indeterminate=True, value=None)







            
            




Color Options#


Customize the checkbox appearance using the color parameter:


pmui.FlexBox(
    *(pmui.Checkbox(value=True, label=color, color=color) for color in pmui.Checkbox.param.color.objects)
)







            
            




Size Options#


Adjust the checkbox size using the size parameter:


pmui.FlexBox(
    *(pmui.Checkbox(label=size, size=size) for size in pmui.Checkbox.param.size.objects)
)







            
            




Disabled and Loading States#


Like other widgets, the Checkbox can be disabled to prevent interaction and/or show a loading indicator:


pmui.Checkbox(label="Checkbox", disabled=True, loading=True)







            
            




API Reference#




Parameters#


pmui.Checkbox(label="Checkbox").api(jslink=True)







            
            






References#


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity.


Learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.


See also the Material UI Checkbox Reference and API documentation for inspiration.




Download this notebook from GitHub (right-click to download).