Widgets#

import panel as pn
pn.extension()

Panel provides a wide range of widgets to provide precise control over parameter values. The widget classes use a consistent API that allows treating broad categories of widgets as interchangeable. For instance, to select a value from a list of options, you can interchangeably use a Select widget, a RadioButtonGroup, or a range of other equivalent widgets.

Like all other components in Panel, Widget objects will render and sync their state both in the notebook and on Bokeh server:

widget = pn.widgets.TextInput(name='A widget', value='A string')
widget

Changing the text value will automatically update the corresponding parameter, if you have a live running Python process:

widget.value

A string

Updating the parameter value will also update the widget:

widget.value = 'ABCDEFG'

Callbacks and links#

To listen to a parameter change we can call widget.param.watch with the parameter to watch and a function:

widget.param.watch(print, 'value')

Watcher(inst=TextInput(name='A widget', value='ABCDEFG'), cls=<class 'panel.widgets.input.TextInput'>, fn=<built-in function print>, mode='args', onlychanged=True, parameter_names=('value',), what='value', queued=False, precedence=0)

If we change the widget.value now, the resulting change event will be printed:

widget.value = 'A'

Event(what='value', name='value', obj=TextInput(name='A widget', value='A'), cls=TextInput(name='A widget', value='A'), old='ABCDEFG', new='A', type='changed')

In combination with Panel objects, widgets make it possible to build interactive dashboards and visualizations very easily. For more detail on defining callbacks and links between widgets and other components see the Links user guide.

Laying out widgets#

To compose multiple widgets they can be added to a Row, Column or Tabs Panel. To learn more about laying out widgets and panels, see the customization user guide.

slider = pn.widgets.FloatSlider(name='Another widget', width=200)
pn.Column(widget, slider, width=200)

Types of Widgets#

The supported widgets can be grouped into a number of distinct categories with compatible APIs.

Options selectors#

Option selector widgets allow selecting one or more values from a list or dictionary. All widgets of this type have options and value parameters.

Single values#

These widgets allow selecting one value from a list or dictionary of options:

AutocompleteInput: Select a value by entering it into an auto-completing text field.
DiscretePlayer: Displays media-player-like controls which allow playing and stepping through the provided options.
DiscreteSlider: Select a value using a slider.
RadioButtonGroup: Select a value from a set of mutually exclusive toggle buttons.
RadioBoxGroup: Select a value from a set of mutually exclusive checkboxes.
Select: Select a value using a dropdown menu.

Multiple values#

These widgets allow selecting multiple values from a list or dictionary of options:

CheckBoxGroup: Select values by ticking the corresponding checkboxes.
CheckButtonGroup: Select values by toggling the corresponding buttons.
CrossSelector: Select values by moving items between two lists.
MultiSelect: Select values by highlighting in a list.

Type-based selectors#

Type-based selectors provide means to select a value according to its type, and all have a value. The widgets in this category may also have other forms of validation beyond the type, e.g. the upper and lower bounds of sliders.

Single value#

Allow selecting a single value of the appropriate type:

Numeric#

Numeric selectors are bounded by a start and end value:

IntSlider: Select an integer value within a set bounds using a slider.
FloatSlider: Select a float value within a set bounds using a slider.
Player: Displays media-player-like controls, which allow playing and stepping over a range of integer values.

Boolean#

Checkbox: Toggle a single condition between True/False states by ticking a checkbox.
Toggle: Toggle a single condition between True/False states by clicking a button.

Dates#

DatetimeInput: Enter a datetime value as text, parsing it using a pre-defined formatter.
DatePicker: Select a date value using a text box and the browser’s date-picking utility.
DateSlider: Select a date value within a set bounds using a slider.

Text#

PasswordInput: Enter any string using a password input box.
TextInput: Enter any string using a text input box.
TextAreaInput: Enter any string using a multi-line text input box.

Other#

ColorPicker: Select a color using the browser’s color-picking utilities.
FileInput: Upload a file from the frontend, making the file data and MIME type available in Python.
LiteralInput: Enter any Python literal using a text entry box, which is then parsed in Python.

Ranges#

Allow selecting a range of values of the appropriate type stored as a (lower, upper) tuple on the value parameter.

Numeric#

IntRangeSlider: Select an integer range using a slider with two handles.
RangeSlider: Select a floating-point range using a slider with two handles.

Dates#

DateRangeSlider: Select a date range using a slider with two handles.

Other#

Button: Allows triggering events when the button is clicked. Unlike other widgets, it does not have a value parameter.
DataFrame: A widget that allows displaying and editing a Pandas DataFrame.
FileDownload: A button that allows downloading a file on the frontend by sending the file data to the browser.