CheckButtonGroup#

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

import panel as pn
import panel_material_ui as pmui

pn.extension()

The CheckButtonGroup widget allows users to select multiple options from a list by toggling the corresponding buttons. It falls into the broad category of multi-option selection widgets that provide a compatible API and include the MultiSelect, CrossSelector and CheckBoxGroup widgets that share a compatible API.




Parameters:#


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




Core#


    

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

  • options (list or dict): The available options to choose from. Can be a list of strings or a dictionary mapping labels to values.
    • 

  • value (list): The currently selected options.
    • 







Display#


    

  • color (str): The color theme for the buttons
    • 

  • description (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.
    • 

  • label (str): The title of the widget
    • 

  • loading (bool): If True, displays a loading spinner over the component.
    • 

  • orientation (str, default=’horizontal’): Button group orientation, either ‘horizontal’ or ‘vertical’
    • 

  • size: (str, default=’medium’): The size of the widget. One of “small”, “medium” or “large”.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • button_style: Alias for variant
    • 

  • button_type: Alias for color
    • 

  • name: Alias for label
    • 











Basic Usage#


Create a CheckButtonGroup with a list of options. Users can select multiple items by toggling the corresponding buttons:


checkbutton_group = pmui.CheckButtonGroup(label='Check Button Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'])

checkbutton_group








The value parameter returns a list of the currently selected options:


checkbutton_group.value





['Apple', 'Pear']






Dictionary Options#


You can provide options as a dictionary where keys are the displayed labels and values are the actual option values:


dict_group = pmui.CheckButtonGroup(
    label='Check Button Group', value=['A', 'P'], options={'Apple': 'A', 'Banana': 'B', 'Pear': 'P', 'Strawberry': 'S'},
)

dict_group








Let’s observe how the value parameter reflects the selected dictionary values (not the labels):


pn.pane.Str(dict_group.param.value)












Orientation#


Control the layout of buttons using the orientation parameter:


pmui.Column(
    pmui.CheckButtonGroup(label='Horizontal Group', orientation="horizontal", value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry']),
    pmui.CheckButtonGroup(label='Vertical Group', orientation="vertical", value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'])
)












Size Options#


Adjust the CheckButtonGroup size using the size parameter:


pmui.FlexBox(
    *(pmui.CheckButtonGroup(label=size, size=size, value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry']) for size in pmui.CheckButtonGroup.param.size.objects)
)












Disabled and Loading States#


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


pmui.CheckButtonGroup(label='Disabled Group', disabled=True, loading=True, value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry'])












Example: Interactive Pizza Order Form#


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:


import panel as pn
import panel_material_ui as pmui

pn.extension()

toppings = pmui.CheckButtonGroup(
    label="Select your toppings:",
    options=['Pepperoni', 'Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Extra Cheese'],
    value=['Pepperoni', 'Onions'],
    sizing_mode="stretch_width",
)

def create_order_summary(toppings):
    summary = f"## 🧺 Your Pizza Order\n\n"
    summary += f"• Toppings: {', '.join(toppings) if toppings else 'None'}\n"
    
    base_price = 12.99
    topping_price = len(toppings) * 1.50
    total = base_price + topping_price
    summary += f"\n**Total: ${total:.2f}**"
    
    return summary

order_summary = pn.bind(create_order_summary, toppings=toppings)

pmui.Column(
    "## 🍕 Pizza Order Form",
    toppings,
    "---",
    order_summary,
    width=800
)












API Reference#




Parameters#


pmui.CheckButtonGroup(label='Check Button Group', value=['Apple', 'Pear'], options=['Apple', 'Banana', 'Pear', 'Strawberry']).api(jslink=True)














References#


Panel Documentation:



Material UI ToggleButton:





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