Saneef H. Ansari

Experiments

You can also target Observable inputs directly by fetching the library's current class namespace:
```
ns = Inputs.text().classList[0]
```

and including that in your CSS, e.g.:
```
.${ns} > label { text-transform: uppercase }
.${ns}-checkbox div label { font-style: italic }
```

Fabian Iwand

Can we keep this comment open or put this nearer the top? Don't bury the lede!

ns = Inputs.text().classList[0]

<style>
form.${ns} {
   width: inherit;
}
</style>

Tom Larkworthy

Would you mind sharing a few words about why this method is helpful? I think I get it but would appreciate an expert interpretation :)

Aaron Kyle Dennis

In @mootari's own words: "Because Tachyons resets and normalizes all styles we need to inject it as the first of all stylesheets:". The above snippet insert the `<link >` tag before other styles sheets in `<head>` of the page.

This is pretty powerful for removing the weird width behaviour of all the inputs.

form.${ns} {
    width: inherit;
  }

Am I reading this correctly: This function interprets and additional increment in the count associated with a `Input.button()` to dispatch an event resettling the value of `input.checked` to null? And the purpose of the final `dispatchEvent` is to let other listening functions know that a change has occurred?

Increment in the parent function `reduce` is to retain the default behavior with `Inputs.button`.

Yes, `dispatchEvent` is to let other know the value of this component has been updated.

You can simplify this to:

function reset(form, value) {
  if(!form.length) return;
  for(const n of form) n.checked = null;
  form.dispatchEvent(new Event("form", { bubbles: true }));
}

Note that I changed the name `input` to `form` because only HTMLFormElement is iterable, inputs aren't.

Using @tomarkworthy `view` here allows us to have an infinitely render-able-on-call copy of this element rather than rendering a single element that would be pulled across the DOM when different calls to it are made?

This cell is passing the values from a grouped set of inputs into a function that is firstly interpreting them into an `Input.button` that is assigned a `reset` function (i.e. Observable Inputs) and then renders  that `Input.button` object into an HTML stylized element with an assigned CSS class.  It is using this `<div class="">` assignment that allows us to apply custom CSS to the returned input object?

We can use the regular `html` and `htl.html` to compose Inputs and other HTML elements. But, we will loose out on the values returned by the Inputs. Here, I'm using Tom's `view` to return the values of the inputs used. 

This is like a factory function, each time you call this function in a cell, a copy of HTML DOM elements are provided to  that cell.

The gist of the code here is:
— create a radio, `radioGroup`, using `Inputs.radio`
— create a button, `clearBtn` using `Input.button`
— when `clearBtn` is clicked its `reduce` function, which I use to reset `radioGroup`. With in the `reduce` function I'm retain default `r => r +1` to increment count on each clicks.