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:

import panel as pn
pn.extension()

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

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

widget.value

'A string'

Updating the parameter value also updates the widget:

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:

from __future__ import print_function

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

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')

If we change now widget.value, the resulting event is output.

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 the customization user guide.

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

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