# 5.8 Widgets

Widgets are interactive controls that can be added to Bokeh applications to provide a front end user interface to a visualization. They can drive new computations, update plots, and connect to other programmatic functionality. 

Widgets can also be used without the Bokeh server in standalone HTML documents through the browser’s Javascript runtime.

### 1. Button

```
from bokeh.layouts import column  # to grid plot graphs 
from bokeh.models import Button

button1 = Button(label="Success", button_type="success")
button2 = Button(label="Primary", button_type="primary")
button3 = Button(label="Warning", button_type="warning")
show(column(button1,button2,button3))
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MCOLwBjYjSQo7I8G3HA%2F-MCOVd_XRQVmqAXguEBP%2FScreenshot%202020-07-16%20at%2023.07.43.png?alt=media\&token=7c493567-5793-4b85-8ca9-67f938aaef62)

### 2. Select

```
from bokeh.models import Select

select = Select(title="Option:", value="hi", options=["hello", "Hola", "Hâllo"])
show(select)
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MCOLwBjYjSQo7I8G3HA%2F-MCOXnZ32q8tOodFL8eF%2Fselect.gif?alt=media\&token=80eb285f-dd4c-4c3c-bd34-cd1b5e896abf)

### 3. Checkbox

```
from bokeh.models import CheckboxGroup
checkbox_group = CheckboxGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=[0, 1])

show(checkbox_group)
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MCOLwBjYjSQo7I8G3HA%2F-MCOWspNmpwukvnD8pmz%2Fcheckbox.gif?alt=media\&token=4515853b-c557-44c2-97c9-6d295bfdde96)

### 4. Color Picker

```
from bokeh.models import ColorPicker
color_picker = ColorPicker(color="#4BBEE3", title="Choose color:", width=200)

show(color_picker)
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MCOLwBjYjSQo7I8G3HA%2F-MCOWoks2xIxlbWBwOHr%2Fcolorpicker.gif?alt=media\&token=5d6a4476-6626-4488-8b3b-105ac93c475f)

### 5. RadioButton

```
from bokeh.models import RadioButtonGroup

radio_button_group = RadioButtonGroup(
        labels=["Option 1", "Option 2", "Option 3"], active=0)

show(radio_button_group)
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MCOLwBjYjSQo7I8G3HA%2F-MCOX-_FdR9IPH7URCYn%2Fradio.gif?alt=media\&token=9d7d0c92-a71a-4a32-a7f5-62b6d131d2ca)

### 6. Text Input

```
from bokeh.models import TextAreaInput
text_input = TextAreaInput(value="Hey!", rows=6, title="Write something:")

show(text_input)
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MDGp_VBy72iJH5oJli6%2F-MDGyh7dBZde1m9euvZh%2Ftext-input.gif?alt=media\&token=88b9795a-207d-4af3-b3e1-8addac9bec77)

### 7. Slider and Range

```
from bokeh.models import Slider
from bokeh.models import RangeSlider
from bokeh.layouts import column

slider = Slider(start=0, end=5, value=1, step=1, title="Count")
range_slider = RangeSlider(start=0, end=10, value=(1,9), step=1, title="Range")

show(column(slider,range_slider))
```

![](https://998709212-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MB-ky7fVqjeXA6EcAbW%2F-MDGp_VBy72iJH5oJli6%2F-MDGz8USgiDcZz5hBq16%2Fslider.gif?alt=media\&token=69412125-62f3-47c3-86f1-428c8e6f5bda)