Widget List

Complete list

For a complete list of the GUI widgets available to you, you can list the registered widget types. Widget and DOMWidget, not listed below, are base classes.


In [1]:
import ipywidgets as widgets
sorted(widgets.Widget.widget_types)


Out[1]:
['Jupyter.Accordion',
 'Jupyter.BoundedFloatText',
 'Jupyter.BoundedIntText',
 'Jupyter.Box',
 'Jupyter.Button',
 'Jupyter.ButtonStyle',
 'Jupyter.Checkbox',
 'Jupyter.ColorPicker',
 'Jupyter.Controller',
 'Jupyter.ControllerAxis',
 'Jupyter.ControllerButton',
 'Jupyter.DatePicker',
 'Jupyter.Dropdown',
 'Jupyter.FloatProgress',
 'Jupyter.FloatRangeSlider',
 'Jupyter.FloatSlider',
 'Jupyter.FloatText',
 'Jupyter.HBox',
 'Jupyter.HTML',
 'Jupyter.HTMLMath',
 'Jupyter.Image',
 'Jupyter.IntProgress',
 'Jupyter.IntRangeSlider',
 'Jupyter.IntSlider',
 'Jupyter.IntText',
 'Jupyter.Label',
 'Jupyter.Play',
 'Jupyter.RadioButtons',
 'Jupyter.Select',
 'Jupyter.SelectMultiple',
 'Jupyter.SelectionSlider',
 'Jupyter.SliderStyle',
 'Jupyter.Tab',
 'Jupyter.Text',
 'Jupyter.Textarea',
 'Jupyter.ToggleButton',
 'Jupyter.ToggleButtons',
 'Jupyter.VBox',
 'Jupyter.Valid',
 'jupyter.DirectionalLink',
 'jupyter.Link']

Numeric widgets

There are 8 widgets distributed with IPython that are designed to display numeric values. Widgets exist for displaying integers and floats, both bounded and unbounded. The integer widgets share a similar naming scheme to their floating point counterparts. By replacing Float with Int in the widget name, you can find the Integer equivalent.

IntSlider


In [2]:
widgets.IntSlider(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='i',
    slider_color='white'
)


FloatSlider


In [3]:
widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='.1f',
    slider_color='white'
)


Sliders can also be displayed vertically.


In [4]:
widgets.FloatSlider(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='vertical',
    readout=True,
    readout_format='.1f',
    slider_color='white'
)


IntRangeSlider


In [5]:
widgets.IntRangeSlider(
    value=[5, 7],
    min=0,
    max=10,
    step=1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='i',
    slider_color='white',
    color='black'
)


FloatRangeSlider


In [6]:
widgets.FloatRangeSlider(
    value=[5, 7.5],
    min=0,
    max=10.0,
    step=0.1,
    description='Test:',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
    readout_format='i',
    slider_color='white',
    color='black'
)


IntProgress


In [7]:
widgets.IntProgress(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Loading:',
    bar_style='', # 'success', 'info', 'warning', 'danger' or ''
    orientation='horizontal'
)


FloatProgress


In [8]:
widgets.FloatProgress(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Loading:',
    bar_style='info',
    orientation='horizontal'
)


BoundedIntText


In [9]:
widgets.BoundedIntText(
    value=7,
    min=0,
    max=10,
    step=1,
    description='Text:',
    disabled=False
)


BoundedFloatText


In [10]:
widgets.BoundedFloatText(
    value=7.5,
    min=0,
    max=10.0,
    step=0.1,
    description='Text:',
    disabled=False,
    color='black'
)


IntText


In [11]:
widgets.IntText(
    value=7,
    description='Any:',
    disabled=False
)


FloatText


In [12]:
widgets.FloatText(
    value=7.5,
    description='Any:',
    disabled=False,
    color='black'
)


Boolean widgets

There are three widgets that are designed to display a boolean value.

ToggleButton


In [13]:
widgets.ToggleButton(
    value=False,
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Description',
    icon='check'
)


Checkbox


In [14]:
widgets.Checkbox(
    value=False,
    description='Check me',
    disabled=False
)


Valid

The valid widget provides a read-only indicator.


In [15]:
widgets.Valid(
    value=False,
    description='Valid!',
    disabled=False
)


Selection widgets

There are four widgets that can be used to display single selection lists, and one that can be used to display multiple selection lists. All inherit from the same base class. You can specify the enumeration of selectable options by passing a list. You can also specify the enumeration as a dictionary, in which case the keys will be used as the item displayed in the list and the corresponding value will be returned when an item is selected.


