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'

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:

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#

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.

  • Progress: A Progress bar which allows updating current the progress towards some goal or indicate an ongoing process.

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Right click to download this notebook from GitHub.