Inputs

1linkconst input = state('');

2link

3linkrenderer.render(

4link  <>

5link    <input _state={input} type='text' placeholder='type something ...'/>

6link    <div>You typed: {input}</div>

7link  </>

8link).on(document.body);

👉 This works with various input types, <select> elements and <textarea> elements.

👉 Use _value attribute on select options to attach object values to each option:

1linkconst people = state([]);

2link

3linkconst john = { name: 'John', age: 32 };

4linkconst jack = { name: 'Jack', age: 24 };

5linkconst jill = { name: 'Jill', age: 17 };

6link

7linkrenderer.render(

8link  <>

9link    <select multiple _state={people}>

10link      <option _value={john}>{john.name}</option>

11link      <option _value={jack}>{jack.name}</option>

12link      <option _value={jill}>{jill.name}</option>

13link    </select>

14link

15link    <br/>

16link

17link    Age sum: {expr($ => $(people).reduce((t, p) => t + p.age, 0))}

18link  </>

19link).on(document.body);

👉 Callbag-JSX is an extension of Render-JSX, so it also supports features of Render-JSX inputs.