In [16]:
widgets.Dropdown(
    options=['1', '2', '3'],
    value='2',
    description='Number:',
    disabled=False,
    button_style='' # 'success', 'info', 'warning', 'danger' or ''
)


The following is also valid:


In [17]:
widgets.Dropdown(
    options={'One': 1, 'Two': 2, 'Three': 3},
    value=2,
    description='Number:',
)


RadioButtons


In [18]:
widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
#     value='pineapple',
    description='Pizza topping:',
    disabled=False
)


Select


In [19]:
widgets.Select(
    options=['Linux', 'Windows', 'OSX'],
#     value='OSX',
    description='OS:',
    disabled=False
)


SelectionSlider


In [20]:
widgets.SelectionSlider(
    options=['scrambled', 'sunny side up', 'poached', 'over easy'],
    value='sunny side up',
    description='I like my eggs ...',
    disabled=False,
    continuous_update=False,
    orientation='horizontal',
    readout=True,
#     readout_format='i',
#     slider_color='black'
)


ToggleButtons


In [21]:
widgets.ToggleButtons(
    options=['Slow', 'Regular', 'Fast'],
    description='Speed:',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Description',
#     icon='check' 
)


SelectMultiple

Multiple values can be selected with shift and/or ctrl (or command) pressed and mouse clicks or arrow keys.


In [22]:
widgets.SelectMultiple(
    options=['Apples', 'Oranges', 'Pears'],
    value=['Oranges'],
    description='Fruits',
    disabled=False
)


String widgets

There are 4 widgets that can be used to display a string value. Of those, the Text and Textarea widgets accept input. The Label and HTML widgets display the string as either Label or HTML respectively, but do not accept input.

Text


In [23]:
widgets.Text(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False   
)


Textarea


In [24]:
widgets.Textarea(
    value='Hello World',
    placeholder='Type something',
    description='String:',
    disabled=False
)


Label


In [25]:
widgets.Label(
    value="$$\\frac{n!}{k!(n-k)!} = \\binom{n}{k}$$",
    placeholder='Some LaTeX',
    description='Some LaTeX',
    disabled=False
)


HTML


In [26]:
widgets.HTML(
    value="Hello <b>World</b>",
    placeholder='Some HTML',
    description='Some HTML',
    disabled=False
)


HTML Math


In [27]:
widgets.HTMLMath(
    value=r"Some math and <i>HTML</i>: $x^2$ and $$\frac{x+1}{x-1}$$",
    placeholder='Some HTML',
    description='Some HTML',
    disabled=False
)


Image


In [28]:
file = open("images/WidgetArch.png", "rb")
image = file.read()
widgets.Image(
    value=image,
    format='png',
    width=300,
    height=400
)


Button


In [29]:
widgets.Button(
    description='Click me',
    disabled=False,
    button_style='', # 'success', 'info', 'warning', 'danger' or ''
    tooltip='Click me',
    icon='check'
)


Play (Animation) widget

The Play widget is useful to perform animations by iterating on a sequence of integers with a certain speed.


In [30]:
play = widgets.Play(
#     interval=10,
    value=50,
    min=0,
    max=100,
    step=1,
    description="Press play",
    disabled=False
)
slider = widgets.IntSlider()
widgets.jslink((play, 'value'), (slider, 'value'))
widgets.HBox([play, slider])


Date picker


In [31]:
widgets.DatePicker(
    description='Pick a Date'
)


Color picker


In [32]:
widgets.ColorPicker(
    concise=False,
    description='Pick a color',
    value='blue'
)


Controller


In [33]:
widgets.Controller(
    index=0,
)


Layout widgets

Box

HBox


In [34]:
items = [widgets.Label(str(i)) for i in range(4)]
widgets.HBox(items)


VBox


In [35]:
items = [widgets.Label(str(i)) for i in range(4)]
widgets.HBox([widgets.VBox([items[0], items[1]]), widgets.VBox([items[2], items[3]])])


Accordion


In [36]:
accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()])
accordion.set_title(0, 'Slider')
accordion.set_title(1, 'Text')
accordion


Tabs


In [37]:
list = ['P0', 'P1', 'P2', 'P3', 'P4']
children = [widgets.Text(description=name) for name in list]
tab = widgets.Tab(children=children)
tab