# Is it possible to inherit builtin inputs?

**URL:** <https://talk.observablehq.com/t/is-it-possible-to-inherit-builtin-inputs/5039>\
**Category:** Help\
**Created:** [May 9, 2021, 3:37pm UTC](https://talk.observablehq.com/t/is-it-possible-to-inherit-builtin-inputs/5039 "2021-05-09T15:37:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lochiwei](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lochiwei/32/4951_2.png) [@lochiwei](https://talk.observablehq.com/u/lochiwei)\
**Post date:** [May 9, 2021, 3:37pm UTC](https://talk.observablehq.com/t/is-it-possible-to-inherit-builtin-inputs/5039/1 "2021-05-09T15:37:45Z")

</div>

Now Observable provide many builtin [inputs](https://observablehq.com/@observablehq/inputs), such as Text, Range, etc.

I’m wondering if we can define our own custom class and inherit from these builtin inputs? If it is possible, how to do it in a notebook?

---

<div class="post-metadata">

**Author:** ![asg017](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/asg017/32/2159_2.png) [@asg017](https://talk.observablehq.com/u/asg017)\
**Post date:** [May 9, 2021, 9:10pm UTC](https://talk.observablehq.com/t/is-it-possible-to-inherit-builtin-inputs/5039/2 "2021-05-09T21:10:07Z")

</div>

Not sure what you mean by “inherit”, but for the Observable inputs like `Text` and `Range`, [under the hood](https://github.com/observablehq/inputs/blob/main/src/text.js#L52) they are just JavaScript functions and not classes (in case you were thinking of having something like `class MyText extends Text`).

You could create a wrapper function around an Input, to provide defaults/ re-map arguments like so:

```javascript
Query = value => Text({label: "Query", placeholder: "Search", submit: true, value})

viewof name = Query("Alex");

viewof dog = Query("clifford");

```

`Query` is light wrapper around `Text`, providing some default arguments and allowing you to provide a default value.

Also, you could built your own inputs that work with viewof, if you want to make something completely customizable. Here are some of my favorite notebooks that demonstrate that:

> **[DIY inputs](https://observablehq.com/@bartok32/diy-inputs)**
>
> Inspired by jashkenas' inputs. Coming soon: checkbox, text input, textarea. Welcome to the toolbo... notebook of easily customizable inputs! It serves as a list of examples, to showcase what's possible to achieve. I decided to create a tool – instead...

> **[Range Slider](https://observablehq.com/@mootari/range-slider)**
>
> Jump to: Examples | Usage | Changelog This notebook implements a themable range input for lower and upper bounds: View a demonstration Also provided is an optional light wrapper that mimics the widget APIs from Jeremy Ashkenas' Inputs notebook....

> **[Data driven range sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders)**
>
> Github - https://github.com/bumbeishvili/data-driven-range-slider Motivation I observed that, often I needed some kind of range filtering, which would be reflected by the data itself So, I decided to go ahead and built reusable range slider,...

> **[Exploring viewof](https://observablehq.com/@tmcw/exploring-viewof)**
>
> The viewof operator is incredibly cool, but a little mysterious. Let’s dig in and understand it on a level which enables some experimentation. The first thing to understand is viewof essentially gives a cell two representations: In the cell’s visual...

lmk if this answers your question!

---

<div class="post-metadata">

**Author:** ![lochiwei](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lochiwei/32/4951_2.png) [@lochiwei](https://talk.observablehq.com/u/lochiwei)\
**Post date:** [May 10, 2021, 8:28am UTC](https://talk.observablehq.com/t/is-it-possible-to-inherit-builtin-inputs/5039/3 "2021-05-10T08:28:50Z")

</div>

Thanks for your kind help 🙂  
This is just what I need.  
With the help from you and @mcmcclur , I managed to define my custom input object:

https://observablehq.com/embed/@lochiwei/math-plot?cell=*