Widgets#

Panel offers a wide range of widgets for precise control of parameter values. The widget classes use a consistent API that allows broad categories of widgets to be treated as interchangeable. For example, to select a value from a list of options, you can use SelectWidget, a RadioButtonGroupwidget, or an equivalent widget interchangeably.

Like all other components in Panel, Widget objects can also synchronise their state both in the notebook and on the bokeh server:

[1]:

import panel as pn

pn.extension()

[2]:

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

[2]:

If you change the text value, the corresponding parameter is automatically updated:

[3]:

widget.value

[3]:

'A string'

Updating the parameter value also updates the widget:

[4]:

widget.value = "Another string"

Callbacks and links#

In order to notice a parameter change, we can call a function widget.param.watch with the parameter to be observed:

[5]:

from __future__ import print_function

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

[5]:

Watcher(inst=TextInput(name='A widget', value='Another string'), 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 now widget.value, the resulting event is output.

[6]:

widget.value = "A"

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

PanelWidgets, in combination with objects, enable the easy creation of interactive dashboards and visualisations. For more information on defining callbacks and links between widgets and other components, see the User Guide.

Widgets#

To put several widgets together, they can be added to a Row-, Column- or Tabs panel. For more information on the layout of widgets and control panels, see Declare Custom Widgets.

[7]:

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

[7]:

Widget categories#

The supported widgets can be divided into different categories based on their compatible APIs.

Option selection#

With option selection widgets you can select one or more values from a list or a dictionary. All widgets of this type have options and value parameters.

Options	Widget	Description
Individual values		With these widgets you can choose a value from a `list` or a `dictionary`
	`AutocompleteInput`	selects one `value` rom an automatically completed text field
	`DiscretePlayer`	displays controls of `mediaplayer`, that allow you to play and step through the options available
	`DiscreteSlider`	selects a value with a slider
	`RadioButtonGroup`	selects a value from a series of mutually exclusive toggle keys
	`RadioBoxGroup`	selects a value from a series of mutually exclusive check boxes
	`Select`	selects a value from a drop-down menu
Multiple values		With these widgets you can select several values from a `list` or a `dictionary`
	`CheckBoxGroup`	select values by activating the corresponding check boxes
	`CheckButtonGroup`	select values by toggling the corresponding buttons
	`CrossSelector`	select values by moving items between two lists
	`MultiSelect`	select values by marking them in a list

Type-based selectors#

Type-based selectors offer the possibility of choosing a value according to its type. All selectors have a value. In addition to the type, the widgets in this category can also have other forms of validation, for example the upper and lower limits of sliders.

	Types	Widget	Description
Individual values			allows the selection of a single `value` type
	Numerically		Numeric selectors are limited by `start` and `end` values
		`IntSlider`	selects an integer value within a specified range with a slider
		`FloatSlider`	uses a slider to select a floating point value within a specified range
		`Player`	displays controls of the `mediaplayer`, that allow you to play and cycle through a range of integer values
	Boolean values
		`Checkbox`	toggles a single condition between `True`/`False` by checking a box
		`Toggle`	toggles a single condition between `True`/`False` by clicking a button
	Date
		`DatetimeInput`	selects a date value using a text box and the browser’s date picker utility
		`DatePicker`	enters a date/time value as text and analyse it with a predefined formatter
		`DateSlider`	selects a date value within a specified range with a slider
	Text
		`TextInput`	enters any character string via a text entry field
	Other
		`ColorPicker`	selects a color using the browser’s color-picking utilities
		`FileInput`	uploads a file from the frontend and make the data and MIME type available in Python
		`LiteralInput`	enters any Python literal via a text entry field, which will then be parsed in Python
Areas			enables the selection of a value range of the corresponding type, which is saved as a `(lower, upper)` tuple for the `value` parameter
	Numerically
		`IntRangeSlider`	selects an integer range with a slider with two handles
		`RangeSlider`	selects a floating point area using a slider with two handles
	Dates
		`DateRangeSlider`	selects a date range using a slider with two handles
Other
		`Audio`	displays an audio player to which an audio file has been assigned locally or remotely, and allows access and control of the player status
		`Button`	allows events to be triggered when the button is clicked; unlike other widgets, it does not have an `value` parameter