Now Reading
A Complete Guide To Ipywidget – Interactive HTML Widgets For Jupyter Notebook

A Complete Guide To Ipywidget – Interactive HTML Widgets For Jupyter Notebook

Himanshu Sharma
Ipywidget
W3Schools

Widgets are the part of a GUI that allows the user to interface with the application. Widgets can make our jupyter notebook look lively and interactive. Widgets are elements like buttons, drop-down list, slider, etc.

Widgets allow users to interact with the notebook, manipulate output according to the selection of widget and controlling events. It can be used to record the user’s input and can be implemented easily in a jupyter notebook.

Ipywidget is an open-source python library that is used to generate different types of widgets and implement them in a jupyter notebook. It is easy to use and provides a variety of interactive widgets.



In this article, we will explore what are the different types of widgets that ipywidget provides. 

Implementation:

We will start by installing ipywidget using pip install ipywidget

  1. Importing required library

We will import ipywidgets and then start exploring every widget one by one.

import ipywidget as widget

  1. Loading different types of widgets

Ipywidget provides a large variety of widgets, let us start exploring them.

  1. Slider

A slider can be used to select a value if we have a defined minimum and maximum values for eg. If you want to rate something from 1 to 10 we can use a slider. Let us see how we can create a slider widget using ipywidget.

widget.IntSlider(min=1, max=10, step=1, description='Rating',value=1)

Ipywidget

The slider can be dragged to select the desired value, we can change the max, min, value, description parameter according to our requirements.

  1. Drop-Down

All of us must have filled forms online in which we need to select our Country from a list of Countries. This list is called drop-down in which we click on the drop-down arrow and select a particular value.  

widget.Dropdown(options=['USA', 'Pakistan', 'India', 'China', 'Sri Lanka'], value=  'USA', description='Country:')

Ipywidget

Similarly, we can use drop-down where we have some predefined values and the user can select from that only.

  1. Checkbox

A checkbox can be used when the user can select more than value for a particular attribute or can select a fixed option from minimum options For eg. While we apply filters, we tick the respective checkbox.

widget.Checkbox(description='Filter', value=True, disabled=False)

  1. Radio Buttons

Radio Buttons are used to select only one of the options from the given options. For eg. Gender inputs can be taken using Radio Buttons because you only need to select one of the options. 

widget.RadioButtons( options=['Male', 'Female', 'Other'], description ='Gender',disabled=False)

Ipywidget
  1. Text Area

Text area can be used when the user needs to provide some text describing something like an address, introduction, answer to a question, etc. 

widget.Text(placeholder='Type Here', description='Address:', disabled=False)

  1. Password

If a user needs to enter the password field we can use the password widget which encrypts the data as soon as we write it.

widget.Password(placeholder='Enter password', description= 'Password:',    disabled=False)

                                      

  1. Date Picker

While entering the date of birth in a form we can use the date picker widget. It allows us to pick a date from the calendar provided by it.

widget.DatePicker(description='Date Of Birth', disabled=False)

Ipywidget
  1. Color Picker

Similar to date picker we can use the color picker to select a particular color from a color palette. 

widget.ColorPicker( concise=False, description='Select a color',   value='Green', disabled=False)

See Also
NLP Profiler Banner

                                                   

The concise parameter should be set to False to search for a color by entering the name of the color.

  1. Progress Bar

Ipywidget allows us to create a progress bar using one of its widgets named Progress. It can be used to show that something is loading or progress of a certain work.

widget.IntProgress( value=1, min=0, max=10, step=1,description='Progress:', bar_style='info',orientation='horizontal')

                                   

The color of the progress bar is set by bar_style, also we can change the orientation from horizontal to vertical.

  1.  File Upload

Generally while filling out a form for job application companies ask to upload the Resume by clicking on a certain button and uploading the file. Similarly, we can create this upload file widget using ipywidget.

widget.FileUpload( accept='.pdf', multiple=False )

We can select different file formats that can be uploaded by allowing them in the ‘accept’ parameter, also in order to allow multiple files to be uploaded, we will set the ‘multiple’ parameter as True.

These are some of the basic and most used widgets that can be created using ipywidgets. All the widgets are useful for creating different forms and applications. As you have seen above it only requires a line of code to create every widget so it is easy to use also. 

You can check out all the widgets that ipywidget provides by running the command given below.

print(dir(widget))

Conclusion:

In this article, we explored Ipywidget which is used to create widgets and allows user interaction in jupyter notebooks. We learned how to create some of the most used widgets and where they are used. Ipywidgets has a long list of widgets which are applicable in different fields and forms. By using ipywidget we can easily create widgets for forms and applications in jupyter notebook.

What Do You Think?

If you loved this story, do join our Telegram Community.


Also, you can write for us and be one of the 500+ experts who have contributed stories at AIM. Share your nominations here.
What's Your Reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0

Copyright Analytics India Magazine Pvt Ltd

Scroll To Top