How to add widgets in jupyter using IPyWidgets

Have you ever found yourself getting bored with the basic visuals of the Jupyter notebook, including the way we input values? Well, you're not alone. Many people have faced this and wished for a way to change it. Luckily, now you have an option — Widgets.

What is Jupyter?

Jupyter is an open-source web application that allows interactive and collaborative computing. It provides an environment for creating, sharing, and presenting documents called "notebooks." Jupyter notebooks integrate code, text, visualizations, and multimedia, making them ideal for data analysis, scientific computing, machine learning, and educational purposes. We can write and execute code in various programming languages (e.g., Python, R, Julia) directly within the notebook interface, which supports various text formatting, equations, and interactive widgets. Its interactive nature fosters data exploration, experimentation, and documentation, making it popular among researchers, data scientists, educators, and anyone seeking an interactive computing environment.

In this Answer, we will be looking at the implementation of the interactive widgets in Jupyter notebooks.

What are widgets?

Widgets, in general, refer to user interface elements or controls that allow users to interact with a software application or system. These interactive elements allow users to input data, make selections, and adjust parameters, leading to dynamic changes in the application's behavior or display. Ever seen the clock being displayed on the desktop of any Windows computer system or the current weather being displayed? These are all Windows in-built widgets. Similarly, Jupyter notebooks also have various widgets which aid in interactivity, such as:

  • Toggle button widget

  • Dropdown menu widget

  • Text area widget

  • File upload widget

  • Button widget

  • Output widget

  • Date picker widget

  • Color picker widgets

The library we will be using to access these widgets is the IPyWidgets library and it can be installed through the following command:

pip install ipywidgets
from IPython.display import display

Jupyter widgets

Let's look at the code for each widget.

Slider widget

slider = widgets.IntSlider(
    value=50,
    min=0,
    max=100,
    step=1,
    description='Slider:',
    orientation='horizontal'
)
display(slider)
Explanation

  • value: The value parameter sets the initial value of the slider to 50.

  • min: This parameter specifies the minimum value that the slider can take, which is 0 in this case.

  • max: The max parameter specifies the maximum value that the slider can take, which is 100 in this case.

  • step: The step parameter determines the increment between consecutive values of the slider. In this case, the slider increments by 1.

  • description: The description parameter sets the label or text displayed next to the slider. In this case, it will display 'Slider'.

  • orientation: The orientation parameter determines the orientation of the slider. Setting it to 'horizontal' means the slider will be displayed horizontally.

Text area widget

text_widget = widgets.Text(
    value='Enter your name',
    description='Name:',
    disabled=False
)
display(text_widget)
Explanation

  • value: The value parameter sets the initial text displayed in the text input box. In this case, the initial text will be 'Enter your name'.

  • description: The description parameter sets the label or text displayed next to the text input box. In this case, it will display 'Name'.

  • disabled: The disabled parameter determines whether the text input box is disabled or enabled for user input. Setting it to False means the text input is enabled, allowing users to input text.

Dropdown menu widget

dropdown_widget = widgets.Dropdown(
    options=['Option 1', 'Option 2', 'Option 3'],
    value='Option 1',
    description='Dropdown:',
    disabled=False,
)
display(dropdown_widget)
Explanation

  • options: The options parameter is a list that specifies the available options in the dropdown. In this case, the dropdown will have three options: 'Option 1', 'Option 2', and 'Option 3'.

  • value: The value parameter sets the initial value of the selected option in the dropdown. In this case, 'Option 1' will be the default selected option.

  • description: The description parameter sets the label or text displayed next to the dropdown. In this case, it will display 'Dropdown'.

  • disabled: The disabled parameter determines whether the dropdown is enabled or disabled. Setting it to False means the dropdown is enabled, allowing users to select an option.

Toggle button widget

toggle_button_widget = widgets.ToggleButton(
    value=False,
    description='Toggle:',
    disabled=False,
    button_style='danger',  # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Toggle me'
)
display(toggle_button_widget)

