CrossSelector#

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

This component replaces a classic Panel component

This component is being integrated into Panel. Starting with Panel 1.10 it is available as pn.ui.CrossSelector, documented in the Panel reference, and supersedes the classic pn.widgets.CrossSelector. On Panel 1.10 and later, prefer the panel.ui namespace.

import panel as pn
import panel_material_ui as pmui

pn.extension()

The CrossSelector widget allows selecting multiple values from a list of options. It falls into the broad category of multi-value, option-selection widgets that provide a compatible API and include the MultiSelect, CheckBoxGroup and CheckButtonGroup widgets.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • disabled (boolean): Whether the widget is editable
    • 

  • options (list or dict): List or dictionary of options
    • 

  • searchable (boolean): Whether to render a search box.
    • 

  • value (list): Currently selected option values
    • 







Display#


    

  • color (str): The color variant of the inputs, which must be one of 'default' (white), 'primary' (blue), 'success' (green), 'info' (yellow), 'light' (light), or 'danger' (red).
    • 

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







Styling#


    

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

  • theme_config (dict): Theming API.
    • 

  • visual_size (str, default=”medium”): Controls the visual size/density of the cross-selector control. One of “small”, “medium”, or “large”.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 











Basic Usage#


The CrossSelector provides a convenient API for selecting from multiple options:


cross_select = pmui.CrossSelector(label='CrossSelector', value=['Apple', 'Pear'],
    options=['Apple', 'Banana', 'Pear', 'Strawberry'])

cross_select







            
            
CrossSelector.value returns a list of the currently selected options:


cross_select.value





['Apple', 'Pear']






Searchable#


You can also disable the search field in the selector by setting searchable=False:


pmui.CrossSelector(label='Age', options=['Ten', 'Twenty', 'Thirty'], searchable=False)







            
            




Colors#


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







            
            




Visual Size#


Customize the visual size/density of the CrossSelector widget using the visual_size parameter:


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







            
            




Disabled & Loading#


Like all widgets the CrossSelector supports disabled and loading states:


pmui.CrossSelector(label='Ages', options=['Ten', 'Twenty', 'Thirty'], disabled=True, loading=True)







            
            




Icon Labels#


Material icon tokens like :material/zoom_out_map: render as icons in labels and option labels.


icon_cross_selector = pmui.CrossSelector(
    label=":material/checklist: Status",
    value=["high", "paused"],
    options={
        ":material/priority_high: High": "high",
        ":material/pause_circle: Paused": "paused",
        ":material/low_priority: Low": "low",
    },
)

icon_cross_selector







            
            




API Reference#




Parameters#


The CrossSelector widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pmui.CrossSelector(
    label='CrossSelector', value=['Apple', 'Pear'],
    options=['Apple', 'Banana', 'Pear', 'Strawberry']
).api(jslink=True)







            
            






References#


Panel Documentation:



Material UI Transfer List:





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