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
Copy file name to clipboardExpand all lines: docs/inputs/checkbox.md
+30-16Lines changed: 30 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,10 @@
1
1
# Checkbox input
2
2
3
-
A Checkbox allows the user to choose any of a given set of values. (See [Radio](./radio) for single-choice.) A Checkbox is recommended over a [Select](./select) 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 [Toggle](./toggle).
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).
5
+
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
+
7
+
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).
A Checkbox can be disabled by setting the *disabled* option to true. Alternatively, specific options can be disabled by passing an array of values to disable.
41
+
A checkbox can be disabled by setting the *disabled* option to true. Alternatively, specific options can be disabled by passing an array of values to disable.
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.
51
+
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.
61
+
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.
<!--[TODO] check if okay, removed link to Hello, Inputs. -->
83
-
84
-
Passing a Map to Checkbox is especially useful in conjunction with [d3.group](https://observablehq.com/@d3/d3-group). For example, given a tabular 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.
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.
89
85
90
86
```js echo
91
-
constgoldAthletes=view(Inputs.checkbox(d3.group(athletes, d=>d.gold), {label:"Gold medal count", sort:"descending", key: [4, 5]}));
87
+
constgoldAthletes=view(Inputs.checkbox(d3.group(olympians, d=>d.gold), {label:"Gold medal count", sort:"descending", key: [4, 5]}));
92
88
```
93
89
94
90
```js echo
95
91
goldAthletes.flat()
96
92
```
97
93
98
-
If the *sort* and *unique* options are specified, the Checkbox’s keys will be sorted and duplicate keys will be discarded, respectively.
94
+
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?tab=readme-ov-file#formatLocaleAuto) 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.
Copy file name to clipboardExpand all lines: docs/inputs/color.md
+11-3Lines changed: 11 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,8 @@
1
1
# Color input
2
2
3
-
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.
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.
If you specify the *datalist* option as an array of hexadecimal color strings, the color picker will show this set of colors for convenient picking. (The user will still be allowed to pick another color, however; if you want to limit the choice to a specific set, then a radio or select input may be more appropriate.)
20
22
21
-
<!-- [TODO] update to the new Observable color palette? -->
23
+
<!-- [TODO] update to the new Observable10 color palette? -->
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*.
**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.
99
+
100
+
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).
The File input specifies a local file. The exposed value provides the same interface as an Observable [file attachment](../javascript/files) for convenient parsing in various formats such as text, image, JSON, CSV, ZIP, and XLSX; however, the file is not uploaded and is only available temporarily in memory.
5
+
The file input specifies a local file. The exposed value provides the same interface as an Observable [file attachment](../javascript/files) for convenient parsing in various formats such as text, image, JSON, CSV, ZIP, and XLSX; however, the file is not uploaded and is only available temporarily in memory.
6
6
7
7
By default, any file is allowed, and the value of the input resolves to null.
8
8
9
-
<!-- [TODO] check error, return to File input after hearing back (Fil has PR submitted) -->
9
+
```js echo
10
+
constfile=view(Inputs.file());
11
+
```
12
+
13
+
```js echo
14
+
file
15
+
```
16
+
17
+
We recommend providing a *label* to improve usability.
18
+
19
+
Specify the *accept* option to limit the allowed file extensions. This is useful when you intend to parse the file as a specific file format, such as CSV. By setting the *required* option to true, the value of the input won’t resolve until the user choses a file.
**label* - a label; either a string or an HTML element.
91
+
**required* - if true, a valid file must be selected.
92
+
**validate* - a function to check whether the file input is valid.
93
+
**accept* - the [acceptable file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
94
+
**capture* - for [capturing image or video data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture).
95
+
**multiple* - whether to allow multiple files to be selected; defaults to false.
96
+
**width* - the width of the input (not including the label).
97
+
**disabled* - whether input is disabled; defaults to false.
98
+
99
+
Note that the value of file input cannot be set programmatically; it can only be changed by the user.
100
+
101
+
<!-- TODO check: Delete? (In vanilla JavaScript, the Inputs.file method is not exposed directly. Instead, an Inputs.fileOf method is exposed which takes an AbstractFile implementation and returns the Inputs.file method. This avoids a circular dependency between Observable Inputs and the Observable standard library.)-->
Copy file name to clipboardExpand all lines: docs/inputs/form.md
+14-2Lines changed: 14 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,8 @@
1
1
# Form input
2
2
3
-
The Form input combines a number of inputs into a single compound input. It’s intended for a more compact display of closely-related inputs, say for a color’s red, green, and blue channels.
The form input combines a number of inputs into a single compound input. It’s intended for a more compact display of closely-related inputs, say for a color’s red, green, and blue channels.
0 commit comments