Explanation

  • value: The value parameter sets the initial state of the toggle button. In this case, the initial state will be "off" (False).

  • description: The description parameter sets the label or text displayed next to the toggle button. In this case, it will display 'Toggle'.

  • disabled: The disabled parameter determines whether the toggle button is enabled or disabled. Setting it to False means the button is enabled, allowing users to interact with it.

  • button_style: The button_style parameter allows you to choose the appearance style of the toggle button. It can be set to 'success', 'info', 'warning', 'danger', or left empty for the default style. In this case, the button will have a 'danger' style.

  • tooltip: The tooltip parameter sets the tooltip text that appears when the user hovers the mouse over the toggle button. In this case, it will display 'Toggle me'.

Color picker widget

color_picker_widget = widgets.ColorPicker(
    value='#ff0000',
    description='Color:',
    disabled=False
)
display(color_picker_widget)

Explanation

  • widgets.ColorPicker: This is a class provided by the Jupyter notebook's widgets module to create a color picker widget.

  • value: The value parameter sets the initial color value of the color picker. In this case, the initial color will be red (#ff0000), which is specified in hexadecimal RGB format.

  • description: The description parameter sets the label or text displayed next to the color picker. In this case, it will display 'Color'.

  • disabled: The disabled parameter determines whether the color picker is enabled or disabled. Setting it to False means the color picker is enabled, allowing users to interact with it.

Date picker widget 

date_picker_widget = widgets.DatePicker(
    description='Pick a Date:',
    disabled=False
)
display(date_picker_widget)

Explanation

  • description: The description parameter sets the label or text displayed next to the date picker. In this case, it will display 'Pick a Date'.

  • disabled: The disabled parameter determines whether the date picker is enabled or disabled. Setting it to False means the date picker is enabled, allowing users to interact with it.

Check box widget

checkbox_widget = widgets.Checkbox(
    value=False,
    description='Checkbox:',
    disabled=False,
    indent=False
)
display(checkbox_widget)

Explanation

  • value: The value parameter sets the initial state of the checkbox. In this case, the initial state will be unchecked (False).

  • description: The description parameter sets the label or text displayed next to the checkbox. In this case, it will display 'Checkbox'.

  • disabled: The disabled parameter determines whether the checkbox is enabled or disabled. Setting it to False means the checkbox is enabled, allowing users to interact with it.

  • indent: The indent parameter determines whether to add an indent (margin) before the checkbox. Setting it to False means no indent will be added.

Accessing values

widget_value = widget_variable.value
print(widget_value)

Complete code

Note: Run all code cells in the output to display widgets.

import ipywidgets as widgets
from IPython.display import display

# Create a slider widget
slider = widgets.IntSlider(
    value=50,
    min=0,
    max=100,
    step=1,
    description='Slider:',
    orientation='horizontal'
)

# Display the slider widget
display(slider)

text_widget = widgets.Text(
    value='Enter your name',
    description='Name:',
    disabled=False
)
display(text_widget)

dropdown_widget = widgets.Dropdown(
    options=['Option 1', 'Option 2', 'Option 3'],
    value='Option 1',
    description='Dropdown:',
    disabled=False,
)

display(dropdown_widget)

checkbox_widget = widgets.Checkbox(
    value=False,
    description='Checkbox:',
    disabled=False,
    indent=False
)
display(checkbox_widget)

button_widget = widgets.Button(
    description='Click Me',
    disabled=False,
    button_style='',  # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check'  # Font Awesome icon name without the 'fa-' prefix
)
display(button_widget)

toggle_button_widget = widgets.ToggleButton(
    value=False,
    description='Toggle:',
    disabled=False,
    button_style='danger',  # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Toggle me'
)
display(toggle_button_widget)

color_picker_widget = widgets.ColorPicker(
    value='#ff0000',
    description='Color:',
    disabled=False
)
display(color_picker_widget)

date_picker_widget = widgets.DatePicker(
    description='Pick a Date:',
    disabled=False
)
display(date_picker_widget)


val= date_picker_widget.value
print(val)

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved