Select#

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

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Select widget is used for collecting user provided information from a list or dictionary of options via a dropdown menu or selection area. Its built upon the Material UI Select component.


The Select widget falls into the broad category of single-value, option-selection widgets that provide a compatible API and include the RadioBoxGroup, AutocompleteInput and DiscreteSlider widgets.


Explore more about using widgets to add interactivity to your applications in the Make your component interactive, Link Parameters or
Declarative API guides.




Parameters:#


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




Core#


    

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

  • disabled_options (list): Optional list of options that are disabled, i.e., unusable and un-clickable. If options is a dictionary, the list items must be dictionary values.
    • 

  • filter_on_search (boolean): Whether to filter or highlight the matching options on search.
    • 

  • filter_str (str): Filter string for the dropdown.
    • 

  • groups (dict): A dictionary whose keys are used to visually group the options and whose values are either a list or a dictionary of options to select from. Mutually exclusive with options and valid only if size is 1.
    • 

  • options (list or dict): A list or dictionary of options to select from.
    • 

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

  • value (object): The current value; must be one of the option values.
    • 







Display#


    

  • bookmarks (list): List of bookmarked options that are rendered first.
    • 

  • color (str): The color when active.
    • 

  • dropdown_open (bool): Whether the dropdown is open.
    • 

  • dropdown_height (int): Height of the dropdown menu.
    • 

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

  • variant (str): One of filled, outlined (default), or standard.
    • 







Styling#


    

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

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel, certain parameters are allowed as aliases:


    

  • name: Alias for label.
    • 











Basic Select#


Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport.


select = pmui.Select(label='Age', options=['Ten', 'Twenty', 'Thirty'])

select







            
            
Like most other widgets, Select has a value parameter that can be accessed or set:


select.value





Ten


The options parameter also accepts a dictionary whose keys are going to be the labels of the dropdown menu.


select = pmui.Select(label='Age', options={'Ten': 10, 'Twenty': 20, 'Thirty': 30})

select







            
            
select.value





Ten


Updating the value will display the right label.


select.value = 30









Filled and Standard Variants#


pmui.Row(
    pmui.Select(name='Age', options=['Ten', 'Twenty', 'Thirty'], variant="standard"),
    pmui.Select(name='Age', options=['Ten', 'Twenty', 'Thirty'], variant="filled"),
)







            
            




Colors#


pn.FlexBox(*[pmui.Select(label=color, options=['Ten', 'Twenty', 'Thirty'], color=color) for color in pmui.Select.param.color.objects])







            
            
The color will show when you select a select widget.






Other Parameters#


pn.Row(
    pmui.Select(name='Age', options=['Ten', 'Twenty', 'Thirty'], disabled=True),
)







            
            




Searchable#


You can make the Select widget searchable.


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







            
            
You can configure whether options are filtered or merely highlighted on search.


pn.Row(
    pmui.Select(label='Age', options=['Ten', 'Twenty', 'Thirty'], searchable=True, filter_on_search=True),
    pmui.Select(label='Age', options=['Ten', 'Twenty', 'Thirty'], searchable=True, filter_on_search=False),
)







            
            
You may provide a default string to filter on:


pmui.Select(label='Age', options=['Ten', 'Twenty', 'Thirty', 'Fourty', 'Fifty'], searchable=True, filter_str="F")







            
            





Disabled Options#


A subset of the displayed items can be disabled with disabled_options. The widget value cannot be set to one of the disabled_options, either programmatrically or with the user interface.


pmui.Select(name='Age', options=['Ten', 'Twenty', 'Thirty'], disabled_options=['Twenty'])







            
            




Grouping#


The items displayed in the dropdown menu can be grouped visually (also known as optgroup) by setting the groups parameter instead of options. groups accepts a dictionary whose keys are used to group the options and whose values are defined similarly to how options are defined.


grouped = pmui.Select(name='Select', groups={'Europe': ['Greece', 'France'], 'Africa': ['Algeria', 'Congo']})

grouped







            
            
select.value





Ten






Bookmarks#


pmui.Select(name='Age', options=['Ten', 'Twenty', 'Thirty', 'Fourty', 'Fifty'], bookmarks=['Ten', 'Fourty'])







            
            




Controls#


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


pn.Row(select.controls(jslink=True), select)







            
            


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