Skip to content

Observable Inputs

NotebooksLearn about notebooks vs. projects

These lightweight interface components—buttons, sliders, dropdowns, tables, and the like—help you explore data and build interactive displays. For a walkthrough of how you might use these to support data analysis in a notebook, see Hello, Inputs!.


This document describes the syntax used in Observable notebooks. It is different from projects using Observable Framework.


Declare your inputs with viewof, like so:

viewof gain = Inputs.range([0, 11], {value: 5, step: 0.1, label: "Gain"})

The range input above (created with Inputs.range()) specifies the total range of values a user can choose from (0 to 11), along with options for:

  • value: the default starting value or option of an input
  • step: the increments along the range (here, change by increments of 0.1)
  • label: a label informing or prompting the user
A JavaScript cell containing code to create a range slider input, using viewof to both view the widget in the notebook and store the value for use elsewhere. The code shown to make the input is: viewof gain = Inputs.range([0, 11], {value: 5, step: 0.1, label: “Gain”})
A range slider created with Inputs.range.

Now you can reference the input's value (here gain) in any cell, and the cell will run whenever the input changes. No event listeners required!

To quickly create an input, open the add cell menu by clicking the plus sign in the left margin, then search for an input by name (or search for "input" to see all built-in input options). Click on the desired input, and a new JavaScript cell is added containing placeholder code that you can update to create your input.

Observable Inputs are released under the ISC license and depend only on Hypertext Literal, our tagged template literal for safely generating dynamic HTML. If you are interested in contributing or wish to report an issue, please see our repository. For recent changes, please see our release notes.


These basic inputs will get you started:

  • Button: do something when a button is clicked
  • Toggle: toggle between two values (on or off)
  • Checkbox: choose any from a set
  • Radio: choose one from a set
  • Range or Number: choose a number in a range (slider)
  • Select: choose one or any from a set (drop-down menu)
  • Text: enter freeform single-line text
  • Textarea: enter freeform multi-line text
  • Date or Datetime: choose a date
  • Color: choose a color
  • File: choose a local file

Minimal examples of each are shown below. Click on the input name and links for examples to explore and interact with in Observable notebooks.


Do something when a button is clicked. API Reference ›

viewof clicks = Inputs.button("Click me")


Toggle between two values (on or off). API Reference ›

viewof mute = Inputs.toggle({label: "Mute"})


Choose any from a set. API Reference ›

viewof flavors = Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"})


Choose one from a set. API Reference ›

viewof flavor =["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"})


Pick a number. API Reference ›

viewof n = Inputs.range([0, 255], {step: 1, label: "Favorite number"})


Choose one, or any, from a menu. API Reference ›

viewof homeState =[null].concat(stateNames), {label: "Home state"})


Enter freeform single-line text. API Reference ›

viewof name = Inputs.text({label: "Name", placeholder: "What’s your name?"})


Enter freeform multi-line text. API Reference ›

viewof bio = Inputs.textarea({label: "Biography", placeholder: "What’s your story?"})


Choose a date, or a date and time. API Reference ›

viewof birthday ={label: "Birthday"})


Choose a color. API Reference ›

viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})


Choose a local file. API Reference ›

viewof file = Inputs.file({label: "CSV file", accept: ".csv", required: true})

Inputs for tabular data

These inputs are designed to work with tabular data such as CSV or TSV file attachments and database clients.

  • Search - query a tabular dataset
  • Table - browse a tabular dataset

Query a tabular dataset. Examples › API Reference ›

viewof search =, {placeholder: "Search U.S. capitals"})


Browse a tabular dataset. Examples › API Reference ›

For an array of objects named search:

viewof rows = Inputs.table(search)

Advanced & community inputs

Got the basics? Here are a few more advanced techniques:

For even more, consider these "friends & family" inputs and techniques shared by the Observable community:

2D SliderFabian Iwana two-dimensional range]
Binary InputRicky Reusserbitwise IEEE floating point
DIY inputsBartosz Prusinowskiinputs with fun, custom styles
FineRangeRicky Reusserhigh-precision numeric control
Form InputMike Bostockmultiple inputs in single cell
InputsJeremy Ashkenasthe original
Playeroscar6echodetailed timing control for animation
ScrubberMike Bostockplay/pause/scrub control for animation
Range SliderFabian Iwanda two-ended range
Ternary SliderYuri Vishnevskya proportion of three values
Data driven range slidersDavid B.a range input with a histogram
Snapping Histogram SliderRobert Harrisa range input with a histogram
Inputs in gridDavid B.combine multiple inputs into a compact grid
List InputHarris L.enter more than one of something
CopierMike Bostocka button to copy to the clipboard
TangleMike BostockBret Victor-inspired inline scrubbable numbers
EditorCMU Data Interaction Groupcode editor with syntax highlighting
Color Scheme PickerZack Ciminerapick a D3 color scheme
Easing Curve EditorNhogscreate a custom easing curve