You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<ahref="https://github.com/observablehq/inputs/blob/main/README.md#button"target="_blank">API</a> · <ahref="https://github.com/observablehq/inputs/blob/main/src/button.js"target="_blank">Source</a> · The button input emits an *input* event when you click it. Buttons may be used to trigger the evaluation of cells, say to restart an animation. For example, below is an animation that progressively hides a bar. Clicking the button will restart the animation.
4
4
5
-
The button input emits an *input* event when you click it. Buttons may be used to trigger the evaluation of cells, say to restart an animation.
6
-
7
-
For example, below is an animation (using [yield](../javascript/generators)) that progressively hides a bar.
The code block below references <code>replay</code>, so it will run automatically whenever the replay button is clicked.
22
12
23
-
```js echo
24
-
constreplay=view(Inputs.button("Replay"));
13
+
```js
25
14
constcanvas=document.querySelector("#canvas");
26
15
constcontext=canvas.getContext("2d");
16
+
context.fillStyle=getComputedStyle(canvas).color;
27
17
```
28
18
29
-
The code block below references <code>replay</code>, so it will run automatically whenever the replay button is clicked. If you click the button while the animation is still running, the animation will be interrupted and restart from the beginning.
30
-
31
19
```js echo
32
-
replay;
20
+
replay;// run this block when the button is clicked
<divclass="note">The <code>progress</code> top-level variable is declared as a <ahref="../javascript/generators">generator</a>. This causes the Observable runtime to automatically advance the generator on each animation frame. If you prefer, you could write this animation using a standard <code>requestAnimationFrame</code> loop, but generators are nice because the animation will automatically be interrupted when the code is <ahref="../javascript/reactivity#invalidation">invalidated</a>.</div>
31
+
42
32
You can also use buttons to count clicks. While the value of a button is often not needed, it defaults to zero and is incremented each time the button is clicked.
Interpolate input values into Markdown using [inline expressions](../javascript#inline-expressions):
53
-
54
-
You have clicked ${clicks} times.
42
+
You have clicked ${clicks} times.
55
43
56
44
```md
57
45
You have clicked ${clicks} times.
58
46
```
59
47
60
-
You can change this behavior by specifying the *value* and *reduce* options: *value* is the initial value, and *reduce* is called whenever the button is clicked, being passed the current value and returning the new value. The value of the button below is the last time the button was clicked, or null if the button has not been clicked.
48
+
While buttons count clicks by default, you can change the behavior by specifying the *value* and *reduce* options: *value* is the initial value, and *reduce* is called whenever the button is clicked, being passed the current value and returning the new value. The value of the button below is the last time the button was clicked, or null if the button has not been clicked.
The checkbox input allows the user to choose any of a given set of values. (See the [radio](./radio) input for single-choice.) A checkbox is recommended over a [select](./select) input when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability. For zero or one choice, see the [toggle](./toggle) input.
3
+
<ahref="https://github.com/observablehq/inputs/blob/main/README.md#checkbox"target="_blank">API</a> · <ahref="https://github.com/observablehq/inputs/blob/main/src/checkbox.js"target="_blank">Source</a> · The checkbox input allows the user to choose any of a given set of values. (See the [radio](./radio) input for single-choice.) A checkbox is recommended over a [select](./select) input when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability. For zero or one choice, see the [toggle](./toggle) input.
6
4
7
5
The initial value of a checkbox defaults to an empty array. You can override this by specifying the *value* option, which should also be an array (or iterable).
The *format* function, like the *label*, can return either a text string or an HTML element. This allows extensive control over the appearance of the checkbox, if desired.
If the checkbox’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.
66
+
If the checkbox’s data are specified as a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.
Passing a Map to checkbox is especially useful in conjunction with [d3.group](https://d3js.org/d3-array/group). For example, given a the sample `olympians` dataset of Olympic athletes, we can use d3.group to group them by gold medal count, and then checkbox to select the athletes for the chosen count. Note that the value of the checkbox will be an array of arrays, since d3.group returns a Map from key to array; use [*array*.flat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) to merge these arrays if desired.
85
107
86
108
```js echo
87
-
constgoldAthletes=view(Inputs.checkbox(d3.group(olympians, d=>d.gold), {label:"Gold medal count", sort:"descending", key: [4, 5]}));
109
+
constgoldAthletes=view(
110
+
Inputs.checkbox(
111
+
d3.group(olympians, (d) =>d.gold),
112
+
{label:"Gold medal count", sort:"descending", key: [4, 5]}
113
+
)
114
+
);
88
115
```
89
116
90
117
```js echo
91
118
goldAthletes.flat()
92
119
```
93
120
94
-
If the *sort* and *unique* options are specified, the checkbox’s keys will be sorted and duplicate keys will be discarded, respectively.
121
+
If the *sort* and *unique* options are specified, the checkbox’s keys will be sorted and duplicate keys will be discarded, respectively.
**label* - a label; either a string or an HTML element.
111
-
**sort* - true, “ascending”, “descending”, or a comparator function to sort keys; defaults to false.
112
-
**unique* - true to only show unique keys; defaults to false.
113
-
**locale* - the current locale; defaults to English.
114
-
**format* - a format function; defaults to [formatLocaleAuto](https://github.com/observablehq/inputs/blob/main/README.md#inputsformatlocaleautolocale) composed with *keyof*.
115
-
**keyof* - a function to return the key for the given element in *data*.
116
-
**valueof* - a function to return the value of the given element in *data*.
117
-
**value* - the initial value, an array; defaults to an empty array (no selection).
118
-
**disabled* - whether input is disabled, or the disabled values; defaults to false.
119
-
120
-
<!-- TODO check formatLocaleAuto link-->
137
+
**label* - a label; either a string or an HTML element
138
+
**sort* - true, *ascending*, *descending*, or a comparator to sort keys; defaults to false
139
+
**unique* - true to only show unique keys; defaults to false
140
+
**locale* - the current locale; defaults to English
141
+
**format* - a format function; defaults to [formatLocaleAuto](https://github.com/observablehq/inputs/blob/main/README.md#inputsformatlocaleautolocale) composed with *keyof*
142
+
**keyof* - a function to return the key for the given element in *data*
143
+
**valueof* - a function to return the value of the given element in *data*
144
+
**value* - the initial value, an array; defaults to an empty array (no selection)
145
+
**disabled* - whether input is disabled, or the disabled values; defaults to false
The color input specifies an RGB color as a hexadecimal string `#rrggbb`. The initial value defaults to black (`#000000`) and can be specified with the *value* option.
3
+
<ahref="https://github.com/observablehq/inputs/blob/main/README.md#inputscoloroptions"target="_blank">API</a> · <ahref="https://github.com/observablehq/inputs/blob/main/src/color.js"target="_blank">Source</a> · The color input specifies an RGB color as a hexadecimal string `#rrggbb`. The initial value defaults to black (`#000000`) and can be specified with the *value* option.
Like [Inputs.text](./text), but where *type* is color. The color value is represented as an RGB hexadecimal string such as #ff00ff. This type of input does not support the following options: *placeholder*, *pattern*, *spellcheck*, *autocomplete*, *autocapitalize*, *min*, *max*, *minlength*, *maxlength*.
45
+
Like [Inputs.text](./text), but where *type* is color. The color value is represented as an RGB hexadecimal string such as #ff00ff. This type of input does not support the following options: *placeholder*, *pattern*, *spellcheck*, *autocomplete*, *autocapitalize*, *min*, *max*, *minlength*, *maxlength*.
<ahref="https://github.com/observablehq/inputs/blob/main/README.md#date"target="_blank">API</a> · <ahref="https://github.com/observablehq/inputs/blob/main/src/date.js"target="_blank">Source</a> · The date input specifies a date.
6
4
7
5
```js echo
8
6
constdate=view(Inputs.date());
@@ -86,15 +84,15 @@ readonly
86
84
87
85
The available date input options are:
88
86
89
-
**label* - a label; either a string or an HTML element.
90
-
**value* - the initial value, as a JavaScriptDate or formatted as an ISO string (yyyy-mm-dd); defaults to null.
**required* - if true, the input must be a valid date.
94
-
**validate* - a function to check whether the text input is valid.
95
-
**width* - the width of the input (not including the label).
96
-
**submit* - whether to require explicit submission before updating; defaults to false.
97
-
**readonly* - whether input is readonly; defaults to false.
98
-
**disabled* - whether input is disabled; defaults to false.
87
+
**label* - a label; either a string or an HTML element
88
+
**value* - the initial value as a [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or `YYYY-MM-DD` string; defaults to null
**required* - if true, the input must be a valid date
92
+
**validate* - a function to check whether the text input is valid
93
+
**width* - the width of the input (not including the label)
94
+
**submit* - whether to require explicit submission; defaults to false
95
+
**readonly* - whether input is readonly; defaults to false
96
+
**disabled* - whether input is disabled; defaults to false
99
97
100
98
The value of the input is a Date instance at UTC midnight of the specified date, or null if no (valid) value has been specified. Note that the displayed date format is [based on the browser’s locale](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date).
0 commit comments